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 }