由于目前需要在RN开发的webview中引用vue单页应用，但是需要一些交互（比如进入vue单页之后，此时就是完全进入Vue的路由体系中，要返回到RN的界面中就需要与RN进行通信）

整理大纲

• 整理大纲
• 安装环境依赖
• 使用方法
  • React Native端
  • Web端

安装环境依赖

1. 需要用到RN‘s webview 与页面通信的插件 react-native-webview-invoke
   具体原理看这里：关于 React Native 与 WebView 的通信
2. RN版本：React Native >= 0.37
3. 安装依赖包

$ npm install react-native-webview-invoke --save

使用方法

⭐️两端使用的方法是需要双方约定的。

1. 在RN组件引入react-native-webview-invoke包

React Native端

import React from 'react';
import { WebView } from 'react-native'
import createInvoke from 'react-native-webview-invoke/native'

export default class 你的组件 extends React.Component {
  webview = WebView;
  invoke = createInvoke(() => this.webview);
  /**
   * RN暴露接口，供 webview 页面调用
   */
  goBackRN = () => {
    this.props.navigator.pop()
  };
  /**
   * 设置返回给页面端的参数，可以接受数组
   */
  webGetParam = () => {
    let channel = ['rn'];
    let prjCd = this.props.prjCd;
    let token = this.props.token;
    // 返回结果数组[访问来源标志，项目编号，token]
    return {channel, prjCd, token}
  };

  componentDidMount() {
    this.invoke.define('goBackRN', this.goBackRN)
    this.invoke.define('getParams', this.webGetParam)
  }

  render() {
    return (
      <WebView ref={w => this.webview = w}
               source={{uri: 'http://localhost:8080'}}
               onMessage={this.invoke.listener}
      />
    );
  }
}

Web端

这里有点需要注意的是，我的web页面是使用vue开发的，直接 npm install 包是没法使用的。
所以只能在页面标签引入js：
1. 需要引入
<script src="https://tb1.bdstatic.com/tb/libs/rnwi-browser.js"></script>
2. 在根组件<script>中编写调用代码：

<script>
     // 在vue组件 created 时，与RN通信获取RN传递参数
     let invoke = window.WebViewInvoke
     let getParams = invoke.bind('getParams')
     // 获取RN传递参数
     getParams().then((data) => {
       this.prjCd = data.prjCd[0]
       this.token = data.token[0]
       this.channel = data.channel[0]
     })
    
    ...
    
     // 获取全局对象，与RN通信，调用返回RN的方法
     let invoke = window.WebViewInvoke
     // 已经回到根目录，如果在RN中打开，返回RN界面
     let goBackRN = invoke.bind('goBackRN')
     goBackRN().then(function () {
       console.log('go back to RN')
     })
</script>

以上就是RN与页面通信插件的使用示例。如果还有疑问可查阅插件文档，文档地址开头已给出。