RN控件之ProgressBarAndroid进度条 

 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);
View Code

 

一.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

 

posted @ 2016-03-18 14:45  我想我是海~~  阅读(2154)  评论(0)  编辑  收藏  举报