react native ProgressBarAndroid 使用详解

最新推荐文章于 2024-08-21 08:43:54 发布

原创最新推荐文章于 2024-08-21 08:43:54 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #native #Progress

react native 学习之旅专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一个React Native应用程序中使用ProgressBarAndroid组件的方法。该应用通过不同的样式属性展示了多种类型的进度条，并实现了进度随时间自动更新的功能。此外，还提供了更改进度条颜色的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ProgressBarAndroid：android进度条

View props：可以使用View的所有属性
color：进度条颜色
indeterminate：是否要显示一个不确定的进度
progress：当前的进度值（在0到1之间）。
styleAttr：进度条的样式 Horizontal、Small、Large、Inverse、SmallInverse、LargeInverse

/**
 * Created by on 2017/5/17.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    ProgressBarAndroid,
    Text,
    Button,
} from 'react-native';

export default class ProgressBarAndroidDemo extends Component {
    static navigationOptions = {
        title: 'ProgressBarAndroid',
    };

    componentDidMount() {
        setInterval(() => {
            if (this.state.progress >= 1) {
                this.setState({progress: 0})
            } else {
                this.setState({progress: this.state.progress + 0.1})
            }

        }, 500)
    }

    state = {
        color: 'red',
        indeterminate: true,
        progress: 0,
        styleAttr: 'Large',
    }

    render() {
        return (
            <View style={{flex:1}}>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                    <Text>设置color：</Text>
                    <Button title='red' onPress={()=>{this.setState({color:'red'})}}/>
                    <Button title='blue' onPress={()=>{this.setState({color:'blue'})}}/>
                </View>

                <ProgressBarAndroid
                    indeterminate={false}
                    color={this.state.color}
                    progress={this.state.progress}
                    styleAttr='Horizontal'/>


                <View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>
                    <Text>Horizontal</Text>
                    <ProgressBarAndroid
                        styleAttr='Horizontal'/>

                </View>

                <View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>
                    <Text>Small</Text>
                    <ProgressBarAndroid
                        styleAttr='Small'/>

                </View>

                <View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>
                    <Text>Large</Text>
                    <ProgressBarAndroid
                        styleAttr='Large'/>

                </View>

                <View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>
                    <Text>Inverse</Text>
                    <ProgressBarAndroid
                        styleAttr='Inverse'/>

                </View>

                <View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>
                    <Text>SmallInverse</Text>
                    <ProgressBarAndroid
                        styleAttr='SmallInverse'/>

                </View>

                <View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>
                    <Text>LargeInverse</Text>
                    <ProgressBarAndroid
                        styleAttr='LargeInverse'/>

                </View>
            </View>
        );
    }
}