Componente React Native ListView

El componente ListView es un componente de vista React Native incorporado que muestra una lista de elementos en una lista desplazable verticalmente. Requiere una API ListView.DataSource para completar una array simple de blobs de datos e instanciar el componente ListView con una fuente de datos y una devolución de llamada de renderRow.

La principal ventaja de usar el componente ListView sobre el componente ScrollView es que supera las deficiencias de rendimiento del componente ScrollView. Detrás de escena, sin embargo, el componente ListView usa un ScrollView como su componente desplazable. Por lo tanto, el componente ListView es una abstracción que optimiza el componente ScrollView.

Sintaxis:

<ListView
    dataSource={}
    renderRow={}
/>

Accesorios ListView:

• dataSource : proporciona una instancia de ListView.DataSource que se utilizará.
• renderRow : se usa para tomar un blob de la array de datos como argumento y devuelve un componente renderizable.
• initialListSize : se utiliza para especificar el número de filas que se representarán cuando el componente se monte inicialmente.
• onEndReachedThreshold : se utiliza para especificar el valor del umbral en píxeles para llamar a onEndReached.
• pageSize : se utiliza para especificar el número de filas para representar por ciclo de evento.
• renderScrollComponent : se utiliza para devolver el componente desplazable en el que se representan las filas de la lista.
• scrollRenderAheadDistance : especifica qué tan temprano comenzar a representar las filas de la lista antes de que aparezcan en la pantalla.
• stickyHeaderIndices : es una array de índices secundarios que especifican los elementos secundarios que se acoplarán en la parte superior de la pantalla al desplazarse.
• enableEmptySections : es un indicador que indica si un encabezado de sección vacío debe procesarse o no.
• onEndReached : se invoca cuando todas las filas se han representado en la pantalla y la lista se ha desplazado dentro del onEndReachedThreshold.
• stickySectionHeadersEnabled : como sugiere el nombre, se usa para hacer que los encabezados de sección sean fijos.
• renderSectionHeader : si se proporciona esta propiedad, se representa un encabezado para la sección en particular.
• renderSeparator : si se proporciona esta propiedad, se agrega un componente renderizable (representado como un separador debajo de cada fila excepto la última fila).
• onChangeVisibleRows : se invoca solo cuando cambian algunas filas visibles.
• removeClippedSubviews : se utiliza para la optimización del rendimiento y se utiliza principalmente junto con el desbordamiento: ‘oculto’ en los contenedores de fila.
• renderFooter : si se proporcionan estos accesorios, el encabezado y el pie de página siempre se representan en cada pase de procesamiento.

Métodos de vista de lista:

• getMetrics() : función utilizada para exportar datos, principalmente con fines analíticos.
• scrollTo() : función utilizada para desplazarse a un desplazamiento xy dado.
• scrollToEnd() : Función utilizada para desplazar la lista. En el caso de un ListView vertical, se utiliza para desplazarse hasta el final de la lista. En el caso de un ListView horizontal, se utiliza para desplazarse hacia la derecha.
• flashScrollIndicators() : Función utilizada para mostrar brevemente los indicadores de desplazamiento.

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 listview-demo

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

  cd listview-demo

Estructura del proyecto: Se verá así.

Ejemplo: uso básico del componente ListView

import React, { Component } from "react";
import { Text, View, StyleSheet, ListView } from "react-native";
import { Icon } from "react-native-elements";
  
const ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2
});
  
class App extends Component {
  state = {
    dataSource: ds.cloneWithRows([
      "Data Structures",
      "STL",
      "C++",
      "Java",
      "Python",
      "ReactJS",
      "Angular",
      "NodeJs",
      "PHP",
      "MongoDb",
      "MySql",
      "Android",
      "iOS",
      "Hadoop",
      "Ajax",
      "Ruby",
      "Rails",
      ".Net",
      "Perl",
    ]),
  };
  
  render() {
    return (
      <View style={styles.screen}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => (
            <View style={styles.row}>
              <Text style={styles.rowText}>{rowData}</Text>
              <Icon name="ios-eye" type="ionicon" color="#C2185B" />
            </View>
          )}
        />
      </View>
    );
  }
}
  
// Screen styles
const styles = StyleSheet.create({
  screen: {
    marginTop: 30,
  },
  row: {
    margin: 15,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 2,
  },
  rowText: {
    fontSize: 18,
  },
});
  
export default App;

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. 

Nota: es importante tener en cuenta que el componente ListView ahora está obsoleto. En su lugar, se utilizan componentes más nuevos, como FlatList o SectionList. Para usar el componente ListView, use el paquete obsoleto-react-native-listview.

import ListView from "deprecated-react-native-listview";

Referencia: https://reactnative.dev/docs/0.62/listview