3

我ListView在 react-native 中使用。而且我想ListView按功能更新，所以我this.setState是这样使用的。

<Button onPress={()=>this.setState({word:this.state.word})}>Btn</Button>

按下按钮后，render()方法有效，但renderRow方法无效。所以ListView行不通。我该如何解决？

这是我的列表视图

<ListView
    datasource={this.state.dataSource}
    renderRow={this._renderRow.bind(this)}/>

和我的 _renderRow

_renderRow(param){
    return(
        <View>{param.word.includes(this.state.word)&&<Text>{param.word}</Text>}</View>
    );
}

我想在按下按钮时更新列表视图，并显示 param.word 包含 this.state.word 的列表

4

2 回答 2

1

renderRow更新 ListView 的 DataSource 时触发。因此，您的按钮似乎应该更新this.state.dataSource而不是this.state.word.

来自：https ://facebook.github.io/react-native/docs/listview.html

在您的构造函数中，您应该初始化 DataSource：

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

然后，您可以使用 ListView 注册 DataSource：

render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
}

当您的数据发生变化时，您可以更新 DataSource：

onDataChanged(newData) {
  var ds = this.state.dataSource.cloneWithRows(newData);
  this.setState({dataSource: ds});
}

这将触发您的renderRow功能。

于 2016-05-24T09:01:55.917 回答
0

不要错过对 ListView 组件所需的 ListViewDataSource 属性的 cloneWithRows 调用。 文档说：

要更新数据源中的数据，请使用 cloneWithRows（如果您关心部分，则使用 cloneWithRowsAndSections）。数据源中的数据是不可变的，不能直接修改。克隆方法吸入新数据并为每一行计算一个差异，以便 ListView 知道是否重新渲染它。

如果您在构造函数中初始化了 DataSource：

constructor(props) {
    var ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2});
    this.state = { datasource: ds.cloneWithRows(['A', 'B', 'C']) };
}

您的更新功能可能如下所示：

fetchData() {
    //... fetching logic
    var items = ['D', 'E', 'F'];
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items)
    });
}
于 2016-05-24T09:45:24.950 回答