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字符串

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

    
    
    
    


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