React Native Android 独有组件之 Progr

封装了Android平台上的ProgressBar的React组件。这个组件可以用来表示应用正在加载或者有些事情正在进行中。

属性

名称	类型	必填	说明
animating	bool	否	是否显示进度条
color	string	否	进度条的颜色
indeterminate	indeterminateType	否	决定进度条是否要显示一个不确定的进度。注意这个在styleAttr是Horizontal的时候必须是false。
progress	number	否	当前的进度值（在0到1之间）。
styleAttr	enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')	否	进度条的样式

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  ProgressBarAndroid,
  View,
  Text
} from 'react-native';

export default class App extends Component {
  
  render() {
    
    return (
    
        <View style={styles.container}>
            <View style={styles.title_view}>
            <Text style={styles.title_text}>
                ProgressBarAndroid
            </Text>
        </View>
        <View style={styles.inner}>
        <ProgressBarAndroid  color="red" styleAttr='Horizontal'
            indeterminate={true}/>
        <ProgressBarAndroid  color="red" styleAttr='Horizontal' progress={0.6} 
            indeterminate={false} style={{marginTop:15}}/>
        <ProgressBarAndroid  color="black" styleAttr='SmallInverse'
            style={{marginTop:15}}/>
        <ProgressBarAndroid  color="blue" styleAttr='Inverse'style={{marginTop:15}}/>
        <ProgressBarAndroid  styleAttr='LargeInverse'
            style={{ marginTop: 15 }} />
          
        </View>

        </View>
    )
  }

  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'white'
  },

  inner: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
    title_view: {
      flexDirection: 'row',
      height: 50,
      paddingLeft: 15,
      paddingRight: 15,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#27b5ee',
    },
    title_text: {
      color: 'white',
      fontSize: 18,
      textAlign: 'center'
  },
 
});

2. 效果图

progress.jpg