react-native-webview使用本地html

2,127 阅读1分钟

在开发中碰到一个需求,需要加载本地已经打包出来的 spa 页面

  1. 在当前工作目录下面新建文件 Static.bundle 文件,把相关的资源复制进去。

使用.bundle 文件主要是 iOS 对该类型文件在打包后能够保持内部资源的引用路径

  1. 在 iOS 工程中添加静态资源

2021-10-13_15-21-01.png

2021-10-13_16-39-52.png

  1. 在 Android 工程中添加静态资源配置

    android/app/build.gradle文件的android中添加如下代码sourceSets那一堆代码(建议直接复制,手打容易出错,不要问为啥)

        android {
          ...
          sourceSets {
            main {
              assets.srcDirs = ['src/main/assets', '../../Static.bundle']
            }
          }
        }
    
  2. 具体使用

    const App = ()=>{
      const source = Platform.OS==='ios'?'Static.bundle/index.html':'file:///android_asset/index.html';
      render(){
        return (
          <WebView
            originWhitelist={['*']} // 需要修改白名单
            allowFileAccess={true} // 允许通过 file://的形式加载资源
            allowingReadAccessToURL="*"
            source={{uri:source}}
          />
        )
      }
    }