How to add/Delete item into 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']), };

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?

回答1:

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) is a bit misleadingly named because doesn't just create a clone of the data as the name suggests.

• 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.

• 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:

• 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.

• 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.

• 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.

回答2:

If you look at the expanded Movies example from the React Native tutorial, it implements searching which fetches new movies from a remote API. That means that every search will refresh the datastore, effectively adding or removing items. The exact place this happens is here:

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

So it looks like your way is the recommended method.

来源：https://stackoverflow.com/questions/29351259/how-to-add-delete-item-into-listview