在 react-native 中使用 javascript 插件时面临的问题答案

【问题标题】：Ploblem facing in using javascript plugin in react-native在 react-native 中使用 javascript 插件时面临的问题
【发布时间】：2020-11-03 10:34:47
【问题描述】：

我需要在 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()，我该怎么做？

【问题讨论】：

请您提供minimal reproducible example 吗？否则我们可能会猜测。
感谢您的回复 :) 嘿，我已经编辑了我的问题，请检查并回答。

标签： javascript react-native mathjax mobile-development wiris

【解决方案1】：

如果你想在应用程序中使用 html，你必须使用 react native webview。检查库的 source prop

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

如果您想使用该文件中的 javascript 函数，您可以简单地将其导入 ES6 或使用 require 语句

【讨论】：

我已经编辑了我的问题，请您再次检查并回答，会很棒:)
使用注入的JavaScript 属性将您的javascript 传递给html 并使用源代码提供静态html。希望它有效！
你能给我举个例子吗，比如在injectedJavaScript props里面注入JS文件？
关注medium.com/@idanlevi2/…