React-native WebView通信坑 2019-08-08

1.父级向子级发布数据：

       a.设置结点 ref='webView'；

       b.发布信息： onLoadEnd={() => { this.refs.webView.postMessage('RN向H5发送的消息'); }}

2.子级接收数据：

       a.首先想到监听方法与h5的生命周期；

       b.其次监听订阅：window.onload = function() {
                document.addEventListener('message', function(msg) {
                    alert(msg.data)
                })
            }

3.子级向父级发布数据：

    a.window.postMessage(web不同文件间通信技术)；

    b.react-native webView从react-native中独立追加了ReactNativeWebView方法

    c.向父级发布消息为：window.ReactNativeWebView.postMessage('向rn发布信息');

4.父级接收信息：onMessage={(e)=>{ console.log(e.nativeEvent) }}，onMessage监听子级信息发布；

5.结果