Reactjs 如何在平面列表中添加新元素，如聊天应用程序？

有没有办法在React Native中的

FlatList

堆栈中添加新元素，垂直但彼此位于底部？就像在聊天应用程序中一样，新消息可以添加到旧消息的下方

我已经尝试了反向属性，但是，它不符合我想要实现的目标

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

(
{item.text}
)}
onEndReache={this.handleChatUpdate.bind（this）}
垂直=“真”
/>

聊天室组件

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

{this.props.children}

反转平面列表是朝着正确方向迈出的一步，但您还需要确保维护

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(
  )}
/>

如何在添加新消息时添加动画？