之前写过一篇封装原生webview的文章，
rn封装原生jsbridge与H5交互
但是那只是android端的，不能应用iOS端，随着rn的发展，rn提供的webview也可以满足我们的开发需求，而且android&&ios 都可以统一处理，所以还是建议大家使用原生提供的组件，这里做简单的rn webview与H5相互通信的例子。
例子：
iosrnapp.gif
androidgif.gif
rn端：
//接收来自H5的消息
onMessage = (e)=>{
Log('WebView onMessage 收到H5参数：',e.nativeEvent.data);
let params = e.nativeEvent.data;
params = JSON.parse(params);
Log('WebView onMessage 收到H5参数 json后：',params);
};
onLoadEnd =(e)=>{
Log('WebView onLoadEnd e：',e.nativeEvent);
let data = {
source:'from rn',
};
this.web&&this.web.postMessage(JSON.stringify(data));//发送消息到H5
};
<WebView
ref={(webview) => {
this.web = webview
}}
style={{width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center'}}
source={require('../data/testwebview.html')}
onLoadEnd={this.onLoadEnd}//加载成功或者失败都会回调
onMessage={this.onMessage}
javaScriptEnabled={true}//指定WebView中是否启用JavaScript
startInLoadingState={true} //强制WebView在第一次加载时先显示loading视图
renderError={(e) => {
return <View/>;
}}
/>
H5端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text webview</title>
<script type="application/javascript">
//相互通信只能传递字符串类型
function clicktorn() { //发送消息到rn
let params = {
msg:'h5 to rn',
source:'H5',
};
window.postMessage(JSON.stringify(params));//发送消息到rn
}
window.document.addEventListener('message', function(e) {//注册事件 接收数据
const message = e.data;//字符串类型
console.log('WebView message:',message);
window.postMessage(message);
})
</script>
<style type="text/css">
body{
margin:0;
padding:0;
background: #ccc;
}
h1{
padding:45px;
margin:0;
text-align: center;
color:#0000ff;
}
</style>
</head>
<body>
<h1>wuyunqiang</h1>
<button onclick=clicktorn()>单击</button>
</body>
</html>
网友评论