Question

我正在尝试将外部JavaScript文件包含在我的React Native项目的 WebView 中。我希望包含的文件是在npm上以普通JavaScript（无ES5或更高版本）编写的第三方库。我需要一个解决方案，用于在React Native项目的WebView中注入我的JS文件，而无需导入它或使其成为npm模块。

我尝试了以下方法，但现在没有任何作用：

我尝试加载这样的脚本：Insert script tag
我尝试在injectedJavaScript中动态加载脚本，然后按照此处的答案进行操作：Link JS file from a JS file

这是我的外部AppGeneral.js：

function AppGeneral(){
     alert("Ok");
}
var app = new AppGeneral();

这是我的index.ios.js文件：

export default class sampleReactApp extends Component {
  render() {

    let HTML = `
    <html>
      <head>
        <script type="text/javascript" src="js/AppGeneral.js"></script>
      </head>
      <body>
        <div id="workbookControl"></div>
            <div id="tableeditor">editor goes here</div>
            <div id="msg" onclick="this.innerHTML='&nbsp;';"></div>
      </body>
    </html>
    `;

     let jsCode = `
     alert("Js");
    `;
    return (
        <View style={styles.container}>
            <WebView
                style={styles.webView}
                ref="myWebView"
                source={{ html: HTML }}
                injectedJavaScript={jsCode}
                javaScriptEnabledAndroid={true}
            >
            </WebView>
        </View>
    );
  }

}

Answer 1

也许您可以尝试将您的JS文件捆绑为资产，然后像在本地＆＃39;中那样引用该文件。的WebView。请查看Android的此答案以及iOS，[1]和[2]的答案。

Answer 2

在RN WebView中加载JavaScript的唯一方法是使用injectedJavaScript属性，并且该属性只能采用纯字符串（而不是文件路径）。就我而言，我是这样做的：

首先生成一个文件，其中包含转换为纯字符串的JS文件：

const fs = require('fs-extra');
const filePath = '/path/to/your/lib.js';
const js = await fs.readFile(filePath, 'utf-8');
const json = 'module.exports = ' + JSON.stringify(js) + ';';
await fs.writeFile('/my-rn-app/external-lib.js', json);

并确保“ /my-rn-app/external-lib.js”位于可以在React Native中导入的位置。

然后只需导入文件并将其注入WebView：

const myJsLib = require('external-lib.js');
const webView = <WebView injectedJavaScript={myJsLib} .....

这不是一个特别漂亮的解决方案，但效果很好。

在React Native App的WebView中包含外部JavaScript文件

2 个答案: