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 判斷下平台就可以了。