rn和h5之间的沟通

h5网页向react-native发消息

• 网页事件中发送消息window.postMessage('网页向rn发送的消息');

• react-native中接收消息webview实现onMessage={this.handleMessage}方法,该方法中的e.nativeEvent.data就是网页传过来的消息handleMessage(e) {console.log(e.nativeEvent.data)}

  注意这里的传至只能是string

  
  

  react-native网页向h5发消息

• 首先webview绑定ref={webview => this.webview = webview}

• 自定义一个点击事件，点击时执行this.webview.postMessage('rn向网页发送的消息');

• 网页加在时进行监听e.data就为rn发送过来的消息

• window.onload = function() {        document.addEventListener('message', function(e) {     
              console.log(e.data)       
      });

• 遇到的一个小问题Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined.

  
  

• 使用injectedJavaScript方法在webview加在前注入一段JS代码patchPostMessageJsCode

• const patchPostMessageFunction = function() {    var originalPostMessage = window.postMessage;    var patchedPostMessage = function(message, targetOrigin, transfer) {
          originalPostMessage(message, targetOrigin, transfer);
      };
  
      patchedPostMessage.toString = function() {        return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
      };    window.postMessage = patchedPostMessage;
  };const patchPostMessageJsCode = '(' + String(patchPostMessageFunction) + ')();';

• 在webview加载时注入<WebView injectedJavaScript={patchPostMessageJsCode}/>就可以解决这个问题

原文章

• www.jianshu.com/p/b1864461a…
  

总结 

• RN 0.6版本的webview已经单独移出去了。可以去看下react-native-webview插件（github.com/react-nativ…）