在React Native App的WebView中包含外部JavaScript文件
[英]Include external JavaScript file in the WebView of React Native App
问题描述
I'm trying to include an external JavaScript file inside a WebView of my React Native project. 
我试图在我的React Native项目的WebView中包含一个外部JavaScript文件。 The file I wish to include is a third party library not available on npm written in plain JavaScript (No ES5 or higher). 我希望包括的文件是npm没有以纯JavaScript编写的第三方库（没有ES5或更高版本）。 I need a solution for injecting my JS file in the WebView of the React Native project without importing it or making it an npm module. 我需要一种解决方案，以将我的JS文件注入到React Native项目的WebView中，而无需导入它或使其成为npm模块。
I have tried the following methods but nothing works as for now: 我尝试了以下方法，但目前没有任何效果：
- I have tried to load the script like this: Insert script tag 我试图这样加载脚本： 插入脚本标签
- I have tried to load the script dynamically in
injectedJavaScriptfollowing the answer here: Link JS file from a JS file我试图动态加载脚本injectedJavaScript这里的答案如下： 从JS文件链接JS文件
This is my external AppGeneral.js : 这是我的外部AppGeneral.js ：
function AppGeneral(){
alert("Ok");
}
var app = new AppGeneral();
This is my index.ios.js file: 这是我的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=' ';"></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>
);
}
}
2 个解决方案
解决方案1
1 2016-11-24 21:32:40
解决方案2
1 2019-03-05 18:20:20
The only way to load JavaScript in a RN WebView is using the injectedJavaScript property, and this can only take a plain string (not a file path). 在RN WebView中加载JavaScript的唯一方法是使用injectedJavaScript JavaScript属性，并且只能采用纯字符串（而不是文件路径）。 In my case, I've done it this way: 就我而言，我是这样完成的：
First generate a file that contains your JS file converted to a plain string: 首先生成一个文件，其中包含转换为纯字符串的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);
And make sure "/my-rn-app/external-lib.js" is somewhere where it can be imported in React Native. 并确保“ /my-rn-app/external-lib.js”位于可以在React Native中导入的位置。
Then simply import the file and inject it in the WebView: 然后只需导入文件并将其注入到WebView中：
const myJsLib = require('external-lib.js');
const webView = <WebView injectedJavaScript={myJsLib} .....
This is not a particularly pretty solution but it works well. 这不是一个特别漂亮的解决方案，但效果很好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.