Question

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

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

我已经将我的数据组件实现为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}
            ....

如何从数据集的末尾初始加载Flatlist

1 个答案: