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

时间:2023-03-09 03:25:46
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"
}
}