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应用程序的较旧消息。

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

1 个答案: