react-native 自带的 webview 替换为 react-native-webview 遇到的问题

简单介绍下react-native-webview 替换  react-native 自带的 webview 的过程中 遇到的问题。

基于版本：

 "react-native": "0.60.6",
 "react-native-webview": "^7.4.2",

1、安装及使用方法就省略了，可以看下react-native-webview这个文档。

2、react-native-webview 与 h5 交互。

 下面写出react-native-webview 的 webview 里的主要代码： 

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

/**
 * onMessage 接收HTML5 发送给 RN Webview 的消息
 *
 */

onMessage = (event) => {
    
    let data = JSON.parse(event.nativeEvent.data);
    
    console.log("接收到的来自于html5的消息",data);
}


/**
 * RN Webview 发送消息给 HTML5 
 * data  object
 *
 * 通过调用触发该函数
 */

postMessageToH5(data){
    
   this.webView.injectJavaScript(`
       (function(){
          window.postMessage(${JSON.stringify(data)},'*');
       })();
       true;
   `)

}


class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{ uri: 'https://infinite.red' }}
        style={{ marginTop: 20 }}
        ref={webView => this.webView = webView}
        onMessage={this.onMessage}
      />
    );
  }
}

接下来写一下html5里的主要代码部分：

<script>
    /**
     * 发送消息给RN webview
     */
    function onClick() {
        let postData = {
            type: 1,
            title: "测试"
        }
        // 发送消息
        if(window.ReactNativeWebView){
            window.ReactNativeWebView.postMessage(JSON.stringify(postData))
        }
    }
    /**
     * 监听RN webview 发送到 html5 的消息   
     */
    window.onload = function(){
        window.addEventListener("message",function(msg){
            let data = JSON.stringify(msg.data);
            console.log("接收RN发送过来的消息",data);
        })
    }
    
</script>

以上就是react-native-webview 与HTML5 的交互。跟 之前版本的 react-native 里的自带的Webview 与 html5  交互略有区别。 

 

3、react-native-webview 里的 originWhitelist 属性使用，把原本的

originWhitelist={['*']}

 替换写成

originWhitelist={["https://*", "http://*", "file://*", "sms://*", "tel://*"]}

这种方式可以解决一些链接报错问题。例如net :: ERR_UNKNOWN_URL_SCHEME 的问题。