React-Native更新列表视图数据源

我有一个iOS应用程序,我正在与反原生。 Game类包含一个ListView组件。 我在构造函数中设置状态并包含一个dataSource 。 我现在有一个硬编码的数据数组,我存储在不同的状态属性( this.state.ds )。 然后在componentDidMount我使用cloneWithRows方法将我的this.state.ds克隆为视图的dataSource。 就ListViews而言,这是非常标准的,并且运行良好。 这里是代码:

 /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('react-native'); var { StyleSheet, Text, View, ListView, TouchableHighlight } = React; class Games extends React.Component{ constructor(props){ super(props); var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 != r2 }); this.state = { ds:[{AwayTeam: "TeamA", HomeTeam: "TeamB", Selection: "AwayTeam"},{AwayTeam: "TeamC", HomeTeam: "TeamD", Selection: "HomeTeam"}], dataSource:ds, } } componentDidMount(){ this.setState({ dataSource:this.state.dataSource.cloneWithRows(this.state.ds), }) } pressRow(rowData){ var newDs = []; newDs = this.state.ds; newDs[0].Selection = newDs[0] == "AwayTeam" ? "HomeTeam" : "AwayTeam"; this.setState({ dataSource: this.state.dataSource.cloneWithRows(newDs) }) } renderRow(rowData){ return ( <TouchableHighlight onPress={()=> this.pressRow(rowData)} underlayColor = '#ddd'> <View style ={styles.row}> <Text style={{fontSize:18}}>{rowData.AwayTeam} @ {rowData.HomeTeam} </Text> <View style={{flex:1}}> <Text style={styles.selectionText}>{rowData[rowData.Selection]}</Text> </View> </View> </TouchableHighlight> ) } render(){ return ( <ListView dataSource = {this.state.dataSource} renderRow = {this.renderRow.bind(this)}> </ListView> ); } } var styles = StyleSheet.create({ row:{ flex:1, flexDirection:'row', padding:18, borderBottomWidth: 1, borderColor: '#d7d7d7', }, selectionText:{ fontSize:15, paddingTop:3, color:'#b5b5b5', textAlign:'right' }, }); module.exports = Games 

我遇到的问题来自pressRow方法。 当用户按下该行时,我希望select更改,并在设备上呈现更改。 通过一些debugging,我已经注意到,即使我正在改变newDs数组中的对象的Selection属性,相同的属性在this.state.ds的对象改变,并类似地改变this.state.dataSource._dataBlob.s1的对象this.state.dataSource._dataBlob.s1 。 通过进一步的debugging,我发现由于那些其他数组已经改变,ListView的DataSource对象不能识别这个改变,因为当我设置状态并rowHasChanged ,它所克隆的数组与数组this.state.dataSource._dataBlob.s1匹配this.state.dataSource._dataBlob.s1 ,所以它看起来不像一个变化,不会重新渲染。

有任何想法吗?

尝试这个:

 pressRow(rowData){ var newDs = []; newDs = this.state.ds.slice(); newDs[0].Selection = newDs[0] == "AwayTeam" ? "HomeTeam" : "AwayTeam"; this.setState({ dataSource: this.state.dataSource.cloneWithRows(newDs) }) } 

这应该创build一个数组的副本,然后可以在this.state.ds独立于原始数组进行this.state.ds

如果有人像我一样遇到这个问题,这里是完整的解决scheme。

基本上,似乎有一个ListView组件的错误,你需要重buildListView的数据源中改变的每个项目来重绘它。

以下是一个工作示例: https : //rnplay.org/apps/GWoFWg

首先,创build数据源和数组的副本并将其保存为状态。 在我的情况下, foods是arrays。

 constructor(props){ super(props); var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }); this.state = { dataSource: ds.cloneWithRows(foods), db: foods, }; } 

当你想改变数据源中的东西时,把你保存到状态的数组复制一份,用改变来重build项目,然后保存新的数组,使其回到状态(db和datasource)。

 onCollapse(rowID: number) { console.log("rowID", rowID); var newArray = this.state.db.slice(); newArray[rowID] = { key: newArray[rowID].key, details: newArray[rowID].details, isCollapsed: newArray[rowID].isCollapsed == false ? true : false, }; this.setState({ dataSource: this.state.dataSource.cloneWithRows(newArray), db: newArray, }); } 

反应是足够聪明的来检测dataSource的变化,如果列表应该重新呈现。 如果你想更新listView,创build新的对象,而不是更新现有对象的属性。 代码看起来像这样:

 let newArray = this._rows.slice(); newArray[rowID] = { ...this._rows[rowID], Selection: !this._rows[rowID].Selection, }; this._rows = newArray; let newDataSource = this.ds.cloneWithRows(newArray); this.setState({ dataSource: newDataSource }); 

你可以在Github上阅读更多关于类似的问题