logo标签列表

在React Native应用程序的WebView中包含外部JavaScript文件

javascriptreact-native
14

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

目前我已经尝试了以下方法，但都没有成功：

这是我的外部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>
    );
  }

}
你为什么想要使用webview来执行代码？ - Martin Cup
@MartinCup 我的JS文件是一个JS电子表格引擎。将整个库转换为模块，然后在导入语句中使用它并不是最优解。因此，我希望像在基于cordova的应用程序中一样，在webview中包含此文件。请建议最佳方法。 - Manu Gupta
@Manu Gupta - 你找到解决问题的方法了吗？ - Abolfazl Roshanzamir
3个回答
8
在 RN 中加载 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} .....

这并不是一个特别好看的解决方案，但它运作良好。
4

也许您可以将JS文件捆绑为资产，然后像在“本地”WebView中一样引用该文件。请参阅此答案，了解有关Android的信息，以及这些答案，了解有关iOS的信息，[1]和[2]。

我也认为这是解决方案。 - JFAP
0

我最后把JS源代码粘贴在<script>我的JS代码...</script>标签之间

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接