¿Cuál es el uso de FlatList?

En este artículo, vamos a aprender sobre los usos del componente FlatList. Primero, sepamos qué es FlatList. El componente FlatList es una forma eficiente de mostrar elementos en una vista de lista desplazable. Este componente tiene muchas funciones compatibles, como Carga de desplazamiento, compatibilidad con vistas de encabezado/pie de página, modo horizontal, extracción para actualizar, etc.

Sintaxis:

<FlatList
  data={}
  renderItem={}
/> 

En la sintaxis anterior, podemos ver que el componente FlatList tiene dos accesorios necesarios, es decir, datos y renderItem.

• datos: Es una array de elementos o datos.
• renderItem: se utiliza para representar los datos en la lista. Básicamente, necesita una función para tomar un elemento de la fuente de datos y devolver el componente de la lista para representarlo.

Estos dos accesorios del componente FlatList son de uso obligatorio. Hay muchos otros accesorios en los componentes de FlatList que también se pueden usar.

Accesorios en FlatList:

• renderItem: se utiliza para representar los datos en la lista.
• datos: Es básicamente una array de datos.
• ItemSeparatorComponent: se utiliza para renderizar entre cada elemento.
• ListEmptyComponent: se representa cuando la lista está vacía.
• ListFooterComponent: se representa en la parte inferior de todos los elementos.
• ListFooterComponentStyle: se utiliza para diseñar la vista interna de ListFooterComponent.
• ListHeaderComponent: se representa en la parte superior de todos los elementos.
• ListHeaderComponentStyle: Se utiliza para dar estilo a la vista interna ListHeaderComponent.
• columnWrapperStyle: es un estilo personalizado opcional para filas de elementos múltiples.
• extraData: Es la propiedad que le dice a la lista que se vuelva a renderizar.
• getItemLayout: Es una optimización opcional que permite saltarse la medición de contenido dinámico si se conoce el tamaño de los elementos.
• horizontal: si esto es cierto, los elementos se representarán horizontalmente en lugar de verticalmente.
• initialNumToRender: indica cuántos elementos renderizar en el lote inicial.
• initialScrollIndex: si se proporciona, en lugar de comenzar desde el elemento superior, comenzará desde el elemento initialScrollIndex.
• invertida: Invierte la dirección del scroll.
• keyExtractor: se utiliza para extraer la clave única para el elemento dado.
• numColumns: se utiliza para representar varias columnas.
• onEndReached: se llama una vez cuando la posición de desplazamiento se encuentra dentro del contenido representado.
• onEndReachedThreshold: Nos dice a qué distancia estamos del final.
• onRefresh : si se proporciona, se agregará un RefreshControl estándar.
• onViewableItemsChanged: se llama cuando cambia la visibilidad de la fila.
• ProgressViewOffset: se establece cuando se necesita el desplazamiento para la carga. Solo está disponible en Android.
• refrescante: Establézcalo como verdadero, mientras espera nuevos datos de una actualización.
• removeClippedSubviews: esto puede mejorar el rendimiento de desplazamiento para listas grandes. En Android, el valor predeterminado es verdadero.
• viewabilityConfigCallbackPairs: Muestra la lista de pares.

Usos de FlatList:

• FlatList se utiliza para representar los elementos en una vista de lista desplazable.
• Datos grandes: cuando tenemos una lista grande de datos y la cantidad de datos puede cambiar con el tiempo, podemos usar FlatList ya que los datos grandes afectan la velocidad de procesamiento y el uso de FlatList no afectará la velocidad de procesamiento.
• FlatList se usa cuando queremos representar solo aquellos elementos que se muestran actualmente en la pantalla (predeterminado: 10 elementos).
• Para la gestión automática de la memoria y para gestionar los cambios de datos en la lista, utilizamos una lista plana.
• FlatList se puede usar cuando queremos el separador entre los elementos de la lista con la propiedad ItemSeparatorComponent.

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 myapp

Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

cd myapp

Estructura del proyecto:

novia

Ejemplo 1:  En este ejemplo, hemos creado una lista plana simple.

import { FlatList, StyleSheet, Text, View } from "react-native";
  
const DATA = [
    {
      id:"1",
      title:"Data Structures"
    },
    {
      id:"2",
      title:"STL"
    },
    {
      id:"3",
      title:"C++"
    },
    {
      id:"4",
      title:"Java"
    },
    {
      id:"5",
      title:"Python"
    },
    {
      id:"6",
      title:"CP"
    },
    {
      id:"7",
      title:"ReactJs"
    },
    {
      id:"8",
      title:"NodeJs"
    },
    {
      id:"9",
      title:"MongoDb"
    },
    {
      id:"10",
      title:"ExpressJs"
    },
    {
      id:"11",
      title:"PHP"
    },
    {
      id:"12",
      title:"MySql"
    },
];
  
export default function App() {  
return (
  <View style={styles.container}>
    <FlatList
      data={DATA}
      renderItem={({ item }) => <Text style=
         {styles.item}>{item.title}</Text>}
      keyExtractor={(item) => item.id}/>
  </View>
  );
 }
   
const styles = StyleSheet.create({
  container: {
    flex:1,
      marginTop:30,
      padding:2,
    },
  item: {
    backgroundColor: 'green',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
        fontSize: 25,
  },
});

Paso para ejecutar la aplicación: Inicie el servidor usando el siguiente comando.

npm run android

Producción:

novia

Ejemplo 2: En este ejemplo, hemos creado FlatList con un separador entre cada elemento de datos.

import React from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";
  
const DATA = [
    {
      id:"1",
      title:"Data Structures"
    },
    {
      id:"2",
      title:"STL"
    },
    {
      id:"3",
      title:"C++"
    },
    {
      id:"4",
      title:"Java"
    },
    {
      id:"5",
      title:"Python"
    },
    {
      id:"6",
      title:"CP"
    },
    {
      id:"7",
      title:"ReactJs"
    },
    {
      id:"8",
      title:"NodeJs"
    },
    {
      id:"9",
      title:"MongoDb"
    },
    {
      id:"10",
      title:"ExpressJs"
    },
    {
      id:"11",
      title:"PHP"
    },
    {
      id:"12",
      title:"MySql"
    },
];
  
export default function App() {
  
  const Separator = () => {
    return <View style={{ 
        height: 4, 
        backgroundColor: "red", 
        marginHorizontal: 3}} 
    />;
    };
    
return (
  <View style={styles.container}>
    <FlatList
      data={DATA}
      renderItem={({ item }) => <Text style=
        {styles.item}>{item.title}</Text>}
      keyExtractor={(item) => item.id}
      ItemSeparatorComponent={Separator}
    />
  </View>
  );
 }
   
const styles = StyleSheet.create({
  container: {
    flex:1,
      marginTop:30,
      padding:2,
    },
  item: {
    backgroundColor: 'green',
      padding: 20,
       marginHorizontal: 16,
       marginVertical:8,
        fontSize: 25,
  },
});

Explicación: En este ejemplo, hemos creado una array de datos y luego hacemos una función llamada «Separador». Después de eso, asignamos esa función a ItemSeparatorComponent prop de FlatList Component que se usa para agregar un separador entre cada elemento.

Producción:

Referencia: https://reactnative.dev/docs/flatlist