React Native学习笔记-ProgressBarAndroid

ProgressBarAndroid的例子

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  ProgressBarAndroid,
} from 'react-native';

class RnDemo extends Component {
  render() {
    return (
      
        

      

    );
  }
}

注意要引入组件

属性方法

• color 设置进度的颜色属性值

• indeterminate 设置是否要显示一个默认的进度信息，该如果styleAttr的风格设置成Horizontal的时候该值必须设置成false

• .progress 置当前的加载进度值(该值在0-1之间)

• styleAttr 进度条框的风格 ，可以取的值如下:

    Horizontal
    Small
    Large
    Inverse
    SmallInverse
    LargeInverse
  

综合实例

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

class RnDemo extends Component {
  render() {
    return (
      
        
          ProgressBarAndroid控件实例
        
        //红色圆形的进度条
        
        //绿色的水平进度条，有默认值
        
        //绿色的水平进度条，没有默认值
        
        //大小
        
        

      

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,  //定义了flex属性标示当前的属性的可伸缩的
    backgroundColor: '#efefef',
  },
  style_bottom: {
    flex: 1,
    flexDirection: 'row',//代表一行
    alignItems: 'flex-end',//在底部
    bottom: 10,//距离底部10
  },
  style_longin: {
    marginTop: 15,
    marginLeft: 10,
    marginRight: 10,
    backgroundColor: '#63B8FF',
    height: 35,
    borderRadius: 5,
    alignItems: 'center',//内部控件居中
    justifyContent: 'center',//子控件位于父容器的居中
  },
  style_userinput: {
    marginTop: 10,
    backgroundColor: '#FFFFFF',
    height: 35,
    textAlign: "center"
  },
  style_image: {
    borderRadius: 35,
    height: 70,
    width: 70,
    marginTop: 40,
    alignSelf: 'center',
  },
  style_view_unlogin: {
    fontSize: 12,
    color: '#63B8FF',
    marginLeft: 10,
  },
  style_view_register: {
    fontSize: 12,
    color: '#63B8FF',
    marginRight: 10,
    alignItems: 'flex-end',
    flex: 1,
    textAlign: 'right',//文字靠右
  }

});
AppRegistry.registerComponent('RnDemo', () => RnDemo);