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：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./build/calendar.css">
<style>
.btn{
background: #f00;color:#fff
}
</style>
</head>
<body style="background:#ddd;">
<div style="text-align: center">
<button id="button" onclick="send()">发送数据到react native</button>
<p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
</div>
</body>
<script>
var data = 0;
function send () {
data += 100;
window.ReactNativeWebView.postMessage("Hello React");
}
window.onload = function () {
document.addEventListener('message', function (e) {
document.getElementById('data').textContent = e.data;
});
}
</script>
</html>
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 (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<WebView
ref={'webview'}
source={{uri: 'file:///android_asset/h5/index.html'}}
style={{width:375, height:120, backgroundColor: '#eee'}}
onMessage={(event) => {
// alert(e.nativeEvent.data)
console.log(event.nativeEvent)
this.handleMessage(event)
}}/>
<Text>来自webview的数据 : {this.state.webViewData}</Text>
<Text onPress={() => {
this.sendMessage()
}}>发送数据到WebView</Text>
</View>
)
}
}
export default HomeScreen
