关注我们

React Native - ProgressBarAndroid

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

ProgressBarAndroid属性

Props	Type	Required	Description
animating	bool	no	用于显示或隐藏进度条。它的默认值是true表示显示（false表示隐藏）。
color	color	no	它设置进度条的颜色。
indeterminate	indeterminateType	no	显示进度条的中间进度状态。如果进度条的styleAtte为“水平”，则只能为false。
progress	number	no	它是介于0和1之间的进度值。
styleAttr	enum	no	它设置进度条的样式。 React Native中有多种样式的进度条，例如Horizontal，Normal（默认），Small，Large，Inverse，SmallInverse和LargeInverse。
testID	string	no	它用于在端到端测试中定位此视图。

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