react-native - 打包js文件插入到React Native的WebView中

Question

我正在反应本机脚本中创建一个 webview，例如

<WebView source="https://www.google.com" />

但是，我想在 webview 中注入一大堆 javascript。要包含的脚本位于附加脚本.js 中（它可能会导入一大堆依赖项，例如 jquery 等。

如此直观，我正在尝试做

import additionalScripts from './additionalScripts.js'

<WebView source="https://www.google.com" injectedJavaScript={additionalScripts} />

首先它不起作用。

其次，如何确保导入的附加脚本已正确“webpacked”和“uglified”？

谢谢

Answer 1

问题是injectedJavaScript需要一个字符串，但import实际上执行 JS 文件并将结果导出为对象。

要将文件作为文本加载，您可以尝试类似React Native FS module ，我从这个答案中了解到它。

// ...
import RNFS from require('react-native-fs');
// ...
class MyComponent extends Component {
  constructor() {
    super();
    this.state = {
      additionalScripts: null
    };
  }

  componentDidMount() {
    RNFS.readFile('./additionalScripts.js', 'utf8')
      .then((contents) => {
        this.setState({
          additionalScripts: contents
        });
      });
  }

  render() {
      if(!this.state.additionalScripts) {
        return null;
      }

      return <WebView 
        source="https://www.google.com"
        injectedJavaScript={additionalScripts} />;
  }
}