ReactNative Webview加载html进度条实现

最新推荐文章于 2023-08-08 01:40:46 发布

置顶可可托海的程序猿

最新推荐文章于 2023-08-08 01:40:46 发布

阅读量1.4k

点赞数 1

分类专栏： ReactNative 文章标签： react-native-webview

本文链接：https://blog.csdn.net/qq_35324309/article/details/88655635

版权

ReactNative 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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

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

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

效果图.gif

使用方式

$ 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'
    },
});