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.