javascript - 如何从数据集的末尾开始加载 Flatlist

Question

我正在尝试使用平面列表显示聊天应用程序的所有消息，但我一直遇到问题。当超过 20-30 条消息并且性能开始变慢时，flatlist 的行为非常奇怪。

我注意到这个问题的部分原因是，当第一次加载消息室时，平面列表将从头开始，然后一直滚动到消息列表的底部，加载所有消息。

我已将我的数据组件实现为 PureComponent 以尝试提高性能，但它的行为似乎仍然很奇怪。有没有一种方法可以让我最初只加载平面列表的末尾，然后在向上滚动时加载其余消息？

这是我的平面列表代码:

<FlatList
  data={this.state.messages}
  ref={ref => this.flatList = ref}
  scrollEventThrottle={16}
  onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
  onLayout={() => this.flatList.scrollToEnd({animated:true})}
  keyExtractor = {this._keyExtractor}
  renderItem={this._renderItem}
/>

_renderItem = ({item}) => (
  <TextBubble 
    contents={item.contents}
    timestamp={item.timestamp}
    sender={item.sender}
    index={item.index}
    messages={this.state.messages}
    currentUser={this.state.currentUser}
    day={this.state.day}
    weekdays={this.state.weekdays}
  />
);

_keyExtractor = (item) => JSON.stringify(item.timestamp);

这是我在 componentDidMount() 中从 Firebase 获取所有消息的地方:

let db = firebase.database();
let ref = db.ref("/rooms/" + roomNo + "/messages");
//the messages
let childData = [];
ref.on('value', function(snapshot) {
  // firebase.database().ref('/users/'+username+"/rooms/"+roomNo+"/unread").set(false)
  childData = [];
  snapshot.forEach(function(childSnapshot) {
    childData.push(childSnapshot.val())
  });
  this.setState({
    messages: childData
  })
}.bind(this));

我试过反转数组，然后反转平面列表，但这会导致各种奇怪的行为，而且仍然无法从下往上加载。

Answer 1

使用属性 inverted 来反转显示 flatListData:

          ......
       <FlatList
            inverted
            data={this.state.messages}
            ref={ref => this.flatList = ref}
            scrollEventThrottle={16}
            ....