ListView中如何调用renderRow？

Question

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

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

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

这是我的 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

的列表

Answer 1

renderRow 在更新 ListView 的数据源时触发。所以看起来你的按钮应该更新 this.state.dataSource 而不是 this.state.word.

发件人：https://facebook.github.io/react-native/docs/listview.html

在你的构造函数中，你应该初始化数据源：

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

然后，您可以将DataSource注册到ListView：

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

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

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

这将触发您的 renderRow 功能。

Answer 2

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

To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.

如果您在构造函数中初始化数据源：

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)
    });
}

ListView中如何调用renderRow？

How to call renderRow in ListView?

android

react-native

react-native-listview