react-native 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"
      }
}
posted @ 2018-04-23 15:00  Ariphan  阅读(950)  评论(0编辑  收藏  举报