reactjs - 如何在 FlatList 上添加新元素，例如聊天应用程序？

Question

有没有办法在 React Native 的 FlatList 堆栈中添加新元素，垂直但彼此底部？就像在聊天应用程序中一样，新消息会添加到旧消息下方。

我已经尝试了 Inverted 属性，但是，它不能满足我想要实现的目标。

      <FlatList
      data={this.state.messages}
      renderItem={({ item }) => (
        <ChatRow mykey={item.messageID}>{item.text}</ChatRow>
      )}
      onEndReache={this.handleChatUpdate.bind(this)}
      vertical="true"
    />

ChatRow 组件

     <View style={styles.chatRow}>
      <Badge warning style={styles.chatRowSender}>
        <Text>{this.props.children}</Text>
      </Badge>
    </View>

Answer 1

反转 FlatList 是朝着正确方向迈出的一步，但您还需要确保保持 this.state.messages 的顺序。您应该为您的消息添加时间戳，并对它们进行排序，以便最早的消息位于列表的前面，如果您有时间戳，您可以通过以下方式实现此目的:

<FlatList
  inverted
  //I use .slice to duplicate the array here because
  //.sort mutates the array and we don't want to mutate state ever
  data={
    this.state.messages.slice().sort(
     (a,b) => a.timestamp.valueOf() - b.timestamp.valueOf(
  )}
/>

现在，带有最新时间戳的消息将出现在列表底部，用户将从底部开始滚动，然后用户可以向上滚动以查看较旧的消息，类似于 SMS 应用。