webview使用uri属性加载html资源。
1.简单且常变动的需求可以选择加载远程网页地址
2.当需要接入的网络资源很多，如一些独立的web应用，可以考虑本地接入
- 针对本地接入方式进行记录。
- 所有的静态资源如 css，js，img等都应该存储在本地。
- 同时支持android和ios
- 所有平台都从一个目录中读取文件，避免冗余。
一.RN中创建静态资源目录
- 在RN项目根目录中创建Static.bundle文件夹
- 将独立的web应用或html文件移动到此文件夹中
静态资源文件以.bundle结尾原因是：ios对以.bundle结尾的文件在打包后能够保持内部的资源引用路径
二.ios工程静态资源引入
- xcode打开ios工程后，在以项目名称命名的第一个文件夹，右边后选择Add Files to
-
找到第一步的Static.bundle文件夹并添加，不要勾选Copy items if need
image.png
三.Android资源路径设置
- 打开android/app/build.gradle文件，修改如下
android {
...
sourceSets {
main {
asset.srcDirs = ['src/main/assets', '../../Static.bundle']
}
}
}
四.WebView访问本地HTML
- 设置HTML路径
let source = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + `Static.bundle/index.html`;
<WebView
ref={ref => (this.webViewRef = ref)}
onMessage={this.onMessage}
originWhitelist={['*']}
allowFileAccess={true}
source={{uri: source}}
javaScriptEnabled={true}
decelerationRate='normal'
scrollEnabled={true}
useWebKit={true}
mediaPlaybackRequiresUserAction={true}
mixedContentMode="compatibility"
allowingReadAccessToURL="*"
// onLoadEnd={() => this.setState({ loading: false })}
/>
接入本地HTML已大致完成， 可在iOS和Android平台测试
