react-native - 将 native 平面列表初始滚动到底部

标签 react-native chat react-native-flatlist

我正在尝试使用<Flatlist />在React native中创建聊天

像WhatsApp和其他聊天应用程序一样,消息从底部开始。

从我的API获取消息后,我调用

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


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

最初如何滚动到底部?

我的聊天消息具有不同的高度,所以我无法计算高度。

最佳答案

我有类似的问题。如果要让聊天消息从底部开始,则可以将“ inverted”设置为true,然后以相反的方向显示消息和时间标记。

在此处检查FlatList的“倒置”属性。 https://facebook.github.io/react-native/docs/flatlist#inverted

如果您想让聊天消息从顶部开始,这就是我想要实现的目标。我在FlatList中找不到解决方案,因为正如您所说,高度不同,因此我无法使用getItemLayout来使“ scrollToEnd”以一种奇怪的方式运行。

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

关于react-native - 将 native 平面列表初始滚动到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48477500/

相关文章:

react-native - 如何在 React Native android 应用程序中提供 z-index 属性

react-native - 可按在 react 原生 android 中不起作用

react-native - React Native-Expo Audio停止所有声音

Java 实时聊天开源

ios - 使用 Xamarin.Forms 更新 ListView 文本绑定(bind)会导致 iOS 上闪烁

javascript - 如何实现从 FlatList 中删除项目的方法?

javascript - react FlatList renderItem

javascript - axios报错转换后的数据必须是字符串、ArrayBuffer、Buffer或Stream

javascript - 任何人都知道一个好的容错聊天应用程序和/或 API

reactjs - react native ,Redux : Fetch more/Load more