如何在 react-native webView 和 React Web 应用程序之间进行通信？

Question

i'm trying to create a communication between a webView in react-native and a web-app created with React-360 (and of course React). I'm using the react-native-webview and I follow this guide at this link to create a communication: https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md Using the example in the page, with a simple html page (like in the example in the link) with the function window.ReactNativeWebView.postMessage(data) in the script section it works good:

 <WebView
  source={{uri: this.props.link}}

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

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

My purpose, however, is to call in my web application inside the webView window.ReactNativeWebView.postMessage(data) when i click a button, for example with a function like this:

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

Unfortunately, when i click the button i got the following error: Cannot read property 'postMessage' of undefined . How can i resolve this problem? Thanks to all.

Answer 1

Can you try with timeout function like in the doc

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

Answer 2

I found myself the solution of the problem in an old issue inside React-360 repository. React-360 code cannot access to window, so it is necessary to put the code inside a native module and from there it is possible to send a message to the react-native app. Link to the issue: https://github.com/facebook/react-360/issues/241