解决：RN和H5之间通信

React-Native 中内嵌的webview 通常是H5页面。那么就可能会遇到需要交互的地方，所以就需要进行通信！！
以下的方法是亲测有效的！
但H5给RN发送消息的时候，不能在进入页面的时候直接触发，需要写在事件里。

H5给RN发送消息：

 if(window.postMessage) {window.postMessage(JSON.stringify({type: 'login',}));
}

RN接受消息：

 public handleMessage = (e) => {try {const action = JSON.parse(e.nativeEvent.data);// 登录类型消息if (action.type === "login") {//做你的处理} catch (error) {console.log(error);}
}

RN给H5发送消息：

public sendLoginMessage() {this._webView.postMessage(JSON.stringify({//你需要传递的消息type: "login"}));}或者是：public sendLoginMessage() {this._webView.postMessage(msg);}

H5接收消息：

document.addEventListener('message', function(msg) {console.log(msg);//如果需要获取msg里面的值。需要msg.data。//当时这个坑卡了好久，因为不方便查看msg里面的东西，直接用msg.是获取不到东西的。//还有，记住使用  JSON.parse(msg.data)  才能获取到你的东西!!!
});

解决：RN和H5之间通信相关推荐

三层交换机解决不同VLAN间的通信—Vecloud微云
交换机的转发过程交换机工作于OSI参考模型的第二层,即数据链路层.交换机内部的CPU会在每个端口成功连接时,通过将MAC地址和端口对应,形成一张MAC表.交换机根据MAC地址表转发数据. 路由器的转 ...
计算机之间通信原理---CSDN观后感
一.前言计算机之间通信,主要通过网络通信的5层模型.即应用层(Application Layer) 传输层(Transport Layer) 网络层(Network Layer) 数据链路层(Da ...
企业级负载均衡集群——通过fence设备解决集群节点之间争抢资源的现象（FENCE搭建、高可用服务配置详解）
1.FENCE工具的原理及作用 FENCE设备是RHCS集群中必不可少的一个组成部分,通过FENCE设备可以避免因出现不可预知的情况而造成的"脑裂"现象 FENCE设备的出现,就是 ...
网络端口采用了1000M速率时候出现网络通信丢包+IDC机房托管服务器之间通信不畅...
网络端口采用了1000M速率时候出现网络通信丢包+IDC机房托管服务器之间通信不畅网络故障: 交换机端口1000M,网卡也是1000M,网卡配置正常.ping时候间隔丢包. 表现为网络通信丢包,并且 ...
服务器如何做中转进行端口映射，使服务器之间通信，然后访问目标网站（baidu.com)
文章目录服务器如何做中转进行端口映射,使服务器之间通信,然后访问目标网站(baidu.com) 问题缘由所需环境操作步骤 1. 目的服务器设置 2. 中间服务器设置 3. 修改客户端总结服务 ...
使用netlink机制在内核与应用程序之间通信
使用netlink机制在内核与应用程序之间通信前一段时间,在开发一个驱动程序的过程中,需要在驱动程序与应用程序之间进行通信.其中驱动程序在接收到一个硬件中断之后通知应用程序进行相应的处理.为解决此 ...
docker 容器之间通信_还不清楚docker容器间是如何通信的？看这篇文章就够了
如果觉得文章有帮助,欢迎点击头像关注我获取更多原创文章,同时也欢迎转发. 同时也可以在我的历史文章中找到Linux操作系统相关的服务器运维管理入门系列文章,欢迎交流. 前文演示docker容器内部数据 ...
工作流编程循序渐进（9：使用本地服务在宿主和工作流之间通信）
工作流编程循序渐进(9:使用本地服务在宿主和工作流之间通信) 作者朱先忠［摘要］在本篇中,首先详细分析本地服务有关概念,探讨本地服务在工作流运行时.工作流实例及工作流宿主间的地位及 ...
解决iOS微信H5支付跳转微信后不返回App问题（Swift-WKWebview）（转）
解决iOS微信H5支付跳转微信后不返回App问题(Swift-WKWebview)(转) 参考文章: (1)解决iOS微信H5支付跳转微信后不返回App问题(Swift-WKWebview)(转) ( ...
React兄弟组件之间通信
兄弟组件之间通信 React是只有单项数据流动模式,也就是只能父组件的数据传递给子组件,而没有办法将子组件的数据传递给父组件.那么如果想要两个子兄弟组件通信该怎么办呢? 答案是可以通过子组件向父组件推 ...

解决：RN和H5之间通信

解决：RN和H5之间通信相关推荐

最新文章

热门文章