React Native Webview如何使用injectJavascript

Question

我正在尝试在由本机反应的WebView加载的网页中设置一个全局变量.我正在尝试使用injectJavascript prop设置全局变量,但是我收到一个错误,告诉我injectJavascript应该是一个函数.

如何格式化injectJavaScript函数以将消息作为全局变量传递到加载的网页？谢谢.

class Browser extends React.Component {

  render() {
    const { url } = this.props;
    return (
      <View>
        <WebView
          source={{ uri: url }}
          injectJavaScript={
            "window.testMessage = 'hello world'"
          }
        />
      </View>
    );
  }
}

Answer 1

如果您只想设置全局变量,可以使用injectJavaScript prop,它会在视图加载时将您的js代码注入网页.你可以简单地将js代码作为字符串传递.

如果您想从任何函数设置全局变量,那么您可以执行以下操作:首先,请参考webview.

<WebView
     ref={ref => (this.webview = ref)}
     ...
/>

然后,只要您想要注入js代码,请执行以下操作:

this.webview.injectJavaScript('window.testMessage = "hello world"; void(0);');

看看链接以供参考.

https://snack.expo.io/Hke6dJFAW

Answer 2

请试试这个：

<WebView
    ref={c => this._webview = c}
    javaScriptEnabled={true}
    injectedJavaScript={`window.testMessage = "hello world"`}
/>

injectedJavaScript是道具是内喷射JS到Web视图，一次，当它的负载。这似乎是你想要的。

injectJavascript另一方面如何使用？它是通过在 webview 的 ref 上调用它来以编程方式动态注入更多 JS。在这种情况下，它可能看起来像这样，例如：

this.webview.injectJavascript(`window.reactComponent.forceUpdate();true;`)