使用react-native-webview实现RN和H5中iframe的通信

先说说业务场景，在A.html中使用iframe引入了B.html,现在需要在APP中使用webview引入A.html,并且在点击B.html页面的某一处与RN进行通信。查看react-native-webview的RN和web页面的通信，通信时官方文档和插件是有区别的。

html向RN发送信息：

window.ReactNativeWebView.postMessage(msg)

---

RN向H5发信息

const run = ` true;`;

setTimeout(() => {

this.webview.injectJavaScript(run);//RN通过向H5页面添加js的方法向H5页面传递信息

}, 3000);

return(

      source={{uri: 'http://192.168.21.123:88/'}}

      style={{marginTop: 20}}

      javaScriptEnabled={true}

     startInLoadingState={true}

     ref={(webview) => { this.webview = webview; }}

     onMessage={(event) => {

       alert(event.nativeEvent.data)

      }) }}

       onLoadEnd={() => {

        this.webview.postMessage('RN向H5发送的消息');

  }} />）

但是我们的业务场景是点击在A.html中的B.html进行通信，这个时候就要在A和B两个页面通信；

A.html:

我就是一个栗子

---

B.html

点我发送消息