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)