RNWebview详解

Hello world

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开发效率。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com