<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<h1 id="h1"></h1>
<h1 id="h2"></h1>
84638756484576387546
84638756484576387546
84638756484576387546
84638756484576387546
</div>
</body>
<script>
//========监听webview传递过来的数据
window.document.addEventListener('message', function (textValue) {
let data = textValue.data;
//alert(data.split(',')[0])
document.getElementById('h1').innerHTML = data.split(',')[0];
document.getElementById('h2').innerHTML = data.split(',')[1];
})
//========给webview发送事件
document.getElementById('h2').onclick= function(){
let name = 'a';
let name1 = 'b';
window.postMessage([name,name1]);
}
</script>
</html>
<WebView bounces={false}
ref="webViewRef"
scalesPageToFit={true}
source={aa}
onMessage={(event) => { //监听html发送过来的数据
const message = event.nativeEvent.data;
alert(message.split(',')[0])
} }
style={{width:300, height:40}}>
</WebView>
componentDidMount() {
//给html发送事件
let a = 'dong',b='tao'
this.refs.webViewRef.postMessage([a,b]);
}
当WebView加载html时我们可以实现html和rn之间的通信。rn向html发生数据可以通过postMessage函数实现。如下
this.webview.postMessage('"Hello" 我是RN发送过来的数据');
//在html中注册事件接收rn发过来的数据并显示在html中
document.addEventListener('message', function(e) {
messagesReceivedFromReactNative += 1;
document.getElementsByTagName('p')[0].innerHTML =
'从React Native接收的消息: ' + messagesReceivedFromReactNative;
document.getElementsByTagName('p')[1].innerHTML = e.data;
});
在html中我们定义了一个按钮，并添加事件向rn发送数据
//window.postMessage向rn发送数据
document.getElementsByTagName('button')[0].addEventListener('click', function() {
window.postMessage('这是html发送到RN的消息');
});
