react-native WebVIew消息传递

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

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

类型 必填
function 否
我们直接调用postMessage会发现h5中消息不能传递给RN，这是由于版本升级，导致老的api调用的时候会出现一些问题，在github上的issue里有的说在setTimeout的回调函数中使用postMessage方法可以传递消息，但是自己亲测这样做没有作用，然后在新文档的issue中找到下面这样的一个回复，成功解决了问题

image.png

安卓端webview使用本地文件路径如下：
在。。。AwesomeProject\android\app\src\main目录下新建一个assets目录，里面存放h5代码，source中的引用路径为：file:///android_asset/h5/index.html
在ios平台上，引用本地的h5可以在项目src文件夹下建相关目录，使用require('相对路径')的方式引入
简单示例代码如下：
h5：

    
    
    
    
    
    
    


    

        发送数据到react native
        
收到react native发送的数据: 
    

RN:

import React from 'react'
import {View, Button, Text, AsyncStorage} from 'react-native'
import {WebView} from 'react-native-webview'
import {decrement, increment} from "../../store/action";
import { SwitchActions } from "react-navigation";

class HomeScreen extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            webViewData: 0
        }
        this.data = 0
    }
    sendMessage() {
        this.refs.webview.postMessage(++this.data);
    }
    handleMessage(e) {
        this.setState({webViewData: e.nativeEvent.data});
    }
    render() {
        return (
            
                 {
                    // alert(e.nativeEvent.data)
                    console.log(event.nativeEvent)
                    this.handleMessage(event)
                }}/>
                来自webview的数据 : {this.state.webViewData}
                 {
                    this.sendMessage()
                }}>发送数据到WebView
            
        )
    }
}

export default HomeScreen