React Native 的 WebView 和 H5 相互发送监听消息

方式一：postMessage

• 这种方式适用于React Native自身的WebView组件，但在版本0.59时会提示WebView将被弃用

RN端向H5发送消息

• RN端

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

• H5端

  // 这个监听的名字只能叫message
  window.onload = function() {
      document.addEventListener('message', function(msg) {
          console.log(msg);
      });
  }
  

H5向RN发送消息

• H5端

  // H5发送消息，此时只能传递string类型
  window.postMessage('网页向rn发送的消息');
  

• RN端

  // 给WebView添加 onMessage 属性（属性方法）
  onMessage={(event) => {console.log(event.nativeEvent.data);}}
  

使用injectJavaScript向H5注入js代码

• 这种方式适用于 react-native-webview

RN端向H5发送消息

• RN端
• 首先Webview绑定 ref='webView'
• 在H5调用一个名为 receiveMessage 的函数，并传入一个字符串, 参数true不可少

  endLoad(){            //加载结束调用，不管是成功还是失败。     
      // 在H5调用一个名为 receiveMessage 的函数，并传入一个字符串,  参数true不可少        
      this.refs.webView.injectJavaScript(`receiveMessage("RN向H5发送消息");true;`)
  }
  

• H5端

  mounted(){ 
  	//在window上挂载一个receiveMessage方法，RN会调用
      window.receiveMessage = (msg) => {            
          alert( msg)
      }
  },
  

H5向RN发送消息

• H5端

  selectRange(){            
       window.ReactNativeWebView.postMessage("Hello!H5向RN方式数据")            
  },
  

• RN端

  // 给WebView添加 onMessage 属性（属性方法）
  <WebView  ref='webView' style={{flex:1}} bounces={false} onLoadEnd={() => {this.endLoad()}}
      onMessage={(e)=>{
            this.skipSelectOrgn(e)
      }}
      source={{ uri: `http://localhost:8080/#/taskPublish` }} 
  />
  
  // 实现skipSelectOrgn方法
  skipSelectOrgn(e){
      console.log('========e',e.nativeEvent.data)
  
      //可以做其他RN的其他操作，如跳转页面....
  
      // 得到新的数据，并发送给H5
      this.refs.webView.injectJavaScript(`receiveMessage("RN向H5传递新的数据");true;`)
              
  }