如何在 react-native webView 和 React web-app 之间进行通信？

Posted 2023-02-22

技术标签:

【中文标题】如何在 react-native webView 和 React web-app 之间进行通信？【英文标题】：how to Communicate between react-native webView and a React web-app? 【发布时间】：2020-10-07 13:57:58 【问题描述】：

我正在尝试在 react-native 中的 webView 和使用 React-360（当然还有 React）创建的 web 应用程序之间创建通信。我正在使用 react-native-webview 并在此链接上按照本指南创建通信： https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md 使用页面中的示例，在脚本部分使用带有函数window.ReactNativeWebView.postMessage(data) 的简单 html 页面（如链接中的示例），效果很好：

 <WebView
  source=uri: this.props.link

    ref=( webView ) => this.webView = webView

    onMessage=event => 
      alert(event.nativeEvent.data);
    
  />

然而，我的目的是在我单击按钮时在 webView window.ReactNativeWebView.postMessage(data) 中调用我的 Web 应用程序，例如使用如下函数：

homeButtonClicked() 
    console.log("sei uscito, torna all'App!")
    window.ReactNativeWebView.postMessage(data);

不幸的是，当我单击按钮时，出现以下错误： Cannot read property 'postMessage' of undefined。我该如何解决这个问题？谢谢大家。

【问题讨论】：

【参考方案1】：

你能试试文档中的超时功能吗

setTimeout(function () 
   window.ReactNativeWebView.postMessage("Hello!")
, 2000)

【讨论】：

【参考方案2】：

我在 React-360 存储库中的一个旧问题中找到了问题的解决方案。 React-360 代码无法访问窗口，因此有必要将代码放在本机模块中，然后可以从那里向 react-native 应用程序发送消息。问题链接：https://github.com/facebook/react-360/issues/241

【讨论】：