React Native ProgressBarAndroid

在本文中，我们将讨论如何为 Android 应用程序创建进度条。我们将使用 React Native 组件 ProgressBarAndroid。

句法：


   // Other Component
  
   // Other Component

ProgressBarAndroid 道具：

动画：布尔值，指定是否显示进度条。
color：指定进度条的颜色。
indeterminate：用于显示不确定的进度。
progress：它将进度值指定为一个数字。
styleAttr：指定 ProgressBar Android 组件的样式。它可以有 Horizontal、Normal（默认）、Small、Large、Inverse、SmallInverse 和 LargeInverse 作为值。
testID：用于在端到端测试中定位该视图。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init ProgressBarAndroidDemo
```
第 3 步：现在使用以下命令进入您的项目文件夹，即 ProgressBarAndroidDemo。
```
cd ProgressBarAndroidDemo
```

项目结构：它将如下所示。

示例：现在让我们实现 ProgressBarAndroid。这里我们展示了一个简单的加载器动画，在它结束后，我们向用户展示了一个文本。

App.js

import React, { useState } from 'react';
import {
  StyleSheet, Text, View, ProgressBarAndroid,
  TouchableWithoutFeedback
} from 'react-native';
  
export default function App() {
  
  // State to hold current value
  const [val, setVal] = useState(true);
  
  return (
    
       { setVal(false); }}
        style={{ flex: 1 }}>
        
          
          {!val && App has finished loading}
        
      
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/progressbarandroid