问题标签 [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 回答
22 浏览

reactjs - 从 Firestore 调用 ReactNative FlatList 数据 - 无法做到

我能够对从 randomuser.org 数据集中提取信息的 FlatList 进行硬编码。但是,我完全无法从我的 Firestore 数据库中提取任何数据——它只是在 Expo 中显示一个空白页面,而没有任何错误警告。我已经坚持了几天了,我搜索得越多,我似乎就越困惑!我是编码新手,所以如果这是一个非常基本的问题,我深表歉意。我只使用 App.js 文件中的 FlatList 使我的代码图片保持简单 - 但只要我尝试从 Firestore 返回数据,它就只是空白,无论我做什么。谢谢

图 1

图 2

0 投票
2 回答
166 浏览

react-native - 使用 redux 时如何重新渲染 FlatList React Native

我是 React Native 的新手,我在使用 FlatList 时遇到了问题。我将 extraData 分配给 redux 值,但在 redux 更新时它不会重新渲染 FlatList。我想我应该把它分配给一个本地状态,但是我得到了太多的重新渲染错误。非常感谢任何帮助我的人!下面是我的代码

0 投票
1 回答
64 浏览

react-native - 是否有禁用父滚动的最佳方法

我试图在子组件中向上/向下滚动时禁用父滚动(子组件是水平的FlatList)。有没有最优的方法?

0 投票
1 回答
516 浏览

react-native - 带有视频流的 Flatlist、React Native、Expo 在 Android 上遇到内存问题

带有平面列表和每行一个视频的 Expo 应用程序。(参见 TikTok)

  • 世博 SDK 40.0.0
  • Flatlist - 优化 (shouldComponentUpdate) + 查看道具,最多同时渲染 2 行。没有在视野中的线被干净地卸载。只有视野中的视频运行,第二个暂停。
  • 世博-AV
  • Google-Firebase Cloudstorage:视频也由应用生成和上传。

问题:最迟在渲染第 4 个视频后,应用程序在 Android 上遇到内存问题。从一开始就在 IOS 设备上没有问题。错误消息/警告:VirtualizedList:您有一个更新缓慢的大列表....之后,视频很长一段时间都没有加载,只有几分钟后两个要渲染的视频才会再次出现.

组件结构:

  • VideoStream - React.Component => 所有可用并存储在 Redux 存储中的数据。

  • Flatlist => 仅通过了 7 条记录,请参阅 flatlist 道具

  • 项目 => 通过渲染项目

  • VideoItem - React.Component> => 包括。手势手柄,背景

  • 可触摸不透明度>

  • 视频 => 世博会-AV

测试:

  • Stream 和 loadAsync => 相同的行为。
  • 替代公共数据源 => 相同的行为
  • 没有要加载的视频 => 没问题

假设:

  • Android - 和 Expo-AV:自 2018 年左右以来,在没有问题的 IOS 上经常发现堆栈,不幸的是,基于 Expo 播放器和 Android 之间的连接,到目前为止还没有解决方案
  • 上传 - 哪些错误/优化是可能的
  • 下载 - 哪些错误/优化是可能的?

经过 10 天的优化和寻找原因,现在我寻求帮助.... 非常感谢。

0 投票
1 回答
1587 浏览

react-native - React Native - 通过单击flatList中的项目导航到详细信息屏幕?

我正在使用 flatList 从 API 中呈现名称。然后,我试图让每个项目都可点击并显示有关他们点击的那个人的更多信息,但我不知道该怎么做。我在 Stackoverflow 上读到的一些包含示例链接的帖子现在已失效且无法使用。

我正在使用 DrawerNavigation,我会尽力包含所需的代码,我的所有屏幕都在 app.js 文件中。

应用程序.js

每个屏幕在下面都有自己的功能,这里是 PlayerScreen 示例,它包含由 flatList 呈现的列表。

- -编辑 - -

我的平面列表目前看起来像这样

那么现在我如何处理该 onPress 以导航到将显示有关所选名称的更多信息的组件?

任何帮助表示赞赏,干杯,N

0 投票
0 回答
119 浏览

react-native - stickyHeaderIndices 与 FlatList 数据索引不正确匹配

我正在尝试使用<FlatList>'ssnapToOffsets和复制这种效果stickyHeaderIndices,其中卡片相互滑动并粘在顶部。

https://i.imgur.com/EY37RKS.gifv

这是我的代码:

实际上没有任何东西最终会粘在顶部。snapToOffsets为我工作,但stickyHeaderIndices根本不工作。

如果我尝试将硬编码的数组传递给stickyHeaderIndiceslike [0,1,2,3...20],那么中间某处的一个随机帖子最终会粘住,而其他任何东西都不会。

我检查了 SO 和 Github 上的每个搜索结果,但没有任何效果,我已经尝试了好几天。请帮忙!

0 投票
2 回答
544 浏览

arrays - 在平面列表中显示多个复选框

我正在使用带有复选框的平面列表。该复选框应该被选中,即 true,当我取消选中它时,它应该将所有选中的复选框推送到数组。然后我需要实现 api,我会在响应中得到取消选中的项目,然后我需要在 flatlist 中显示。which item.id 将出现在需要取消选中 id 的响应中。

代码是

和组件是

当我单击提交时,我需要使用取消选择复选框传递数组,并且在点击该 api 后将点击另一个 api,它将返回未选中复选框的结果,所以我的问题是我如何显示未选中的复选框来自 api第二次。

在此处输入图像描述

而且我最初需要在所有复选框上显示勾号。

0 投票
0 回答
96 浏览

react-native - Flatlist 在 TouchableWithoutFeedback 中不起作用

我有一个关闭键盘的组件。然后我用这个包裹我的整个组件,所以每当我在 TextInput 之外点击时,键盘就会被关闭。但问题是,在我的其他组件中,我有一个 Flatlist,它根本不使用 TouchableWithoutFeedback 滚动。任何建议将不胜感激,因为我几个小时都没有找到解决方案!谢谢!

0 投票
2 回答
3344 浏览

react-native - 如何在 React Native 中使用 FlatList 滚动到按钮上的下一个项目?

我有一系列月份,我使用水平 FlatList 来显示月份。我希望使用 2 个按钮来更改月份,这些按钮是向前按钮以递增顺序更改月份,即从一月到二月等等,以及一个后退按钮以向后更改月份,即从一月到十二月。

在此处输入图像描述 我怎样才能让按钮这样做。monthName 下面是一个包含所有月份名称的数组。

0 投票
0 回答
161 浏览

react-native - React Native FlatList 未在实时聊天应用程序中显示最后一条消息

我正在尝试使用本机反应制作实时聊天应用程序。这是我遇到的问题。理想情况下,当发送新消息时,消息列表应该向上滚动一点以显示新消息,就像其他著名的聊天应用程序一样。但是我的情况是这样的,列表是一个消息滞后。假设列表底部的消息是“你好”,当我发送另一条消息“世界”时,新消息“世界”不显示。消息“你好”仍然在底部。当我发送另一条消息“为什么”时,列表向上滚动并出现消息“世界”。但是“为什么”的消息仍然不可见。当我手动滚动列表时,会出现最后一条消息。

这是代码:

谁能告诉我我的代码有什么问题?谢谢。