将一个元素附加到倒置的 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 的顶部。

发送新聊天时，我向我的减速器发送一个动作，并添加如下消息：

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

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

注意：我的消息数组按 newest 到 oldest

排序

感谢任何能帮助我的人！

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 作为您列表的参数之一：我还没有试验过这个，但文档说它“反转滚动方向”。可能还需要注意这如何影响您对订购的看法。

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

Append an element to the top of an inverted FlatList

chat

socket.io

react-native

flatlist