如何修复底部的 React Native ScrollView 默认值

Question

我正在尝试用 React Native 构建一个 Chat App。

在聊天屏幕中，每条发送和接收的消息都有一个 ScrollView。

但是，每次我离开屏幕再返回时，ScrollView 的默认值都在顶部。我在渲染后写了一个 scrollToEnd 的函数，但那是 After Rendered，我需要在底部 设置 ScrollView 在它实际显示之前 .

我试过了（但用户可以看到它一呈现就滚动）：

const scrollToBottom = () => {
    scrollEl.current.scrollIntoView({ behavior: 'smooth'})
}

useEffect(() => {
    scrollToBottom()
}, [scrollEl, loading, chatHistory])

return(
    <ScrollView bottom={0} w="100%" bg="blueGray.100" inverted>
        <VStack flex={1} w="100%" id="VStack">
            {!loading && chatHistory.chats[roomId] && chatHistory.chats[roomId].length > 0 && chatHistory.chats[roomId].map((chat, index) =>
                <ChatItem type={chat.type}
                    text={chat.text}
                    fromSelf={chat.fromSelf}
                    key={index}
                />
            )}
            <Box ref={scrollEl} />
        </VStack>                
    </ScrollView>
)

我试过：

将scale: -1设置为CSS，实际上是将整个屏幕颠倒过来。
因此，我必须反转每条消息以将它们反转回正常的一面。
同时，鼠标滚动和屏幕滑动完全相反

有什么解决办法或建议吗？

谢谢！

Answer 1

我不推荐你使用 FlatList 因为渲染列表的性能 https://reactnative.dev/docs/flatlist

同样在 FlatList 中，您可以实现您想要的效果

https://reactnative.dev/docs/flatlist#initialscrollindex

即使你想要比 FlatList 更好的库句柄列表下的性能 https://github.com/Flipkart/recyclerlistview

如何修复底部的 React Native ScrollView 默认值

How to fix React Native ScrollView default at bottom

chat

scrollview

reactjs

react-native

native-base

我试过了（但用户可以看到它一呈现就滚动）：

我试过：

有什么解决办法或建议吗？