1

我目前正在开发一个 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 的末尾附加新消息并滚动到它的末尾。

注意：我的消息数组是按最新到最旧的顺序排列的

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

4

1 回答 1

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]了哪个似乎将最新消息放在了它的末尾。但是，您可以随时切换顺序 ( [action.payload,...state.messages])

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

于 2021-01-15T01:36:54.773 回答