Briefly introduce the problems encountered in the process of replacing react-native-webview with the webview that comes with react-native.

Based on version:

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

1. Installation and use methods are omitted, you can seereact-native-webviewThis document.

2. React-native-webview interacts with h5.

Write the main code in react-native-webview webview below:

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

/**
   * onMessage receives HTML5 messages sent to RN Webview
 *
 */

onMessage = (event) => {
    
    let data = JSON.parse(event.nativeEvent.data);
    
         console.log ("Received message from html5", data);
}


/**
   * RN Webview sends a message to HTML5 
 * data  object
 *
   * Trigger the function by calling
 */

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

Next, write the main code part in HTML5:

<script>
    /**
     * Send message to RN webview
     */
    function onClick() {
        let postData = {
            type: 1,
                         title: "Test"
        }
                 // Send a message 
        if(window.ReactNativeWebView){
            window.ReactNativeWebView.postMessage(JSON.stringify(postData))
        }
    }
    /**
           * Monitor messages sent by RN webview to html5   
     */
    window.onload = function(){
        window.addEventListener("message",function(msg){
            let data = JSON.stringify(msg.data);
                         console.log ("Receive messages from RN", data);
        })
    }
    
</script>

The above is the interaction of react-native-webview and HTML5. It is slightly different from the interaction between the Webview and html5 in the previous version of react-native. A

3. The originWhitelist attribute in react-native-webview is used to put the original

originWhitelist={['*']}

Replace with

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

This method can solve some link errors. For example, the problem of net :: ERR_UNKNOWN_URL_SCHEME.