React Native - Indicador de actividad
En este capítulo, le mostraremos cómo usar el indicador de actividad en React Native.
Paso 1: aplicación
App se utilizará para importar y mostrar nuestro ActivityIndicator.
App.js
import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'
const Home = () => {
return (
<ActivityIndicatorExample />
)
}
export default Home
Paso 2: Ejemplo de indicador de actividad
La propiedad de animación es un booleano que se utiliza para mostrar el indicador de actividad. Este último se cierra seis segundos después de que se monta el componente. Esto se hace usando elcloseActivityIndicator() función.
activity_indicator_example.js
import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
animating: false }), 60000)
componentDidMount = () => this.closeActivityIndicator()
render() {
const animating = this.state.animating
return (
<View style = {styles.container}>
<ActivityIndicator
animating = {animating}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}/>
</View>
)
}
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 70
},
activityIndicator: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 80
}
})
Cuando ejecutamos la aplicación, veremos el cargador en pantalla. Desaparecerá después de seis segundos.