html5 view控件,ReactNative控件之WebView与Html5之间的交互

本文章是以本地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字符串

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代码如下

text webview

//相互通信只能传递字符串类型

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);

})

body{

margin:0;

padding:0;

background: #ccc;

}

h1{

padding:45px;

margin:0;

text-align: center;

color:#0000ff;

}

wuyunqiang

单击

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));