Flatlist onContentSizeChange 滚动到不同位置

Question

我有一个使用 Flatlist 组件的 React Native 聊天应用程序，这里我使用代码..

                ref={flatlistRef}
                onContentSizeChange={() => flatlistRef.current.scrollToEnd({})}
                onLayout={() => flatlistRef.current.scrollToEnd({})}
                onScroll={
                    (event) =>
                        onContentOffsetChanged(event.nativeEvent.contentOffset.y)
                }
                keyExtractor={(item, index) => item.id + index.toString()}
                renderItem={({ item, index }) => (
                    <ChatListView
                        index={index}
                        message={item.message}
                        sender={item.senderUserID}
                        msgTime={item.timestamp}
                    />
                )}
            />

现在我在第一次渲染时有三个条件，它会转到最后一条消息，然后当用户滚动到顶部时，新消息会被推送到列表，这里的平面列表不会自动滚动，但当只添加一条消息时，它应该再次滚动最后，请帮助我的代码，当内容大小发生变化时，它总是滚动到结束，这对于用户转到最上面的消息并添加新 30 条消息的情况来说是不需要的，并且由于

而发生这种情况

onContentSizeChange={() => flatlistRef.current.scrollToEnd({})}

但不能针对这种情况进行定制，请帮忙在这里做什么？

Answer 1

每次向列表中添加新项目时，都会调用 onContentSizeChange 。

您可以添加一个条件来检查是否有新消息，然后滚动，如果没有，则不执行任何操作。

但是最好在函数内执行scrollToEnd来发送消息，将新发送的消息添加到数据数组后，您可以执行 flatListRef.scrollToEnd({animated: true}) 但是你应该将scrollToEnd包装在setTimeout中，以便flatlist可以计算新的大小。

function sendMessage(message) {
    await sendNewMessageAPI(message).then(() => {
        setTimeout(() => 
             flatListRef?.current.scrollToEnd({animated: true})
        , 500)
    })