React Native，从 ListView 到 FlatList答案

【问题标题】：React Native, from ListView to FlatListReact Native，从 ListView 到 FlatList
【发布时间】：2018-09-02 16:43:47
【问题描述】：

我想用 React native 和 firebase 做一个应用程序，并带有一个提要。新帖子、修改帖子和无限滚动。在尝试使用 FlatList 没有成功后，我设法使用 ListView 做到了：

<ListView
      automaticallyAdjustContentInsets={false}
      initialListSize={1}
      dataSource={this.state.dataSource}
      renderRow={this.renderItem}
      renderFooter={this.renderFooter}
      onEndReached={this.onEndReached}
      onEndReachedThreshold={1}
/>

与

ComponentDidMount() { firebase.database().ref(`/posts/${this.props.auth.group}`)
.limitToLast(this.state.counter)on('value', async snapshot => {
   if (snapshot.val()) {
     this.setState({ 
       dataSource: 
       this.state.dataSource.cloneWithRows(_.reverse(_.toArray(snapshot.val()))) })
   }

和

onEndReached = () => {
   this.setState({ counter: this.state.counter + 7 });
   this.setState({ isLoading: true });
   firebase.database().ref(`/posts/${this.props.auth.group}`).off();


  firebase.database().ref(`/posts/${this.props.auth.group}`).orderByChild('updatedAt').limitToLast(this.state.counter+7).on('value',
 (snapshot) => {
   if (snapshot.val()) {
     this.setState({ isEmpty: false });
     this.setState({
       dataSource: this.state.dataSource.cloneWithRows(_.reverse(_.toArray(snapshot.val()))),
     });
   }
  }
}

可以用 FlatList 做同样的事情吗？

如果没有使所有帖子重新呈现（和闪烁）并同时更新新帖子，我无法正确更新 this.data（我将其提供给 flatList）。

【问题讨论】：

标签： firebase react-native firebase-realtime-database react-native-flatlist react-native-listview

【解决方案1】：

你可以使用 FlatList 的 extraData 属性实现同样的效果。

https://facebook.github.io/react-native/docs/0.56/flatlist#extradata

【讨论】：

感谢您的回答！能不能说的详细点，我不明白怎么用
您必须将 prop 作为 extraData={this.state} 传递。如果状态数据发生任何变化，它将重新呈现平面列表。