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

10.png

使用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<Props> {
    constructor(props) {
        super(props);
        this.state = {
            progress: 0,
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.titleBar}/>

                {this.state.progress !== 1 && <ProgressViewIOS
                    //这是进度条颜色
                    progressTintColor="red"
                    progress={this.state.progress}/>}

                <WebView
                    source={{uri: 'https://www.jianshu.com/u/df38c1b1414a'}}
                    //设置进度 progress值为0～1
                    onLoadProgress={({nativeEvent}) => this.setState(
                        {progress: nativeEvent.progress}
                    )}
                />
            </View> )
    }
}

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