Componente React Native FlatList

En este artículo, vamos a ver cómo crear una FlatList en react-native. Para ello, vamos a utilizar el componente FlatList. Se utiliza para representar los elementos en una vista de lista desplazable.

Sintaxis:

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

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: establece cuándo 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.

Métodos en FlatList:

• flashScrollIndicators(): Muestra los indicadores de scroll momentáneamente.
• getNativeScrollRef(): proporciona una referencia al componente de desplazamiento subyacente.
• getScrollResponder(): proporciona un identificador para el respondedor de desplazamiento subyacente.
• getScrollableNode(): proporciona un identificador para el Node de desplazamiento subyacente.
• recordInteraction(): Cuenta la lista de una interacción que ha ocurrido.
• scrollToEnd(): Se desplaza hasta el final del contenido.
• scrollToIndex(): Se desplaza a un elemento en particular cuyo índice se proporciona.
• scrollToItem(): Se desplaza a un elemento proporcionado. Requiere un escaneo lineal a través de los datos.
• scrollToOffset(): se desplaza a un desplazamiento de píxeles de contenido específico en la lista.

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:

Ejemplo: Ahora implementemos FlatList. Aquí creamos una FlatList de cursos.

import React  from 'react';
import{ StyleSheet,
        Text,
        View,
        FlatList,
      } 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"
  },
];
  
const Item = ({title}) => {
  return( 
    <View style={styles.item}>
      <Text>{title}</Text>
    </View>
  );
}
  
export default function App() {
    
  
const renderItem = ({item})=>( 
  <Item title={item.title}/>
);
return (
  <View style={styles.container}>
    <FlatList
       data={DATA}
       renderItem={renderItem}
       keyExtractor={item => item.id}
    />
  </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    marginTop:30,
    padding:2,
  },
  item: {
    backgroundColor: '#f5f520',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

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