0
171
VistasRN- ¿Cómo mostrar el ícono del cargador en la pantalla hasta que se cargue la imagen?
Soy nuevo en React nativo. Las imágenes cambian cuando se presionan los botones anterior y siguiente en la aplicación. Pero espera un tiempo hasta que las imágenes se cargan en la pantalla. Porque las imágenes provienen del almacenamiento de firebase. Cuando se presiona el botón, quiero que aparezca un icono de carga hasta que se carguen las imágenes. No sé cómo usar ActivityIndicator en esta situación. ¿Alguien puede ayudarme con eso?
Imagen de la aplicación:
Códigos:
import React, { useState } from 'react' import { Image, Text, TouchableOpacity, View } from 'react-native' import { StyleSheet } from 'react-native' const data = [ { url: "https://firebasestorage.googleapis.com/v0/b/asdsa-69cc0.appspot.com/o/1.jpg?alt=media&token=52de8fce-553d-436d-839e-cc3ee0ec29eb" }, { url: "https://firebasestorage.googleapis.com/v0/b/asdsa-69cc0.appspot.com/o/2.jpg?alt=media&token=0fa85f40-f134-4010-b575-63c1c82e9c81" } ] const WordPage = () => { const [picture, setPicture] = useState(data[0].url) const nextWord = () => { setPicture(data[1].url) } const previousWord = () => { setPicture(data[0].url) } return ( <View style={styles.container}> <Image source={{ uri: picture }} style={styles.image} /> <View style={styles.change}> <TouchableOpacity onPress={previousWord}> <Text> Previous </Text> </TouchableOpacity> <TouchableOpacity onPress={nextWord}> <Text> Next </Text> </TouchableOpacity> </View> </View> ) } export default WordPage const styles = StyleSheet.create({ container: { flex: 1, }, image: { height: 300, width: 300, alignSelf: 'center', borderRadius: 10, resizeMode: 'contain', marginTop: 20 }, change: { flexDirection: 'row', marginHorizontal: 10, marginTop: 20, alignItems: 'center', justifyContent: 'space-between' } });No pude aplicar lo que está escrito en esta página: ¿Cómo renderizo condicionalmente una rueda giratoria mientras espero que se cargue una nueva imagen?
1 Respuestas
Responde la pregunta0
mientras cargamos imágenes desde una URL, podemos hacer uso de los accesorios disponibles para los componentes de imagen. Los accesorios como onLoadStart se pueden usar para configurar una variable de estado para mostrar un indicador de actividad mientras se inicia la carga de la imagen y los accesorios como onLoad o onLoadEnd se pueden usar para cambiar el valor de la variable de estado para ocultar el indicador de actividad una vez que se realiza la carga.