ReactNative WebView加载网页实现进度条

经常看到app里面加载html都会有进度条显示，ReactNative虽然也有自己的组件WebView，但这个组件并没有返回加载进度的方法。使用WebView时还有有如下警告

10.png

意思是WebView以后也会被废弃，官方推荐我门使用 react-native-webview

使用react-native-webview加载html显示进度条，效果如下：

效果图.gif

使用组件：react-native-webview

使用方式

$ yarn add react-native-webview
$ react-native link react-native-webview

代码如下：

import React, {Component} from 'react';
import {
    StyleSheet, View, ProgressViewIOS
} from 'react-native';
import {WebView} from "react-native-webview";

export default class WebViewDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            progress: 0,
        };
    }

    render() {
        return (
            
                

                {this.state.progress !== 1 && }

                 this.setState(
                        {progress: nativeEvent.progress}
                    )}
                />
             )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    titleBar: {
        height: 64,
        backgroundColor: '#ffc0cb',
        justifyContent: 'center',
        alignItems: 'center'
    },
});