我正在try 使用<Flatlist />创建React native聊天

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

从API获取消息后,我调用

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

但它会在中间滚动,有时底部的项目更少,有时什么也不做.

如何在开始时滚动到底部?

我的聊天信息有不同的高度,所以我无法计算高度.

推荐答案

我也有类似的问题.如果你想让聊天信息从底部开始,你可以将"反转"设置为true,并以相反的方向显示你的信息和时间标签.

在这里查看FlatList的"反向"属性.https://facebook.github.io/react-native/docs/flatlist#inverted

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

我遵循@My Mai提到的方法,使用ScrollView,在setTimeout函数中执行scrollToEnd({animated:false}).除此之外,我不会添加任何内容,直到用户完成滚动.

React-native相关问答推荐

axios 在react native 中给出 [AxiosError: Network Error]

react native 如何更新倒置平面列表的数组中的项目

如何在 react-native 中刷新 Flatlist 数据?

从 React 原生 Js 代码调用 Android Native UI 组件方法

可能的未处理promise 拒绝(id:0):错误: "getLoginData" is read-only

如何从 Firebase 获取所有设备令牌?

更改整个 React Native App 的语言

如何在 react-native 中获取组件的大小?

缺少请求的请求令牌

React Native 中的全屏图像

如何解决react-navigation 问题:Animated: `useNativeDriver` is not supported because the native animated module is missing.?

React Native 中的原生广告

使用 React-Native Navigation 传递数据

React Native Build Error on IOS - typedef 用不同类型重新定义('uint8_t'(又名'unsigned char')与'enum clockid_t')

zoom 到指定的标记 react-native-maps

你好世界! React Native 程序在 Mac 上抛出Could not parse the simulator list output

如何在 React Native 上隐藏 createStackNavigator 的标题?

如何在react-native中将文本放置在图像上?

React Native 中的 CSS 三角形

在 react-native 中使用捏拉zoom 的可滚动图像