• reactnative webView android使用本地html问题


    react-native WebView组件使用本地html时候,一般都是这样使用

    var source =  require('../html/my.html') : 
    <WebView  source={source} />
    

    在debug模式下,android和ios是没有问题的
    然而,在release模式下,也就是打包的时候,安卓会无法读取到html路径,导致无法加载成功!

    在网上查找一番资料之后,得知要把html放在android的资源目录下面,并且使用file:///android_asset/路径才能加载!
    具体路径:android/app/src/main/assets
    我们在这个路径下面建立html文件夹,专门放置我们的html
    代码修改一下

    // 区分ios和android
    var source = (Platform.OS == 'ios') ? require('../html/my.html') : {uri: "file:///android_asset/html/my.html"}
    

    嗯~~那这样我们每次修改html代码都得复制两份代码,有点不可接受
    修改一下,修改html代码后每次编译自动复制到android资源目录下
    打开android/app/build.gradle
    增加

    // Android currently requires the HTML files in React Native to be
    // in the Android Assets
    // https://github.com/facebook/react-native/pull/17304
    task copyReactNativeHTML(type: Copy) {
        from '../../app/html'
        into 'src/main/assets/html'
    }
    // Note that you may need to add other build variants
    gradle.projectsEvaluated {
        bundleDebugJsAndAssets.dependsOn(copyReactNativeHTML)
        bundleReleaseJsAndAssets.dependsOn(copyReactNativeHTML)
    }
    

    ok,这样每次编译android就不用再去手动复制了

    等等~
    我们知道debug模式是没问题的,这样为了兼容debug模式不用去手动复制,再次修改,最终如下

    var source = ""
    if (__DEV__) {
          // debug模式
          source = require('../html/my.html')
    } else {
          // release模式
          source = (Platform.OS == 'ios') ? require('../html/my.html') : {
            uri: "file:///android_asset/html/my.html"
          }
    }
    
  • 相关阅读:
    AFNetworking使用总结
    使用Attiny 85开发板制作BadUSB
    C# 按指定数量从前面或者后面删除字符串
    C# 获取打印机列表
    【解决】该任务映像已损坏或已篡改。(异常来自HRESULT:0x80041321)
    PowerShell 解锁使用浏览器下载的文件
    C#使用HttpHelper万能框架,重启路由器
    【解决】应用程序无法正常启动(0xc000007b)。请单击“确定”关闭应用程序。
    Windows 7 IE11 F12 不能正常使用
    HTML5 图片上传预览
  • 原文地址:https://www.cnblogs.com/ariphan/p/8919175.html
Copyright © 2020-2023  润新知