状态更改后,React Native ListView行不会重新呈现

Question

React Native ListView:数据源状态更改后,行不会重新呈现.

这是我的代码的简化版本:

render(): {
  return <ListView
    dataSource={this.state.DS}
    renderRow={this.renderRow}/>
}

renderRow(item): {
  return <TouchableOpacity onPress={() => this.handlePress(item)}>
    {this.renderButton(item.prop1)} 
    </TouchableOpacity>
}

renderButton(prop1): {
  if (prop1 == true) {
    return <Text> Active </Text>
  } else {
    return <Text> Inactive </Text>
  }
}

handlePress(item): {
  **Change the prop1 of *item* in an array (clone of dataSource), then**
  this.setState({
    DS: this.state.DS.cloneWithRows(arrayFromAbove)
  })
}

根据Facebook的例子,ListView应该在每次更改数据源时重新呈现.是因为我只是在更改数据源中项目的属性吗？似乎renderRow函数没有重新渲染,但render()函数是从数据源更改.

谢谢.

Answer 1

react足够聪明,可以检测dataSource中的更改以及是否应该重新呈现列表.如果要更新listView,请创建新对象,而不是更新现有对象的属性.代码看起来像这样:

let newArray = this._rows.slice();
newArray[rowID] = {
  ...this._rows[rowID],
  newPropState: true,
};
this._rows = newArray;

let newDataSource = this.ds.cloneWithRows(newArray);
this.setState({
  dataSource: newDataSource
});

您可以在Github上阅读有关类似问题的更多信息

Answer 2

datasource首先，您需要在函数中设置getInitialState。然后，通过调用this.setState({})并传入新数据源来更改数据源。看起来您可能已经走在了上面的正确轨道上，但我已经在此处设置了一个更改ListView数据源的工作示例。我希望这有帮助

https://rnplay.org/apps/r3bzOQ