Reaccionar componente SectionList nativo

El componente SectionList es un componente de vista de lista incorporado de React Native que representa listas seccionadas. Como sugiere su nombre, se utiliza para mostrar listas de datos en diferentes secciones. Es un componente puro que admite la mayoría de las funciones, como tirar para actualizar, carga de desplazamiento, separadores, encabezados y pies de página, etc. Las listas de secciones se utilizan principalmente para mostrar listas en secciones. En el caso de que no se requiera el soporte de la sección, se debe usar un componente FlatList o ScrollView.

Sintaxis:

<SectionList
      sections={}
      renderItem={}
/>

Apoyos de la lista de secciones:

• renderItem: (obligatorio) Es un elemento de reacción que se utiliza como renderizador predeterminado para mostrar los elementos en las diferentes secciones de la lista.
• secciones: (requerido) Es una array de datos (con diferentes objetos para diferentes secciones) que se representará.
• extraData: Es una propiedad que informa la lista para volver a renderizar (ya que implementa PureComponent).
• initialNumToRender: Es el número de elementos a renderizar cuando la pantalla se carga inicialmente.
• invertido: si se establece en verdadero, invertirá la dirección del desplazamiento.
• ItemSeparatorComponent: Es un componente que se representará entre cada elemento (excepto en la parte superior o inferior).
• keyExtractor: se utiliza para extraer una clave única para un elemento particular de la lista.
• ListEmptyComponent: puede ser un componente o un elemento de reacción que se representa en caso de una lista vacía.
• ListFooterComponent: puede ser un componente o un elemento de reacción que se representa al final de la lista.
• ListHeaderComponent: puede ser un componente o elemento de reacción que se representa al comienzo de la lista.
• onEndReached: es una devolución de llamada llamada cuando la posición de desplazamiento alcanza el onEndReachedThreshold.
• onEndReachedThreshold: es un valor que indica exactamente qué tan lejos debe estar la parte inferior de la lista del final de la pantalla para activar onEndReached.
• onRefresh: si se proporciona, se insertará un RefreshControl en la funcionalidad «Pull to Refresh».
• onViewableItemsChanged: Es una función que se llama durante los cambios en la visibilidad de la fila.
• refrescante: se establece como verdadero cuando la pantalla se actualiza mientras se esperan nuevos datos.
• renderSectionFooter: se representa en la parte inferior de cada sección.
• renderSectionHeader: se representa en la parte superior de cada sección.
• SectionSeparatorComponent: se representa en la parte superior e inferior de cada sección para distinguirlas entre sí.
• stickySectionHeadersEnabled: se usa para hacer que los encabezados de las secciones se adhieran a la parte superior de la pantalla.

Métodos de lista de secciones:

• flashScrollIndicators(): Se usa para mostrar los indicadores de scroll por un breve momento.
• recordInteraction(): Se utiliza para informar a la lista sobre cualquier interacción que haya ocurrido.
• scrollToLocation(): se utiliza para desplazarse hasta el elemento en cualquier índice de sección e índice de elemento especificado.

Instalació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 sectionlist-demo

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, lista de secciones-demo

  cd sectionlist-demo

Estructura del proyecto: Se verá así:

Ejemplo: En este ejemplo, veremos cómo usar el componente básico SectionList.

import React, { Component } from "react";
import { Text, View, StyleSheet, SectionList } from "react-native";
import { Icon } from "react-native-elements";
  
class App extends Component {
  state = {
    data: [
      {
        title: "Operating System",
        data: [
          "Processes & Threads",
          "Memory Management",
          "CPU Scheduling",
          "Process Synchronization",
          "Deadlock",
        ],
      },
      {
        title: "Computer Network",
        data: [
          "Data Link Layer",
          "Network Layer",
          "Transport Layer",
          "Application Layer",
          "Network Security",
        ],
      },
      {
        title: "DBMS",
        data: [
          "Entity Relationship Model",
          "Normalisation",
          "Transaction and Concurrency Control",
          "Indexing, B and B+ trees",
          "File Organization",
        ],
      },
    ],
  };
  
  render() {
    return (
      <View style={styles.screen}>
        // Using Section List
        <SectionList
          sections={this.state.data}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item }) => (
            <View style={styles.row}>
              <Text style={styles.rowText}>{item}</Text>
              <Icon name="ios-eye" type="ionicon" color="#C2185B" />
            </View>
          )}
          renderSectionHeader={({ section: { title } }) => (
            <Text style={styles.header}>{title}</Text>
          )}
        />
      </View>
    );
  }
}
  
// Screen styles
const styles = StyleSheet.create({
  screen: {
    marginTop: 18,
  },
  header: {
    fontSize: 30,
    color: "#FFF",
    marginTop: 10,
    padding: 2,
    backgroundColor: "#C2185B",
    textAlign: "center",
  },
  row: {
    marginHorizontal: 15,
    marginTop: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 2,
  },
  rowText: {
    fontSize: 18,
  },
});
  
export default App;

Paso para ejecutar la aplicación: Inicie el servidor usando 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/sectionlist