1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 */ 5 'use strict'; 6 import React, { 7 AppRegistry, 8 Component, 9 StyleSheet, 10 Text, 11 View, 12 ProgressBarAndroid 13 } from 'react-native'; 14 15 class MyProject2 extends Component { 16 render() { 17 return ( 18 <View> 19 <Text> 20 ProgressBarAndroid控件实例 21 </Text> 22 <ProgressBarAndroid color="red" styleAttr="Inverse"/> 23 <ProgressBarAndroid color="green" styleAttr="Horizontal" progress={0.2} 24 indeterminate={false} style={{marginTop:10}}/> 25 <ProgressBarAndroid color="green" styleAttr="Horizontal" 26 indeterminate={true} style={{marginTop:10}}/> 27 <ProgressBarAndroid color="black" styleAttr="SmallInverse" 28 style={{marginTop:10}}/> 29 <ProgressBarAndroid styleAttr="LargeInverse" style={{marginTop:10}}/> 30 </View> 31 ); 32 } 33 } 34 AppRegistry.registerComponent('MyProject2', () => MyProject2);
一.ProgressBarAndroid
1.该组件是React封装了Android平台的ProgressBar控件,用于显示APP中的内容加载过程中的进度信息
2.属性:
(1)支持View控件的属性方法(这些属性是从View控件中继承下来,例如:大小,布局,边距)
(2)color:设置进度条的颜色属性
(3)indeterminate:设置是否要显示一个默认的进度信息,如果styleAttr风格设置成Horizontal的时候改值必须设置成false
(4)progress(number):设置当前的加载进度值(该值在0-1之间)
(5)styleAttr:进度条框的风格,可以取值如下:
Horizontal
Small
Large
Inverse
SmallInverse
LargeInverse