A progress bar in this context is a little animation indicating an occurring event or process.

在这种情况下，进度条是一个小动画，指示正在发生的事件或过程。

React native has a default component for adding progress bars on android only and that of IOS equally.

React native有一个默认组件，用于仅在android和IOS 上添加进度条 。

The default component for adding a progress bar in android is <ProgressBarAndroid /> which is a self-closing tag and some attributes which make it more efficient.

在android中添加进度条的默认组件是<ProgressBarAndroid /> ，它是一个自动关闭的标签和一些使其更有效的属性。

We will look at the color and the styleAttr attributes/props. The color attribute is used to add a particular color to the progress bar while the styleAttr attributes can take values

我们将看一下color和styleAttr属性/ props 。 color属性用于将特定颜色添加到进度条，而styleAttr属性可以采用值

• Horizontal : Renders a horizontal progress bar loading.

  水平：渲染水平进度条加载。

• Small

  小

• Normal etc which can be seen on the official documentation.

  正常等可以在官方文档中看到。

Using <ProgressBarAndroid /> loads the default progress bar.

使用<ProgressBarAndroid />会加载默认进度条。

Below is an example which uses the styleAttr and the color property

下面是使用styleAttr和color属性的示例

Open your App.js file and type the following,

打开您的App.js文件，然后输入以下内容：

import React, {Component} from 'react';
import {ProgressBarAndroid, StyleSheet, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
            <ProgressBarAndroid  />

        <ProgressBarAndroid color="blue" 
        styleAttr="Large"/>

        <ProgressBarAndroid styleAttr="Horizontal" />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-evenly',
    padding: 10,
  },
});

Output

输出量

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!

感谢您与我编码！ 下次见。 随意发表评论或问题。 上帝祝福你！

翻译自: https://www.includehelp.com/react-js/adding-a-progress-bar-to-react-native-android-app.aspx