"React native development" React native control progressbarandroid progress bar (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 website has been running, the following blog and technical dry Goods and other wonderful articles will be synchronized update, please pay attention to the collection:http://www.lcode.org

Today, let's take a look at the progress add -on Progressbarandroid controls are explained and basic used.

         the newly createdReact NativeTechnology Exchange Group(282693535),welcome you, Daniel .,ReactNativeTechnology enthusiasts join the Exchange!at the same time blog left welcome scan attention to the subscription number,Mobile Technology Dry,exciting article Technology push!

          the Span style= "Font-family:calibri" lang= "en-US" >progressbarandroid react components are encapsulated with android platform progressbar control. This component is used to display progress information during content loading in the app.

( two ) introduction of Use

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

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

but look at the above code to find out: How is the label inside ProgressBar it? In fact, official documents these write is a little misleading, if you write this directly, will definitely error, check the official demo example you will find in the example file at the top of the progressbarandroid Components need to introduce the following :

var ProgressBar =require (' progressbarandroid ');

below I directly use Progressbarandroi to implement one of the most simple examples, the code is as follows :

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

run the following effect :

( three ) attribute method

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

3.2.color Set the Color property value for Progress

         3.3. indeterminate styleattr horizontal

         3.4. PR ogress  number  set 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 , you can take the following values :

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

( four )Progressbarandroid Use example

The above is the overall Progressbarandroid Basic Introduction, below we use the above various styles to achieve the following effect instances , The specific code is as follows :

"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 operation effect is as follows :

( five ) Final summary

           Today we mainly study the progress barandroid How to load a progress box component. You have a problem. 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 my Weibo to get more content

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