标签：postMessage web 文本编辑 Web -- react JSON RN

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 }  

标签：postMessage,web,文本编辑,Web,--,react,JSON,RN
来源： https://www.cnblogs.com/tengyuxin/p/13340021.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。