"React native development" React native control progressbarandroid progress bar Commentary (12)

Reprint please indicate the source:

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

This article is from: "Jiang Qing's blog"

( i ) preface

"Good news" personal site has been launched, the following blog and technical dry Goods and other wonderful articles will be updated synchronously. Please pay attentionto the collection : http://www.lcode.org

today, let's take a look at the progress loading bar Progress barandroid the explanation and basic use of the control.

the newly created react native technology Exchange 3 Group (496508742), React native Technology Exchange 4 Group (458982758)。 Please do not add the group repeatedly!

Welcome to Daniel , react Native technology enthusiasts increase communication ! same time blog left side welcome scan follow subscription number , Mobile Technology Dry Goods wonderful article technology push !

The progressbarandroid 's React component encapsulates the Android Platform's /c7> theProgressBar control.

This component is used to display progress information during content onboarding in the app.

( two ) introduction of Use

progressbarandroid controls are relatively easy to use. First, let's take a look at the official writing example :

Render:function () {  var progressBar =    <view style={styles.container}>      <progressbar styleattr= " Inverse "/>    </View>;   Return (    <myloadingcomponent      Componentview={componentview}      Loadingview={progressbar}      style={ Styles.loadingcomponent}    />  );},

But people look at the above code will find: This is how the label is ProgressBar it? In fact official documents these write is a little misleading, assuming you write this directly, will definitely error, check the official Demo sample you will send the sample file at the top of the progressbarandroid components such as the following :

var ProgressBar =require (' progressbarandroid ');

I use the following directly Progressbarandroi to implement one of the most simple examples. The code is as follows :

<view >        <Text>            progressbarandroid Control Instances        </Text>        <progressbarandroid styleattr = ' Inverse '/></view>

perform effects such as the following :

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity /southeast "/>

( three ) attribute method

3.1.SupportViewproperty methods for controls (These properties are from theViewcontrol to inherit from the)  like:size,Layout,The margins .

3.2.color Set the Color property value for Progress

         3.3. indeterminate sets whether to display a default progress information, which is assumed styleattr horizontal

         3.4. PR ogress  number  Set the current load progress value ( Span style= "Font-family:"microsoft yahei"" lang= "ZH-CN" > This value is in 0-1 )

3.5.styleAttr the style of the progress bar box , the values that can be taken are as follows :

• Horizontal
• S Mall                  
• Large
• Inverse
• Smallinverse
• Largeinverse

( four )Progressbarandroid Use example

The above is the general Progressbarandroid Basic Introduction, the following we use the above various styles to achieve the following effect instances , Detailed code such as the following :

"Use strict"; import React, {appregistry, Component, StyleSheet, Text, View, Progressbarandroid,} from ' React-native ‘; Class Progressbardemo extends Component {render () {return (<view > <Text> progre Ssbarandroid Control Instances </Text> <progressbarandroid color= "red" styleattr= ' inverse '/> <progr Essbarandroid color= "green" styleattr= ' horizontal ' progress={0.2} Indeterminate={false} Style={{margintop:10}} /> <progressbarandroid color= "green" styleattr= ' horizontal ' indeterminate={true} style={{marginto        p:10}}/> <progressbarandroid color= "Black" styleattr= ' Smallinverse ' style={{margintop:10}}/>  <progressbarandroid styleattr= ' largeinverse ' style={{margintop:10}}/> </View>); }}appregistry.registercomponent (' Progressbardemo ', () = Progressbardemo);

overall execution effects such as the following :

( five ) Final summary

           Today we mainly study the progress barandroid react Native technical Exchange Group ( Span style= "Font-family:calibri;color: #E84C22" lang= "ZH-CN" >282693535

respect the original, reproduced please specify: from Sky, Clear ( HTTP://BLOG.CSDN.NET/DEVELOPER_JIANGQQ ) infringement must investigate!

Follow my subscription number (codedev123), Share mobile development Technology (ANDROID/IOS), project management, and blog posts every day! (Welcome attention, the first time to push the wonderful article)

Follow me on Weibo. Be able to get a lot of other exciting content

S=6UYXNP "style=" Color:rgb (202, 0, 0); Text-decoration:none; " >

"React native development" React native control progressbarandroid progress bar Commentary (12)