【React Native開發】React Native控制項之ProgressBarAndroid進度條解說(12)

標籤：.net   繼承   details   article   項目   ida   顯示   contain   att   

轉載請標明出處：

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控制項使用起來相對來講還是很easy的。首先我們來看一下官方的寫的一個範例:

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>

執行效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" />

 

(三)屬性方法

        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),專案管理以及部落格文章!(歡迎關注，第一時間推送精彩文章)

     關注我的微博。能夠獲得很多其它精彩內容

      

s=6uyXnP" style="color: rgb(202, 0, 0); text-decoration: none;">

【React Native開發】React Native控制項之ProgressBarAndroid進度條解說(12)