【React Native開發】React Native控件之ProgressBarAndroid進度條講解(12)

轉載請標明出處：

http://blog.csdn.net/developer_jiangqq/article/details/50596367

本文出自:【江清清的博客】

(一)前言

       【好消息】個人網站已經上線運行,後面博客以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org  

       今天我們一起來看一下進度加載條ProgressBarAndroid控件的講解與基本使用。

       剛創建的React Native技術交流3羣(496508742),React Native技術交流4羣(458982758)，請不要重複加羣！歡迎各位大牛,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） 侵權必究！

       關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)

     關注我的微博，可以獲得更多精彩內容