【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控件使用起來相對來講還是很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>
執行效果例如以下:
(三)屬性方法
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)