ract-native 加载本地vue或者react项目

前言

目前公司正在开发一个rn的项目，但是其中一部分功能是使用Taro开发的另外一个项目，目的是为了能单独拿出来生成一个新的app，也可以以html方式嵌入到现有rn项目中，这个时候问题就来了，怎么嵌入到现有项目中。

集成

由于在使用rn中提供的WebView时发现官方文档推荐使用react-native-webview组件，然后就这样换了WebView，集成方式直接参考文档就可以。不过需要注意的是react-native-webview版本要支持androidx，这个需要根据自己项目看看能不能使用最新版。

对于vue或者react项目本身

在打包的时候需要将

module.exports = {
    // publicPath : '/',
    // 修改为相对路径
    publicPath : './',
}

对于android

需要将打包后的vue项目放到android的静态目录中

<WebView
              style={{ flex: 1 }}
              source={{ uri: ‘file:///android_asset/index.html’ }}
              injectedJavaScript={insertJs}
              javaScriptEnabled
              originWhitelist={['*']}
              onMessage={this.handleMessage}
            />

对于ios

ios的集成是真的坑，网上找的全都是说直接 source={require('./pages/demo.html')}，结果到真机上一试，结果页面空白，也没有报错，不知道到底是加载成功还是没有加载成功。直到我在index.html中加了一些其他输出才知道，require这种方式打开的页面没有加载到js，和css等一系列静态资源。找到问题之后又是一顿搜啊，结果就是找了好久就是没得解决方案，最后还是用的file://这种方式访问。

rn在ios打包的时候，会把打包的目录拖到ios的项目中，我这边也就顺便把vue项目打包后的文件也放到了 release_ios/assets/static/下。

利用 react-native-fs 提供的 MainBundlePath 常量，可以直接获取到打包后项目的根路径，然后一路找到需要的页面

<WebView
              style={{ flex: 1 }}
              source={{ uri:`file://${RNFS.MainBundlePath}/release_ios/assets/static/#这里改成自己的路径#/index.html`}}
　　　　　　　　injectedJavaScript={insertJs} 
　　　　　　　　javaScriptEnabled originWhitelist={['*']}
　　　　　　　　onMessage={this.handleMessage} 
/>

集成到这基本就ok，后面再加一下 Platform 判断下平台就可以了。

ract-native 加载本地vue或者react项目

猜你喜欢