📜  React Native ActivityIndicator 组件

📅  最后修改于: 2022-05-13 01:56:29.950000             🧑  作者: Mango

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