En este artículo, vamos a ver cómo crear un indicador de actividad en react-native. Para ello, vamos a utilizar el componente ActivityIndicator. Se utiliza para mostrar un indicador de carga circular.
Sintaxis:
<ActivityIndicator />
Accesorios en ActivityIndicator:
- animando: mostrará el indicador si es verdadero o lo ocultará si es falso.
- color: el color de primer plano de la rueda giratoria.
- hidesWhenStopped: Controla si el indicador debe ocultarse cuando no está animado. Solo está disponible para dispositivos ios.
- tamaño: Tamaño del indicador.
Ahora comencemos con la implementación:
-
Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.
npm install -g expo-cli
-
Paso 2: ahora cree un proyecto con el siguiente comando.
expo init myapp
-
Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp
cd myapp
Estructura del proyecto:
Ejemplo: ahora implementemos el indicador de actividad. Aquí creamos un indicador de actividad.
App.js
import React from 'react'; import {View, StyleSheet, Text , ActivityIndicator} from 'react-native'; export default function App() { return ( <View style={styles.container}> <ActivityIndicator size="large" color="lightgreen"/> <Text style={styles.text}>Loading...</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text : { marginTop : 10, } });
Inicie el servidor utilizando el siguiente comando.
npm run android
Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.
Referencia: https://reactnative.dev/docs/activityindicator
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA