将元素附加到倒置 FlatList 的顶部

Question

我目前正在开发一个 React Native 聊天应用程序，我正在尝试以传统方式显示聊天消息。我正在使用 Expo CLI 和 Socket.io，我的消息 FlatList 如下所示：

<FlatList
    ref={chatRef}
    data={messages}
    keyExtractor={item => item._id}
    showsVerticalScrollIndicator={false}
    renderItem={renderItem}
    onContentSizeChange={onContentSizeChange}
    onEndReachedThreshold={0.2}
    inverted
    onEndReached={loadMore}
    removeClippedSubviews={true}
/>

const onContentSizeChange = () => {
    chatRef.current.scrollToOffset({ animated: true, offset: 0 })
}

我的聊天按预期工作并且显示良好，但每当我发送新消息时，它都会被附加到 FlatList 的顶部。

发送新聊天时，我向 reducer 发送一个操作，并添加如下消息：

{...}
case ADD_MESSAGE: return {
    ...state,
    messages: [...state.messages, action.payload]
}
{...}

我想知道是否可以将新消息附加到 FlatList 的末尾并滚动到它的末尾。

注意：我的消息数组按最新到最旧

的顺序排列

感谢任何可以帮助我的人！

Answer 1

FlatList 有一个scrollToIndex 方法：https://reactnative.dev/docs/flatlist#scrolltoindex

如果不查看更多代码，很难判断您对 props 更改的反应如何，但假设您使用钩子，您可以执行以下操作：

React.useEffect(() => {
  chatRef.current.scrollToIndex({{animated: true, index: messages.length - 1}})
},[messages])

应该滚动到最后一条消息。如果您希望它滚动到第一个，请转到index: 0。

关于消息数组的顺序，您的信息似乎相互矛盾；您说它的顺序是最新的 -> 最旧的，但在您的操作中，您显示 [...state.messages, action.payload] 这似乎会将 newest 消息放在它的末尾。但是，您可以随时切换顺序 ([action.payload,...state.messages])

将inverted 作为您列表中的参数之一：我没有对此进行过实验，但文档中说它“反转滚动方向”。可能需要小心这如何影响您对订购的看法。