react native - item - ¿Cómo agregar/eliminar elemento en ListView?

slider react native elements

Question

Podemos crear un origen de datos para ListView como este

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

Pero si quiero agregar elementos o eliminar elementos del origen de datos, ¿cómo puedo hacer eso? ¿Necesito siempre llamar a cloneWithRows con una matriz actualizada?

Answer 1

Sí, llame a cloneWithRows(...)

La documentación de React Native no cubre el objeto ListViewDataSource , por lo que puede ser útil leer los comentarios en el código fuente para ver cómo funciona.

Algunas notas que pueden ser útiles:

• cloneWithRows(data) es un nombre engañoso porque no solo crea un clon de los datos como sugiere su nombre.

• En su lugar, intenta comparar las nuevas filas de data con las filas existentes (si las hay) en el dataSource, y averigua si hay nuevas filas para insertar o las filas existentes que necesitan ser reemplazadas o eliminadas.

• Los comentarios del código fuente indican que los datos en la fuente de datos son inmutables por diseño, por lo que la forma correcta de cambiarlos es especificar una fuente de datos actualizada, es decir, llamar a cloneWithRows(...) .

Puede parecer poco intuitivo pasar toda la lista solo para cambiar algunas filas, pero hay un par de razones por las que tiene sentido:

• En primer lugar, concuerda con la arquitectura global basada en flujo de React, donde el foco está en establecer estados y permitir que los componentes averigüen cómo mutarse para reflejar el nuevo estado (piense cómo funciona this.props o this.state ). Puede cambiar la matriz de datos como quiera fuera del componente ListView , pero una vez que esté listo para actualizar el componente, es un enfoque de flujo decente pasar todo el estado al componente para que pueda actualizarse.

• En segundo lugar, es decentemente eficiente. ListView realiza la diferenciación de filas pesadas en Javascript antes de que comience el proceso de renderizado, y luego procesa una fila a la vez (puede ajustar esto ) durante el ciclo de renderizado, para reducir las caídas de cuadros.

• En tercer lugar, nada aquí excluye la posibilidad de apoyar métodos como .addRow(..) en el futuro. El punto es que la implementación actual no es un mal comienzo, ya que proporciona una interfaz basada en el estado que permite a los desarrolladores no preocuparse acerca de cómo el componente de la lista muta entre los estados.

Answer 2

Si observa el ejemplo ampliado de películas del tutorial React Native, implementa la búsqueda que busca nuevas películas desde una API remota. Esto significa que cada búsqueda actualizará el almacén de datos, agregando o eliminando elementos de manera efectiva. El lugar exacto donde esto sucede está aquí:

getDataSource: function(movies: Array<any>): ListView.DataSource {
    return this.state.dataSource.cloneWithRows(movies);
}

https://github.com/facebook/react-native/blob/master/Examples/Movies/SearchScreen.js#L209

Entonces parece que tu camino es el método recomendado.