轉載請標明出處： [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)