1. react-native-webview文档的地址先放在这

https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md

文档指南里面，介绍了基本RN与Web通信的基本用法，我下面总结和补充一些，关于RN 与 Web 通过 postMessage 和 onMessage 方法通信的写法

 

2. RN 与 Web 通过 postMessage 和 onMessage 方法通信的写法

web端 --> RN，web端发送时写法

 1 //web端发送信息 ，数据只能为字符串类型,
 2 window.ReactNativeWebView.postMessage("Hello!")；
 3  
 4 
 5 // 如果想传递数组类型，应该先用JSON将其序列化，代码如下
 6   let book = [
 7          {
 8             title:'zhangsan',
 9             age:12
10          }
11     ];
12 let bookText = JSON.stringify(book); 
13 
14 //postMessage方法发送字符串数据
15 window.ReactNativeWebView.postMessage(bookText)；

 

web端 --> RN，RN端接受数据的写法

 1 <WebView            
 2           onMessage={(event) => {
 3              console.log(event);
 4 
 5              //这里数据确实包裹在 nativeEvent对象里面的data属性
 6              console.log(event.nativeEvent);
 7 
 8              // 如果传过来的是JSON序列化的字符串，要转回来
 9              console.log( JSON.parse(event.nativeEvent.data) );
10          }}    
11 />

 

 

 

 

 RN--> Web端 ，RN端发送数据

1  // RN向Web传递数据，类型依旧只有字符串 或 JSON序列化的东西              
2  this.webref.postMessage('1234');

 

RN-->web端 ，Web端接收数据

1 window.onload = function(){    
2        document.addEventListener("message", function(e) {
3                 // e 指的的是MessageEvent对象
4                 alert(e); 
5 
6                // 通过可以直接拿到字符串类型数据
7                 alert(e.data);               
8        });
9 }