React Native,从 ListView 到 FlatList

React Native, from ListView to FlatList

我想用 React native 和 firebase 做一个带有 feed 的应用程序。有新帖子、修改后的帖子和无限滚动。在尝试使用 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),除非重新呈现(和闪烁)所有帖子并同时更新新帖子。

您可以使用 FlatList 的 extraData 属性实现相同的效果。

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