React Native - webview - 加载js文件答案

【问题标题】：React native - webview - load js filesReact Native - webview - 加载js文件
【发布时间】：2019-04-02 09:29:47
【问题描述】：

我需要动态加载 JS（取决于用户偏好，因此不能在 index.html 中全部硬编码），但在我的应用程序中存在问题。

场景 1 就像一个魅力：

index.html

<html>
  <head>
  </head>
  <body>
    <h1>Highcharts webview demo</h1>
    <div id="container" style="width:100%; height:500px;"></div>
    <script type="text/javascript" src="library.js"></script>
    <script>
      library works
    </script>
  </body>
</html>

应用

const webapp2 = require('../web/index.html')

render() {
return <View>
      <WebView
        source={webapp2}
        originWhitelist={'["*"]'}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        scalesPageToFit={true}
        scrollEnabled={false}
      />
</View>
}

但是当我尝试在源代码中通过html 执行此操作时，我缺少 JS 库。

场景 2 - 不工作

应用

  render() {

    // Create container for the chart
    return <View style={styles.container}>
      <WebView
        source={{html:`<html><head><script type="text/javascript" src="library.js"></script></head><body><div id="container" style="width:100%; height:500px;"></div><script>Library does not exist yet</script></body></html>`, baseUrl: 'web/'}}
        originWhitelist={'["*"]'}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        scalesPageToFit={true}
        scrollEnabled={false}
      />
    </View>
  }

我想避免使用外部库来加载 js 文件。

【问题讨论】：

标签： react-native webview react-native-android react-native-ios

【解决方案1】：

首先根据您的方案 1 加载 index.html 文件。然后获取 webview 组件的参考。 webview 加载 index.html 文件后，我们可以注入 javascript 来加载 js 文件，如下所示：

<WebView
    ref={ref => (this.webview = ref)}
    source={webapp2}
    originWhitelist={'["*"]'}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    scalesPageToFit={true}
    scrollEnabled={false}
    onLoad={() => { this.injectJSFileFromWeb(); }}
/>

只要你想加载js文件，你就可以调用这个函数。但是，请确保 webview 已加载 html。

injectJSFileFromWeb() {
    //give the filename according to your need
    var jsFileName = "library2.js";
    var fp = `
        var corescript = document.createElement('script');
        corescript.type = 'text/javascript';
        corescript.src = "${jsFileName}";
        var parent = document.getElementsByTagName('head').item(0);
        parent.appendChild(corescript);
        void(0);
    `;
    this.webview.injectJavaScript(fp);
}

注意：仅在 android 上检查。

【讨论】：