react-native webView android使用本地html问题

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

var source =  require('../html/my.html') :

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

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

// 区分ios和androidvar 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/17304task copyReactNativeHTML(type: Copy) {    from '../../app/html'    into 'src/main/assets/html'}// Note that you may need to add other build variantsgradle.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"      }}

转载于:https://www.cnblogs.com/chriiess/p/8919175.html

更多相关文章

随机推荐