ReactNative之WebView和H5交互(一)

前言

上一篇主要说明了ReactNative中的WebView的基本用法,本文则侧重于和H5的交互。

H5调用ReactNative的方法

H5调用ReactNative的方法需要用到WebView的一个属性方法onMessage,也就是在ReactNative和H5的交互是通过消息来实现的。

onMessage:在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数,从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注

前言

上一篇主要说明了ReactNative中的WebView的基本用法,本文则侧重于和H5的交互。

H5调用ReactNative的方法

H5调用ReactNative的方法需要用到WebView的一个属性方法onMessage,也就是在ReactNative和H5的交互是通过消息来实现的。

onMessage:在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数,从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。

网页端的window.postMessage只发送一个参数data,此参数封装在RN端的event对象中,即event.nativeEvent.data。data 只能是一个字符串。

样例:加载一个点击按钮拨打电话的网页,调用原生的方法实现拨打电话.

页面的源代码如下:

通过上面的页面代码可以看到在call方法中我发送了一个消息这个消息携带了一个Json字符串,这个字符串有两个字段,一个字段是type,另一个字段是电话号码。

接着把这个html加载在ReactNative的WebView上。并且需要通过onMessage接收html传递的消息。

在WebView中是用onMessage属性来接收html5发送的消息.并且考虑到h5调用 ReactNative的方法的时候要发很多消息,所以添加了type字段来区分.

在ReactNative接收到消息之后需要调用拨打电话的功能,拨打电话需要调用 Android的原生方法,需要在ReactNative和Android之间搭桥调用.由于不是此篇重点代码截图如下:

[项目的GitHub地址](https://github.com/zhaozihaoandroid/webApp)

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180424G1P5AN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励