Question

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

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

但是，我想在webview中注入一大堆javascripts。要包含的脚本位于letScripts.js（可能导入一大堆依赖项，如jquery等）。

如此直观我正在尝试

import additionalScripts from './additionalScripts.js'

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

首先它不起作用。

其次，如何确保导入的additionalScripts已正确＆＃39; webpacked＆＃39;并且＆＃39; uglified＆＃39; ？

由于

Answer 1

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

要将文件作为文本加载，您可以尝试使用React Native FS module之类的内容，我是从this answer了解到的。

// ...
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} />;
  }
}

打包要插入React Native的WebView的js文件

1 个答案: