React Native 如何在屏幕打开时自动滚动到未读邮件?

tv6aics1  于 2023-05-01  发布在  React
关注(0)|答案(2)|浏览(181)

我有一个聊天消息线程,我希望屏幕自动滚动到第一个未读的消息,只要它加载,而不是有列表首先滚动到底部,然后到消息。
我在GitHub的一个issue thread中尝试了这个解决方案,但问题是用户仍然可以看到滚动到底部,即使我设置了animate: false
我使用ScrollView实现了这一点,但是如果给定的线程有很多消息,屏幕加载非常慢。我想利用FlatList的性能,但无法使其按我想要的方式工作。有什么建议吗?

dgsult0t

dgsult0t1#

您应该使用FlatList的'initialScrollIndex'属性(https://reactnative.dev/docs/flatlist#initialscrollindex)。如果在初始渲染时遇到问题,还可以考虑使用“getItemLayout”或“onScrollToIndexFailed”(检查Flatlist Doc)。虽然它可能涉及复杂的实现,但绝对值得!

disho6za

disho6za2#

要自动滚动到FlatList组件中的第一条未读邮件,请使用initialScrollIndex prop。此 prop 允许您设置FlatList首次呈现时应可见的项的索引。
例如-

//assuming index is the index of the first unread message  
<FlatList 
    data={data}
    renderItem={({ item }) => <Text>{item.text}</Text>}
    initialScrollIndex={index}
    />

也可以添加getItemLayout prop,以便通过为每个项提供高度和偏移量来优化FlatList的渲染性能。

相关问题