react-native
Vista de la lista

Ejemplo simple

ListView: un componente central diseñado para la visualización eficiente de listas de desplazamiento vertical de datos cambiantes. La API mínima es crear un ListView.DataSource, rellenarlo con una simple matriz de blobs de datos e instanciar un componente ListView con esa fuente de datos y una devolución de llamada renderRow que toma un blob de la matriz de datos y devuelve un componente reproducible.

Ejemplo mínimo:

getInitialState: function() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
},

render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
},

ListView también admite funciones más avanzadas, que incluyen secciones con encabezados de sección adhesiva, encabezado y pie de página, devoluciones de llamadas al llegar al final de los datos disponibles (onEndReached) y en el conjunto de filas que están visibles en el cambio de la ventana del dispositivo (enChangeVisibleRows), y Varias optimizaciones de rendimiento.

Hay algunas operaciones de rendimiento diseñadas para hacer que ListView se desplace sin problemas mientras carga dinámicamente conjuntos de datos potencialmente muy grandes (o conceptualmente infinitos):

• Solo volver a renderizar filas modificadas: la función rowHasChanged proporcionada al origen de datos le dice a ListView si necesita volver a renderizar una fila porque los datos de origen han cambiado; consulte ListViewDataSource para obtener más detalles.
• Procesamiento de filas de velocidad limitada: de forma predeterminada, solo una fila se procesa por evento-bucle (personalizable con la propiedad pageSize). Esto divide el trabajo en partes más pequeñas para reducir la posibilidad de soltar marcos mientras se renderizan filas.