如何从 WebView 向 React Native 发送消息？

Question

我\xe2\x80\x99已经成功地从React Native（RN）发送消息到WebView。

\n

我\xe2\x80\x99m 所困扰的是将消息从WebView 返回到RN。\xe2\x80\x99s 没有显示任何错误 - 它\xe2\x80\x99s 只是消息永远不会通过。

\n

这是 I\xe2\x80\x99m 使用的代码：

\n

反应本机代码

\n

<WebView\n  ref={webview => (this.webview = webview)}\n  source={{ uri: "http://www.my-web-site"}}\n  onLoadEnd={() => this.onLoadEnd()}\n  onMessage={this.onMessage}\n  cacheEnabled={false}\n  originWhitelist={['*']}\n  javaScriptEnabled={true}\n/>\n\nonLoadEnd() {\n  this.webview.postMessage("RN message");\n}\n\nonMessage(message) {\n  console.log("I can\xe2\x80\x99t see this message!");\n}\n

\n

网页视图代码

\n

document.addEventListener("message", function (event) {\n  setTimeout(function(){document.postMessage("WebView message")}, 3000);\n}, false);\n

\n

Answer 1

请确保每个接收器的数据都已存在并使用您需要的数据。

并且在使用之前一定要检查规定的文档，了解如何使用参数和语法。

护士长

onLoadEnd() {

  this.webview.postMessage("sendmessage");
}

onMessage(event) {
  alert(event.nativeEvent.data);
}

网页视图代码

    document.addEventListener("message", function (event) {
        window.postMessage(event.data);
    });

React-native 5.0 或更高版本

window.ReactNativeWebView.postMessage(event.data);