[React Native Development] progress bar of the React Native control on ProgressBarAndroid (12)

[React Native Development] progress bar of the React Native control on ProgressBarAndroid (12)
(1) Preface

Today, let's take a look at the progress bar to explain and use the ProgressBarAndroid control.

The newly created React Native technology exchange group (282693535). You are welcome to join us! At the same time, on the left side of the blog, you are welcome to scan the subscription number, mobile technology, and technology push!

The ProgressBarAndroid React component encapsulates the ProgressBar control on the Android platform. This component is used to display the progress of content loading in the APP.

(2) Introduction

The ProgressBarAndroid control is relatively simple to use. First, let's take a look at an official example:

render: function() {  var progressBar =    <view style="{styles.container}">      <progressbar styleattr="Inverse">    </progressbar></view>;   return (    <myloadingcomponent componentview="{componentView}" loadingview="{progressBar}" style="{styles.loadingComponent}">  );},</myloadingcomponent>

However, if you carefully read the above Code, you will find: How is the label here a ProgressBar? In fact, writing these official documents is a little misleading. If you write this document directly, you will certainly report an error. Looking at the official Demo example, you will find that the ProgressBarAndroid component needs to be introduced at the top of the example file as follows:

var ProgressBar =require('ProgressBarAndroid');

The following is a simple example using ProgressBarAndroi. The Code is as follows:

<View> <text> ProgressBarAndroid control instance </text> <progressbarandroid styleattr = "Inverse"> </progressbarandroid> </view>

The running effect is as follows:

 

(3) attribute Methods

. Support for View control attributes (these attributes are inherited from the View Control) such as size, layout, and margin.

3.2.color: Set the progress Color Attribute Value

3.3.indeterminate: whether to display a default progress information. If the styleAttr style is set to Horizontal, This value must be set to false.

3.4.progress number sets the current loading progress value (between 0 and 1)

3.5.styleAttr the style of the progress bar. The values are as follows:

• Horizontal
• Small
• Large
• Inverse
• SmallInverse
• LargeInverse (4) ProgressBarAndroid instance

  The above is the basic introduction of the overall ProgressBarAndroid. Below we use the various styles above to implement the following effect examples. 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> ProgressBarAndroid control instance </text> <progressbarandroid color = "red" styleattr = "Inverse"> <progressbarandroid color = "green" indeterminate = "{ false} "progress =" {0.2} "style =" {marginTop: 10 }}/ "styleattr =" Horizontal "> <progressbarandroid color =" green "indeterminate =" {true} "style =" {marginTop: 10 }}/ "styleattr =" Horizontal "> <progressbarandroid color =" black "style =" {marginTop: 10 }}/ "styleattr =" SmallInverse "> <progressbarandroid style =" {marginTop: 10 }}/ "styleattr =" LargeInverse "> </progressbarandroid> </view> );}} appRegistry. registerComponent ('ssssbardemo', () => ProgressBarDemo );

  The overall running effect is as follows:

  (5) Conclusion

  Today, we will mainly learn how to use the ProgressBarAndroid loading progress box component. If you have any questions, add a group of React Native technical exchange groups (282693535) or reply below.