Man*_*pta 6 javascript react-native
我试图在我的React Native项目的WebView中包含一个外部JavaScript文件。我希望包含的文件是第三方库，无法使用npm纯JavaScript编写（No ES5或更高版本）。我需要一种解决方案，用于将我的JS文件注入到React Native项目的WebView中，而无需将其导入或使其成为npm模块。
我尝试了以下方法，但目前没有任何效果：
injectedJavaScript以下答案动态加载脚本：从JS文件链接JS文件这是我的外部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=' ';"></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>
);
}
}
在 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} .....
这不是一个特别漂亮的解决方案，但效果很好。
| 归档时间： |
|
| 查看次数： |
4793 次 |
| 最近记录： |