En este artículo, vamos a discutir cómo crear una barra de progreso para aplicaciones de Android. Usaremos el componente React Native ProgressBarAndroid.
Sintaxis:
<View> // Other Component <ProgressBarAndroid/> // Other Component <View>
Accesorios de ProgressBarAndroid:
- animando: valor booleano que especifica si mostrar la barra de progreso o no.
- color: Especifica el color de la barra de progreso.
- indeterminado: Se utiliza para mostrar un progreso indeterminado.
- progreso: Especifica el valor del progreso como un número.
- styleAttr: Especifica el estilo del componente Android ProgressBar. Puede tener Horizontal, Normal (predeterminado), Pequeño, Grande, Inverso, PequeñoInverso y GranInverso como valor.
- testID: Se utiliza para ubicar esta vista en pruebas de extremo a extremo.
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 ProgressBarAndroidDemo
-
Paso 3: Ahora vaya a la carpeta de su proyecto, es decir, ProgressBarAndroidDemo usando el siguiente comando.
cd ProgressBarAndroidDemo
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: Ahora implementemos ProgressBarAndroid. Aquí mostramos una animación simple del cargador y, una vez que finaliza, mostramos un texto al usuario.
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 ( <View style={styles.container}> <TouchableWithoutFeedback onPress={() => { setVal(false); }} style={{ flex: 1 }}> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <ProgressBarAndroid animating={val} color="blue" styleAttr='LargeInverse' /> {!val && <Text>App has finished loading</Text>} </View> </TouchableWithoutFeedback> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
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/progressbarandroid
Publicación traducida automáticamente
Artículo escrito por akshatsachan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA