Preface

ProgressBarAndroid is a real native encapsulation of the display progress component of Android platform, which is used to display the content loading progress in App. This article is mainly familiar with the following attributes:

• Color: set the color attribute value of the progress
• indeterminate: set whether to display a default progress information. This value must be set to false when styleAttr's style is set to Horizontal
• Progress: number sets the current load progress value (between 0-1)

• styleAttr the style of the progress bar box. For example, the following values can be taken:

  • Horizontal
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse

ProgressBarAndroid

Sample code

export default class App extends Component<Props> 
{
    constructor(props) 
    {
          super(props);
          this.state = 
        {
             value:0,
              text:''
          };
    }
render() 
{
    return (
        <View>
            <ProgressBarAndroid />
            <ProgressBarAndroid animating={false}/>
            <ProgressBarAndroid color='red'/>
            <ProgressBarAndroid styleAttr={'Horizontal'}indeterminate={true} />
            <ProgressBarAndroid styleAttr={'Horizontal'}indeterminate={false}progress={0.5}/>
            <ProgressBarAndroid styleAttr={'SmallInverse'}/>

            <ProgressBarAndroid styleAttr={'Horizontal'}indeterminate={false}progress={this.state.value}/>
            <TextInput onChangeText={this.onChangeText.bind(this)} placeholder='Please enter a decimal between 0 and 1'/>
            <TouchableHighlight onPress={this.onPress.bind(this)} activeOpacity={0.5} underlayColor={'#ccc'}>
                <Text>Update progress</Text>
            </TouchableHighlight>
        </View>
    );
}
    onChangeText(text)
    {
        this.setState({text:text})
    }
    onPress()
    {
        this.setState({value:parseFloat(this.state.text)})
    }
}

Design sketch

Other

Github code