使用 React Native Webview 添加本地 HTML 和 JS 文件

Question

我想加载一个本地 HTML 文件，该文件使用react-native-webview 中的标签导入本地 JavaScript 库。
我尝试了许多解决方案，但没有在 React native 0.60.5 上工作。

• 我尝试了this approach，但在 iOS 上出现 Domain Not Found -1100 错误。
• 尝试了this 解决方案，但没有奏效。 （并且导入js文件的说明不清楚）

我正在使用：

"react": "16.8.6",
"react-native": "0.60.5"

PS：我正在尝试在 webView 中实现 highcharts.js 图表库。

Answer 1

<View
        style={{
         flex:1
        }}
        >
          <WebView 
        scalesPageToFit
          originWhitelist={["*"]} 
          source={{ uri:"file:///android_asset/highcharts/index.htm",baseUrl:"file:///android_asset/highcharts/"

         }}/>

        </View>

这是react-native-webview中的highchart的工作示例。

1. 1.首先将你所有的html/js代码移动到以下目录： your_project/android/app/src/main/assets/。如果assets 文件夹不存在，请创建它。
2. 现在将所有html/css/js 代码粘贴到您创建的assets 文件夹中
3. 关闭你的终端/cmd/bash 或任何你用来运行react-native run-android 命令的东西。
4. 现在运行以下命令。 react-native run-android。

5. 现在将上面的代码粘贴到您的.js 文件中。将uri 设置为您的html 文件的路径，例如uri:"file:///android_asset/YOUR_HTML_FILE" 和您的baseUrl:"file:///android_asset/YOUR_MAIN_FOLDER/"