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"
}
}