将本机平面列表初始滚动到底部 [英] React native flatlist initial scroll to bottom

问题描述

我正在尝试使用< Flatlist />

赞WhatsApp和其他聊天应用程序，消息从底部开始。

Like WhatsApp and other chat apps, the messages start at the bottom.

从API提取消息后，我调用

After fetching the messages from my API, I call

this.myFlatList.scrollToEnd({animated: false});

但是它滚动到中间的某个位置，有时滚动到底部的项目较少，有时却什么也不做。

But it scrolls somewhere in the middle and sometimes with fewer items to the bottom and sometimes it does nothing.

我最初如何滚动到底部？

How can I scroll initially to the bottom?

我的聊天消息的高度不同，所以我可以

My chat messages have different heights, so I can't calculate the height.

推荐答案

我遇到了类似的问题。如果您希望聊天消息从底部开始，则可以将 inverted设置为true，并以相反的方向显示消息和时间标记。

I had similar issue. If you want to have you chat messages start at the bottom, you could set "inverted" to true and display your messages and time tag in an opposite direction.

在这里检查FlatList的反转属性。 https://facebook.github.io/react-native/docs/flatlist#inverted

Check here for "inverted" property for FlatList. https://facebook.github.io/react-native/docs/flatlist#inverted

如果您希望聊天消息从顶部开始，这就是我想要实现的目标。我无法在FlatList中找到解决方案，因为正如您所说，高度不同，所以我无法使用getItemLayout来使 scrollToEnd的行为发生奇怪的变化。

If you want to have you chat messages start at the top, which is what I am trying to achieve. I could not find a solution in FlatList, because as you said, the heights are different, I could not use getItemLayout which make "scrollToEnd" behave in a strange way.

我遵循@My Mai提到的方法，改用ScrollView并在setTimeout函数中执行scrollToEnd（{animated：false}）。此外，我添加了一个状态来隐藏内容，直到scrollToEnd完成为止，这样用户就不会看到任何滚动。

I follow the approach that @My Mai mentioned, using ScrollView instead and do scrollToEnd({animated: false}) in a setTimeout function. Besides, I added a state to hide the content until scrollToEnd is done, so user would not be seeing any scrolling.

这篇关于将本机平面列表初始滚动到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！