在React-Native中使用JavaScript插件时遇到的问题

编程问答 2022-06-04

问题描述

我需要在React-native中使用/导入一个JavaScript插件。 插件文件包含使用javascript而非es6格式编写的函数。我需要通过Webview或其他方式将它们用于react-native。

我已经尝试过WebView，但是HTML代码甚至都没有加载JS插件文件（<script type="text/javascript" src="./testjs.js">） 因为当我给它错误的路径时，它应该给我一些文件丢失错误，而在同一位置上的简单警报正在起作用。 以下是在RN屏幕上呈现的内容：-

render () {
    var HTML = `<html> <head> <script type="text/javascript" src="./testjs.js"></script> </head> <body> <div id="workbookControl"></div> <div id="tableeditor" style="font-size : 50px;">I am written inside source HTML</div> </body> </html>`
    var jsCode = ` true;`
    return (
        <WebView
            originWhitelist={['*']}
            source={{ html: HTML }}
            injectedJavaScript={jsCode}
            onMessage={() => {}}
            javaScriptEnabledAndroid={true}
            javaScriptEnabled={true}
        />
    )
}

这是testjs.js的代码

(function hello(ddd) { alert("heiii"); return "Hello"; })(); true;

我想从testjs.js调用此hello（），我该怎么做？

解决方法

如果您想在应用程序中使用html，则必须使用react native webview。检查库的源道具

https://github.com/react-native-webview/react-native-webview/blob/74872a1f02c43e425f19739b1b25f5fbe614ba1f/docs/Reference.md#source

如果要使用该文件中的javascript函数，只需将其导入ES6或使用require语句

javascriptmathjaxmobile-developmentreact-nativereact-nativewiris