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

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