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

Question

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

• 我试过this approach ，但我在 iOS 上收到未找到域 -1100 错误。
• 尝试过 this解决方案，但没有奏效。 (并且导入js文件说明不明确)

我正在使用:

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

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

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 代码移动到以下目录: 你的项目/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/"