如何在ListView中添加/删除项目? [英] How to add/Delete item into ListView?

问题描述

我们可以像这样为ListView创建数据源

We can create a datasource for ListView like this

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

但是，如果我想添加项目或从数据源中删除项目，该怎么办?我是否需要始终使用更新后的数组调用cloneWithRows?

But if I want to add items or delete items from datasource, how can I do that? Do I need to always call cloneWithRows with updated array?

推荐答案

是，请致电cloneWithRows(...)

React Native文档没有涵盖ListViewDataSource对象，因此阅读

Yes, call cloneWithRows(...)

The React Native documentation doesn't cover the ListViewDataSource object, so it can be helpful to read the comments in the source code to see how this works.

一些说明可能会有所帮助:

Some notes which may be helpful:

• cloneWithRows(data)的名称有点误导，因为它不仅会按名称所示创建数据的克隆.

• cloneWithRows(data) is a bit misleadingly named because doesn't just create a clone of the data as the name suggests.

尝试将新的data行与数据源中的现有行(如果有)进行比较，并确定是要插入新行还是需要替换新行或删除.

Instead, it tries to compare the new data rows with the existing rows (if any) in the dataSource, and figures out whether there are new rows to insert, or existing rows that need to be replaced or removed.

源代码注释指出，数据源中的数据在设计上是不可变的，因此更改数据的正确方法是指定更新的数据源，即调用cloneWithRows(...).

The source code comments note that the data in the data source is immutable by design, so the correct way to change it is to specify an updated data source, i.e. call cloneWithRows(...).

传递整个列表只是为了更改几行似乎是不直观的，但是有几个原因使之有意义:

It may seem unintuitive to pass the entire list just to change a few rows, but there are a couple reasons for why it makes sense:

• 首先，它与React的整体基于flux的体系结构相符其中的重点是设置状态并允许组件弄清楚如何使自己变异以反映新状态(请考虑this.props或this.state的工作原理).您可以随意在ListView组件之外随意更改数据数组，但是一旦准备好更新组件，将整个状态传递到组件中以进行更新的方法就很不错了.

• First, it comports with React's overall flux-based architecture where the focus is on setting states and allowing components to figure out how to mutate themselves to reflect the new state (think of how this.props or this.state works). You are free to change the data array however you like outside the ListView component, but once you are ready to update the component, it's a decent flux approach to pass the entire state into the component so it can update itself.

第二，效率很高. ListView在Javascript before 中执行重行区分，然后开始呈现过程，然后一次呈现一行(您可以

Second, it's decently efficient. The ListView does the heavy row differentiation in the Javascript before it starts the rendering process, and then renders one row at a time (you can adjust this) during the rendering cycle, to reduce frame drops.

第三，这里没有任何东西排除将来支持诸如.addRow(..)之类的方法的可能性.关键是当前的实现不是一个不好的开始，因为它提供了一个基于状态的接口，使开发人员不必担心列表组件如何在状态之间发生变化.

Third, nothing here precludes the possibility of supporting methods like .addRow(..) in the future. The point is that the current implementation isn't a bad start, because it provides a state-based interface that allows developers not to worry about how the list component mutates between states.

这篇关于如何在ListView中添加/删除项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！