RNWebview詳解

一、介紹

RNWebview是React Native框架中內置的可以呈現網頁內容的組件，基於iOS UIWebView和Android WebView實現，支持一些基礎的屬性和方法，開發者可以通過RNWebview在React Native應用展示各類Web頁面。

二、使用方法

在React Native項目中使用RNWebview，需要先進行組件的引入。在代碼中導入一下語句：

{
   import { WebView } from 'react-native-webview';
}

使用Webview組件需要用該組件包裹在View容器內，然後將Webview組件中URL參數，就可以將頁面顯示出來，下面是一個簡單的例子：

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

    class MyWeb extends Component {
      render() {
        return (
          
            
          
        );
      }
    }
}

三、常見屬性參數

WebView組件支持許多屬性，下面列出一些常見的屬性參數：

1、source

定義要加載的網頁的URL地址或html文本內容。源可以是字符串，也可以是包含HTML代碼的對象，也可以是一個包含uri屬性的對象。下面是不同類型的源：

{
    source={{ uri: 'https://www.baidu.com' }}
    source={{ html: '
Hello world
' }}
    source={{ uri: 'file:///sdcard/some-local-file.html' }}
}

2、onLoad

在組件渲染時會觸發onLoad回調函數，傳遞事件對象event、document.readyState、uri三個參數。該事件只觸發一次,當所有的幀被加載完畢時，才會被觸發回調函數，下面是一個例子：

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

    export default class ExampleApp extends Component {
        onLoad(event) {
            console.log(event.nativeEvent)
        }

        render() {
            return (
              
            )
        }
    }
}

3、onMessage

在Webview中通過JavaScript的postMessage方法可以向RN發送消息。可以在組件中使用onMessage回調函數捕獲這些事件，並取得傳進的數據，下面是一個例子：

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

    export default class ExampleApp extends Component {

        onMessage(event) {
            console.log(event.nativeEvent.data)
        }

        render() {
            return (
              
            )
        }
    }
}

四、常見方法

除了屬性參數，WebView組件還支持一些方法，下面是一些常見的方法示例：

1、網頁加載方法

通過ref屬性獲取組件引用，然後調用navigate方法實現URL的跳轉。下面是一個例子：

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

    export default class ExampleApp extends Component {
        webview = null;

        runScript(){
            if (this.webview){
              this.webview.injectJavaScript('alert("This is Alert show!");')
            }
        }

        render() {
            return (
              
                 {
                    this.runScript();
                  }}
                />
                 {
                    this.webview = ref;
                  }}
                  source={{ uri: 'https://www.baidu.com' }}
                  onLoad={this.onLoad.bind(this)}
                  onMessage={this.onMessage.bind(this)}
                />
              
            );
        }
    }
}

2、網頁注入JS方法

通過ref屬性獲取組件引用，然後調用injectJavaScript方法可以注入JS腳本到網頁中。下面是一個例子：

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

    export default class ExampleApp extends Component {
        webview = null;

        runScript(){
            if (this.webview){
              this.webview.injectJavaScript('alert("This is Alert show!");')
            }
        }

        render() {
            return (
              
                 {
                    this.runScript();
                  }}
                />
                 {
                    this.webview = ref;
                  }}
                  source={{ uri: 'https://www.baidu.com' }}
                  onLoad={this.onLoad.bind(this)}
                  onMessage={this.onMessage.bind(this)}
                />
              
            );
        }
    }
}

3、網頁後退方法

通過ref屬性獲取組件引用，然後調用goBack方法實現網頁後退操作。下面是一個例子：

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

    export default class ExampleApp extends Component {
        webview = null;

        goBack(){
            if (this.webview){
              this.webview.goBack()
            }
        }

        render() {
            return (
              
                 {
                    this.goBack();
                  }}
                />
                 {
                    this.webview = ref;
                  }}
                  source={{ uri: 'https://www.baidu.com' }}
                  onLoad={this.onLoad.bind(this)}
                  onMessage={this.onMessage.bind(this)}
                />
              
            );
        }
    }
}

五、總結

本文從介紹，使用方法，常見屬性參數，常見方法四個方面詳細闡述了RNWebview的使用，綜合各個方面的內容，我們可以在React Native應用中快速、輕鬆地展示各類web頁面內容，大大提高了React Native開發效率。