问题标签 [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 投票
0 回答
54 浏览

react-native - 无限可滚动 FlatList - 在两者之间呈现广告/提示

我正在我们的应用程序中创建电子商务/交易功能,用户将能够以无限滚动的方式查看可用交易,我为此使用平面列表。现在,在帖子之间,我想展示一些提示,例如“发布您自己的广告”、“应用过滤器以获得更好的搜索结果”等。

这些提示的 UI 与普通的广告卡组件不同,因为我想突出显示这些提示。

关于如何实现这一目标的任何建议?

我的解决方案是在数据数组中插入这些提示并添加一个 isTip 布尔值,然后我会在 flatlist 的 renderItem 中检查它。

0 投票
2 回答
101 浏览

arrays - 从 Flatlist 获取嵌套数组的键

我有一个平面列表正在接收具有以下数据结构的friendsArray ...

在此处输入图像描述

我有一个具有 onPress 功能的模式,我想通过 onPress 获取此键的值。我有以下代码,但通常此代码为我提供了我刚刚在平面列表中选择的任何内容的密钥...我想获得更深一层选择的项目的密钥,我该怎么做?

这是 App.js

这是 FriendsModal 中的 FlatList

这是模态中的卡片

0 投票
1 回答
50 浏览

javascript - Largr FlatList react native 不会加载所有项目

这是我在 Mainscreen.js 上的代码:

在我的 Api 上,我有 16 个项目的仓库,但是当应用程序加载时,它只是加载 6 个项目并给我一条消息:

VirtualizedList:您有一个更新缓慢的大型列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件,如 PureComponent、shouldComponentUpdate 等。 {"contentLength": 3766.09521484375, "dt": 1902, "prevDt":第1769章

如何从 API 加载完整的 16 项?

0 投票
1 回答
348 浏览

react-native-flatlist - 将数据添加到响应本机 Web 上的 FlatList,同时保持可见内容

是否可以使用react native web实现 Flatlist ,您可以在其中添加数据同时保持可见内容?

现在,当您添加某些内容时,它会跳到 Flatlist 的顶部。我习惯onContentSizeChange在更新后强制移动滚动位置,但体验很糟糕,因为更新前有时会有很大的延迟。检查此松弛以了解我的意思:https ://snack.expo.io/@divone/prepend-data-to-flatlist-on-web

有人成功地使用 React Native Web 实现了类似聊天的平面列表吗?如果是,如何实现?


编辑:我发现在 react native web 上,当您添加数据时,如果且仅当滚动条不在屏幕顶部时,内容可见性会自动保持。(小吃

所以我的问题仍然存在......即使滚动条一直向上滚动,如何添加数据并保持可见性?

0 投票
1 回答
947 浏览

reactjs - React Native Web,FlatList 扩展页面

我有一些应用程序,看起来像这样

在此处输入图像描述

我需要 FlattList 独立滚动,但它不是扩展页面并与其他所有内容一起滚动。

我尝试过使用布局,更改 'flex' 和 'justify' 参数,但它没有给我任何结果。

唯一迫使 FlatList 自行滚动的是手动更改父 View 的高度,这显然不是解决方案。

在此处输入图像描述

0 投票
1 回答
84 浏览

components - 包装器组件内的 React Native Flatlist 打破了scolling

您好,我的包装器组件有问题。如果我放入 Flatlist 组件中,滚动将不再起作用。我尝试到处使用 flex:1 (在平面列表上,在包装器本身上),但没有任何更改仍然损坏。

我的错误是什么?

我期望正常的滚动行为。

在屏幕中:

任何帮助都不仅仅是感激。谢谢你。

0 投票
0 回答
23 浏览

javascript - 新项目从最近添加的 Flatlist 中消失并返回到该屏幕数据然后自动显示

在此处输入图像描述

我正在尝试redux用作本地存储,我正在尝试添加地板,如您gif在到那个平面列表,我的楼层正在渲染我添加的最近楼层消失,当我回到那个平面列表屏幕上再次返回时,它会自动呈现最近消失的楼层。请帮助我找出问题所在

这是我的代码

在redux中将新楼层添加到现有数组

这是平面列表代码

0 投票
1 回答
235 浏览

react-native - 如何获取 FlatList 中项目的偏移位置?

我想使用 FlatList 方法 scrollToOffset 滚动到我的 FlatList 中的特定项目。我不使用 scrollToIndex 的原因是使用 scrollToIndex 我无法控制滚动的速度。使用 scrollToOffset 我可以使用 Animated 库逐渐更改值。但是,我不知道如何在我的 FlatList 中找到项目的偏移值。

0 投票
2 回答
810 浏览

react-native - 为什么 React Native FlatList 不能在 Android 上运行,但它适用于 Web?

我正在使用 Expo 为后端构建一个带有 AWS 的反应原生应用程序。

我正在尝试使用 FlatList 和 AWS 数据显示朋友列表。该列表有效并且在我的网络浏览器上可见,但由于某种原因,它没有显示在我的 Android 手机上。问题可能是什么?

好友列表.tsx

FriendsListItem.tsx

0 投票
2 回答
202 浏览

react-native - how to change background color of flatlist for array ans elements?

I want to change the background color of flatlist item according to array ans but not able to change background-color of flatlist only 1st item background color is changed