將.js文件作為文本導入並在react-native博覽會中的WebView InjectionJavaScript內部使用

Question

我有一個文件content.js ，包括我想使用的WebView內注入一些JavaScript代碼injectedJavaScript 。

我試過了：

    fetch('./content.js').then((result) => {
      result = result.text();
      this.setState(previousState => (
        {contentScript: result}
      ));
    });

但是它沒有得到正確的文件。

const contentScript = require('./content.js');

這可以工作，但是可以立即評估JavaScript，在執行之前，我似乎找不到找到將其轉換為字符串的方法。

一種解決方案是只將content.js的代碼復制到字符串中，但是當我要編輯代碼時，這會很煩人。

有誰知道更好的解決方案嗎？
我將近一個星期仍然沒有解決辦法。 :(

Answer 1

由於expo使用的是webpack，因此您可以對其進行自定義。 的WebPack有裝載機 ，你可能會感興趣的部分。而你所需要的程序叫原始裝載機 。 因此，當您需要一些文件時，webpack會針對它在配置文件中的加載程序鏈來運行該文件。 默認情況下，所有.js文件都捆綁到index.js ，當您運行應用程序時，該文件將被執行。 取而代之的是，您需要raw-loader確切執行的文件內容。 它將插入類似

module.contentScript = function() { return "console.log('Hello world!')"}

代替：

module.contentScript = function() { console.log('Hello World'}}

因此，您需要：

npm install raw-loader --save-dev

在您的代碼中：

require('raw-loader!./content.js');