React Native ActivityIndicator 组件

在本文中，我们将了解如何在 react-native 中创建 ActivityIndicator。为此，我们将使用 ActivityIndicator 组件。它用于显示循环加载指示器。

句法：

ActivityIndicator 中的道具：

• 动画：如果为真则显示指示器，如果为假则隐藏它。
• color：微调器的前景色。
• hidesWhenStopped：控制在不动画时是否隐藏指示器。它仅适用于 ios 设备。
• size：指标的大小。

现在让我们从实现开始：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init myapp

• 第 3 步：现在进入您的项目文件夹，即 myapp

  cd myapp

项目结构：

示例：现在让我们实现 ActivityIndicator。在这里，我们创建了一个 ActivityIndicator。

App.js

import React from 'react';
import {View, StyleSheet, Text , 
        ActivityIndicator} from 'react-native';
  
export default function App() {
  return (
    
      
      Loading...
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text : {
    marginTop : 10,
  }
    
});

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

npm run android

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

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