react-native 显示html,react-native-webview加载本地H5

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`;

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平台测试