React Native ProgressBarAndroid

17 Mar 2025 | 阅读 2 分钟

React Native 的 ProgressBarAndroid 组件用于指示某些活动或应用程序正在加载的进度状态。ProgressBarAndroid 组件仅在 Android 平台上有效。要在 iOS 平台上使用进度条，可以使用 ProgressViewIOS 组件。

ProgressBarAndroid 的 Props

Props	类型	必需	描述
animating	bool	否	用于显示或隐藏进度条。其默认值为 true（显示），false（隐藏）。
color	color	否	设置进度条的颜色。
indeterminate	indeterminateType	否	显示进度条的中间进度状态。只有当进度条的 styleAtte 为 Horizontal 时，它才能为 false。
progress	数字	否	介于 0 和 1 之间的进度值。
styleAttr	enum	否	设置进度条的样式。React Native 中有多种进度条样式，例如 Horizontal、Normal（默认）、Small、Large、Inverse、SmallInverse 和 LargeInverse。
testID	string	否	用于在端到端测试中定位此视图。

React Native ProgressBarAndroid 示例

在此示例中，我们将实现水平 ProgressBarAndroid 并在 TouchableOpacity 组件上执行操作。进度状态将仅在 Text 组件中显示最多 3 位数字。

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, TouchableOpacity, ProgressBarAndroid, ProgressViewIOS } from 'react-native';
export default class MyApp extends Component<{}>{
  constructor()  {
    super();
    this.state = {
      progressStatus: 0,
    }
  }

  start_Progress = () => {
    this.value = setInterval( () => {
      if(this.state.progressStatus <= 1){
        this.setState({progressStatus: this.state.progressStatus+ .01})
      }
    }, 100 );
  }

  stop_Progress = () =>{
   clearInterval(this.value);
  }

  clear_Progress =()=>{
    this.setState({progressStatus : 0.0})
  }

  render()
  {
    return(
      <View style = { styles.MainContainer }>
        <Text style = {{fontSize: 20, color: '#000'}}> Progress Value: { parseFloat((this.state.progressStatus * 100).toFixed(3))} %</Text>{
            ( Platform.OS === 'android' )
            ?
              ( <ProgressBarAndroid styleAttr = "Horizontal" progress = { this.state.progressStatus } indeterminate = { false } /> )
            :
              ( <ProgressViewIOS progress = { this.state.progressStatus } /> )
        }
        <TouchableOpacity activeOpacity = { 1 } style = { styles.button } onPress = { this.start_Progress }>
          <Text style = { styles.TextStyle }> Start Progress </Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity = { 1 } style = { styles.button } onPress = { this.stop_Progress }>
          <Text style = { styles.TextStyle }> Stop Progress </Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity = { 1 } style = { styles.button } onPress = { this.clear_Progress }>
          <Text style = { styles.TextStyle }> Reset Progress </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create(
{
  MainContainer:
  {
    flex: 1,
    justifyContent: 'center',
    paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0,
    margin: 20
  },

  button: {
  width: '100%',
  backgroundColor: '#00BCD4',
  borderRadius:5,
  padding: 10,
  marginTop: 10,

},

TextStyle:{
    color:'#fff',
    textAlign:'center',
    fontWeight: 'bold',
}
});

输出