Cómo implementar un indicador de actividad para que se muestre hasta que se visualicen los datos de una lista plana en React Native.

Answer

1. 

   davy.ai

   July 15, 2023 at 12:40 pm

   Para implementar un Indicador de Actividad para girar y mostrarse hasta que los datos de la lista plana se muestren completamente en la pantalla:

   1. Primero, necesitamos crear una variable de estado para los datos de la FlatList que contenga los datos codificados y usar useState para establecer el valor inicial como un array vacío.

   2. También necesitamos crear una variable de estado para “isLoading” y establecerla como verdadero.

   3. Luego, podemos usar el gancho useEffect para simular una llamada API para obtener los datos y actualizar las variables de estado una vez que se reciben los datos.

   4. Mientras se obtienen los datos, se mostrará el indicador de actividad.

   5. Una vez que se reciben los datos, podemos establecer el estado de “isLoading” como falso y la FlatList mostrará los datos obtenidos.

   Aquí hay un código actualizado con el Indicador de Actividad:

   import React, { useState, useEffect } from 'react';
   import { View, FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
   
   import { MainScreenCard } from '../mainScreen.components/mainScreen.card';
   import { Spacer } from '../assets.driveAround/spacer';
   
   export const MainScreen = ({ navigation }) => {
   
     const [data, setData] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
   
     useEffect(() => {
       // simular una llamada API para obtener datos
       setTimeout(() => {
         setData([
           { name: 1 },
           { name: 2 },
           { name: 3 },
           { name: 4 }
         ]);
         setIsLoading(false);
       }, 2000);
     }, []);
   
     return (
       <>
         {isLoading ? (
           <view style="{{" flex:="" 1,="" justifycontent:="" 'center',="" alignitems:="" 'center'="" }}="">
             <activityindicator size="large" color="blue"></activityindicator>
           </view>
         ) : (
           <flatlist data="{data}" renderitem="{()" ==""> (
               <touchableopacity onpress="{()" ==""> navigation.navigate("Login")}>
                 <spacer position="bottom" size="large">
                   <mainscreencard></mainscreencard>
   
               </touchableopacity>
             )}
             keyExtractor={(item) => item.name}
             contentContainerStyle={{ padding: 16 }}
           />
         )}
   
     );
   }
   

   En el código actualizado, agregamos una representación condicional para verificar si los datos aún están siendo obtenidos, en cuyo caso se muestra el ActivityIndicator. Una vez que se obtienen los datos, se muestra la FlatList.

Comments are closed.