Hello world

2、onLoad

在組件渲染時(shí)會(huì)觸發(fā)onLoad回調(diào)函數(shù)，傳遞事件對(duì)象event、document.readyState、uri三個(gè)參數(shù)。該事件只觸發(fā)一次,當(dāng)所有的幀被加載完畢時(shí)，才會(huì)被觸發(fā)回調(diào)函數(shù)，下面是一個(gè)例子：

{
    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中通過(guò)JavaScript的postMessage方法可以向RN發(fā)送消息。可以在組件中使用onMessage回調(diào)函數(shù)捕獲這些事件，并取得傳進(jìn)的數(shù)據(jù)，下面是一個(gè)例子：

{
    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 (
              
            )
        }
    }
}

四、常見(jiàn)方法

除了屬性參數(shù)，WebView組件還支持一些方法，下面是一些常見(jiàn)的方法示例：

1、網(wǎng)頁(yè)加載方法

通過(guò)ref屬性獲取組件引用，然后調(diào)用navigate方法實(shí)現(xiàn)URL的跳轉(zhuǎn)。下面是一個(gè)例子：

{
    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、網(wǎng)頁(yè)注入JS方法

通過(guò)ref屬性獲取組件引用，然后調(diào)用injectJavaScript方法可以注入JS腳本到網(wǎng)頁(yè)中。下面是一個(gè)例子：

{
    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、網(wǎng)頁(yè)后退方法

通過(guò)ref屬性獲取組件引用，然后調(diào)用goBack方法實(shí)現(xiàn)網(wǎng)頁(yè)后退操作。下面是一個(gè)例子：

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

五、總結(jié)

本文從介紹，使用方法，常見(jiàn)屬性參數(shù)，常見(jiàn)方法四個(gè)方面詳細(xì)闡述了RNWebview的使用，綜合各個(gè)方面的內(nèi)容，我們可以在React Native應(yīng)用中快速、輕松地展示各類web頁(yè)面內(nèi)容，大大提高了React Native開(kāi)發(fā)效率。