react-native中RN和webview双向通信

目前的RN项目需用到分享功能,于是在app中需要分享的页面写了webview,写是写完了,但是要如何传值呢?

目前遇到的需求是,在Webview中点击某个人的简介要调到对应的RN中的这个人的主页,相当于要传这个人的id到RN中。

在RN中某个需要用到Webview的页面,webview是相当于这个页面的一个组件:

1、在Webview组件里用到onNavigationStateChange这个属性,发送信息到网页中,才能后续的网页返回参数到RN中。

2、网页收到信息如下:


并在网页a标签点击的时候,执行window.postMessage("这里是需要传到RN中的参数")。

3、在Webview组件中onMessage属性可以接受从网页端传来的参数,后面就可以为所欲为啦!!

4、执行导航跳转,和正常的RN中一个样了(目前后台接口还没给齐,所以我没带参数跳转....)。

下图是所有的四步的源代码:



猜你喜欢

转载自blog.csdn.net/weixin_39558785/article/details/80263773