轉載請標明出處:
[http://blog.csdn.net/developer_jiangqq/article/details/50596367](http://blog.csdn.net/developer_jiangqq/article/details/50596367)
本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq)
# (一)前言
? ? ? ?【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新,請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)??
? ? ? ?今天我們一起來看一下進度加載條ProgressBarAndroid控件的講解與基本使用。
???????? 剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483),請不要重復加群!歡迎各位大牛,React?Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!
?????????該ProgressBarAndroid的React組件進行封裝了Android平臺的ProgressBar控件。該組件用于顯示APP中的內容加載過程中的進度信息。
# (二)使用介紹
???????? ProgressBarAndroid控件使用起來相對來講還是非常簡單的。首先我們來看一下官方的寫的一個例子:
~~~
render: function() {
var progressBar =
<View style={styles.container}>
<ProgressBar styleAttr="Inverse" />
</View>;
return (
<MyLoadingComponent
componentView={componentView}
loadingView={progressBar}
style={styles.loadingComponent}
/>
);
},
~~~
但是大家仔細看以上的代碼會發現:這里面的標簽怎么是ProgressBar呢?其實官方文檔這些寫是有一點誤導性的,如果你直接這樣寫,肯定會報錯,查看官方Demo例子你會發現在該例子文件頂端需要引入ProgressBarAndroid組件如下:
~~~
var?ProgressBar?=require('ProgressBarAndroid');
~~~
下面我直接采用ProgressBarAndroi來實現一個最最簡單的例子,代碼如下:
~~~
<View >
<Text>
ProgressBarAndroid控件實例
</Text>
<ProgressBarAndroid styleAttr='Inverse'/>
</View>
~~~
運行效果如下:

# (三)屬性方法
??????? 3.1.支持View控件的屬性方法?(這些屬性是從View控件中繼承下來)??例如:大小,布局,邊距啊
??????? 3.2.color??設置進度的顏色屬性值
??????? 3.3.indeterminate?設置是否要顯示一個默認的進度信息,該如果styleAttr的風格設置成Horizontal的時候該值必須設置成false
??????? 3.4.progress? number??設置當前的加載進度值(該值在0-1之間)
??????? 3.5.styleAttr????進度條框的風格?,可以取的值如下:
* Horizontal????????
* Small?????????????????
* Large
* Inverse
* SmallInverse
* LargeInverse
# (四)ProgressBarAndroid使用實例
??????????以上是整體ProgressBarAndroid的基本介紹,下面我們使用上面的各種風格來實現以下效果實例,具體代碼如下:
~~~
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
ProgressBarAndroid,
} from 'react-native';
class ProgressBarDemo extends Component {
render() {
return (
<View >
<Text>
ProgressBarAndroid控件實例
</Text>
<ProgressBarAndroid color="red" styleAttr='Inverse'/>
<ProgressBarAndroid color="green" styleAttr='Horizontal' progress={0.2}
indeterminate={false} style={{marginTop:10}}/>
<ProgressBarAndroid color="green" styleAttr='Horizontal'
indeterminate={true} style={{marginTop:10}}/>
<ProgressBarAndroid color="black" styleAttr='SmallInverse'
style={{marginTop:10}}/>
<ProgressBarAndroid styleAttr='LargeInverse'
style={{marginTop:10}}/>
</View>
);
}
}
AppRegistry.registerComponent('ProgressBarDemo',() => ProgressBarDemo);
~~~
整體運行效果如下:

# (五)最后總結
??????????今天我們主要學習一下ProgressBarAndroid加載進度框組件的使用方法。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。
? ? ? ?尊重原創,轉載請注明:From Sky丶清([http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)) 侵權必究!
? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注,第一時間推送精彩文章)

? ? ?關注我的微博,可以獲得更多精彩內容
? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)