问题标签 [react-native-flatlist]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1167 浏览

react-native - 组件顶部的 FlatList onEndReached?

我想从我的应用程序中删除我的“加载更多”按钮并实现“无限滚动”类型的功能,它允许用户向上滚动浏览他们的消息历史记录并根据请求下载旧消息。

由于 ListView 被贬低,我正在转向 FlatList 组件,并且我试图找出一个很好的实现来确定用户何时滚动到页面顶部。由于 FlatList 总是从列表顶部开始,我们希望确保仅onTopReached在用户滚动列表时调用。

我该怎么办?

开放源代码实现的链接将不胜感激,但应列为评论而不是答案。使用 ListView 的实现是无关紧要的。

0 投票
5 回答
6673 浏览

react-native - 当行是可变高度时,FlatList 的滚动问题

我正在使用FlatList每行可以具有不同高度的位置(并且可能包含文本和来自远程服务器的零个或多个图像的混合)。

我不能使用getItemLayout,因为我不知道能够计算的每一行(也不是前一行)的高度。

我面临的问题是我无法滚动到列表的末尾(当我尝试时它会跳回几行)并且我在尝试使用时遇到问题scrollToIndex(我猜测是因为我错过了getItemLayout)。

我写了一个示例项目来演示这个问题:

0 投票
2 回答
11457 浏览

react-native - FlatList 组件生命周期方法 ScrollToIndex ScrollToEnd 等

我正在使用新FlatList组件并希望在生命周期方法中使用ScrollToIndex(或ScrollToEnd),例如componentDidMount.

我有一个比方说 100 个项目的数组,我不想从第一个项目开始渲染,而是在开始时渲染。假设在第 50 项。当FlatList一次只显示一个项目时,它可以按照此处所述的一些技巧工作:https ://github.com/facebook/react-native/issues/13202

此代码段scrollToIndex在调用.componentDidMount

但是当我使用FlatList视图包含 3x3 网格的地方时,我根本无法让它运行。当我使用scrollToIndex并且索引超出指定的 propsinitialNumToRender时,我只会收到一个scrollIndex out of range $ID我无法理解的错误。提供的数据数组包含所有,例如 100 项。当我使我们成为 时scrollToEnd,它只会在两者之间的某个地方停止,而不是在最后。对我来说,它看起来像某种错误,我不知道如何在初始渲染后滚动到 $X 项目。你能帮助我吗?

我很感激任何帮助或评论。

我在 iOS 和 Android(模拟器和设备)上尝试了 React-Native v0.43.0 和 v0.44.0,它总是一样的。

0 投票
0 回答
2841 浏览

react-native - Flex Grow 无法在 React Native 中使用 FlatList

我正在尝试使用 FlatList 进行 flexGrow,但它无法与 ListView 一起使用。即使屏幕上有空间,这些项目也会以 minWidth 值呈现。示例代码:

0 投票
1 回答
17650 浏览

javascript - React-native:FlatList 获取要滚动的引用

我目前正在使用 react native 构建一个应用程序:

这是我的平面清单:

在这个函数中,我想滚动到一个特定的索引:

但我有一个错误:无法读取未定义的属性“scrollToIndex”

0 投票
8 回答
113830 浏览

react-native - 在 Android 的 FlatList (React Native) 中隐藏滚动条

我正在尝试在我的应用程序中使用 FlatList (React-native)。我水平使用它,可以看到滚动条。ScrollView 中有一个选项可以隐藏滚动条,但 FlatList 中没有。有没有人能够以其他方式隐藏它。我尝试使用父子容器的解决方案(隐藏滚动条,但仍然可以滚动)但没有奏效。

0 投票
5 回答
38227 浏览

react-native - 显示键盘后滚动到 FlatList 的末尾

我在 KeyboardAvoidingView 中有一个 FlatList。显示键盘时,我想滚动到 FlatList 的末尾。

我正在监听确实被触发的“keyboardDidShow”事件,但它可能被触发得太早,因为在调用 scrollToEnd 后 FlatList 没有滚动到末尾。

我已经查看了 KeyboardAvoidingView 的 onLayout 事件,但是仅将 onLayout 事件设置为触发函数似乎会阻止 KeyboardAvoidingView 在显示键盘时调整其大小。

代码:

0 投票
2 回答
1942 浏览

android - React Native Flatlist 选择过滤器不刷新

在这里反应本地新手。我有一个实验程序通过 Flatlist 和顶部的 Select 标题显示值。当我尝试从下拉列表中选择值时,Flatlist 在首次加载时显示正常,Flastlist 不显示当前数组数据。任何想法为什么它不加载?

我很感激任何想法,我坚持了几天。我想我需要一些帮助。谢谢!

=== 更新 JSON 数据文件已添加

文件名:data.js

更新---我已经弄清楚如何显示数组值。我调整下面的平面列表并通过执行 set.state 更新数组值

0 投票
0 回答
203 浏览

listview - 是否可以使 sectionlist 行中子视图的 zIndex 高于其他行?

嗨,我正在尝试制作一个类似工具提示的 chatBubble UI,它也可以在可滚动视图中使用(如 flatlist、sectionlist、listview...)

这是我的 SectionList 的 renderItem 代码。

我将在单击按钮时通过 Animated.timing 使 ToolTipComponent 可见,并在几毫秒后弹出。ToolTipComponent 的高度远大于每一行的高度,因此它必须超出行的边界并覆盖下一行。但是我发现每一行的 ToolTipComponent 的底部都被下一行覆盖了。我认为行是按系列呈现的,因此下一个呈现的行可能会覆盖上一行的子视图。

是否可以使一行的子视图超出下一行覆盖的边界?

0 投票
1 回答
4435 浏览

react-native - Performance issue of flatList in react native

I've tried flatlist but it has a bit of performance issues in android.

  1. As I scroll down, it loads the list. But afterwards, it shows blank while scrolling upwards.

  2. After reaching the end of the screen, it stops for a while and then loads the datas. Why is it not showing loader (activity indicator) at the bottom? Why is onEndReached and onEndReachedThreshold not working?

Plz have a look at the video here

https://youtu.be/5tkkEAUEAHM

My code: