本文章是以本地html文件写的demo测试,并单独针对RN版本0.59.5乱码问题做了处理（其他版本暂时没有发现需要解码的情况）,如若其他RN版本如果碰到此类编码解码问题也可以试一下。
1、在页面顶部引入webview组件
import {
WebView,
StyleSheet,
View,
Keyboard,
Linking,
Dimensions
} from 'react-native';
2、引入组件之后，在页面中使用webview引入h5的页面，
_handleMessage方法即收到消息的处理方法，消息传递需要传递字符串，不能是JSON对象，可以将JSON对象转成JSON字符串
<WebView
source={require('./test.html')}
onLoad = {() => {console.log('webview onLoad')}}
onLoadEnd = {this._onLoadEnd.bind(this)}
onMessage={this._handleMessage.bind(this)}
javaScriptEnabled={true}
ref={webview => this.webview = webview}
renderError={(e) => {
if (e) {
return;
}
}}
/>
其中test.html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text webview</title>
<script>
//相互通信只能传递字符串类型
function clicktorn() { //发送消息到rn
const str = JSON.stringify({"url":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=62323807,2967078190&fm=26&gp=0.jpg","type":"frends"});
alert(str)
window.postMessage(str);
}
window.document.addEventListener('message', function(e) {//注册事件 接收数据
const message = e.data;//字符串类型
console.log('WebView message:',message);
// alert(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>
3.当html发消息时候，我们做相关的解析工作，这里按照发的是jsonString的格式做解析，如果单纯是个"test"这种字符串，那就直接用就可以了不需要特别解析。
看打印的相关信息，用到了解码的操作，那是因为在以前的旧版本联调的时候并没有发现需要做解码，但是在RN0.59.5版本下，从Html发送过来的字符串，需要做两次解码才可以，具体原因我并没有做深入了解，只是做了对数据的处理。如果有了解的小伙伴可以告诉我，谢谢！
_handleMessage(e) {
console.log("未解码" + e.nativeEvent.data)
let firstStr = decodeURIComponent(e.nativeEvent.data)
console.log("第一次解码" + firstStr)
let secStr = decodeURIComponent(firstStr)
console.log("第二次解码" + secStr)
let message = secStr;
try {
if (typeof JSON.parse(message) == "object") {
let webMessage = JSON.parse(message);
//webMessage即为真正的JSON对象
}
} catch(e) {
console.log('网页发送的信息不是json对象',message)
}
}
正常不需要解码的版本如下：
_handleMessage(e) {
let message = e.nativeEvent.data;
try {
if (typeof JSON.parse(message) == "object") {
let webMessage = JSON.parse(message);
//webMessage即为真正的JSON对象
}
} catch(e) {
console.log('网页发送的信息不是json对象',message)
}
}
4.webview向h5发消息，代码如下：
let data = {"type":"friends"};
this.webview.postMessage(JSON.stringify(data));
网友评论