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

javascript - React Native 中的 FlatList 实现 - renderItem 功能不清楚?- 未定义的属性

我正在尝试实现一个平面列表,它显示来自数组的图像(我从我的 firebase RTDB 中提取,但这没关系)。我实现 FlatList 的代码在这里:

和图像数组(poi_obj.images)我已经格式化如下:

我 100% 肯定这是它的格式,因为我在尝试 FlatList 定义之前将它记录到控制台。type 属性是为了让我以后可以添加视频支持,但现在这并不重要。

我收到一个错误,表明image.data未定义。阵列中暂时只有一个图像用于测试目的。

我的理解:文档有点不清楚,但似乎在遍历图像列表时,它将执行renderItem使用数组的每个项目下定义的函数(在我的情况下填充{ image }参数)。提到了一个关键属性,但似乎这是可选的,如果省略,库将默认使用索引(本质上是按从索引 0 到末尾的顺序遍历数组,并渲染每个项目)。我尝试了多种实现关键属性的方法,但我找不到导致定义的“数据”属性的解决方案。

也许对 react native/expo 中的 FlatLists 有更好理解的人可以在这里帮助我?我已经查看了 StackOverflow 上的几乎每个相关线程,文档对于 key 属性的使用有些不清楚,因为它与数组迭代有关。

0 投票
2 回答
41 浏览

reactjs - Flat List renderItem is called when there is any state change not related to flatlist data?

Whenever my state changes the flatlist render Item is getting called. I have printed some logs while developing. Now I am using key extractor then why is my flatlist render item getting called. Can explain why is this happening.Now whenever my state changes my flatlist render Item is getting called. I have printed some log while doing development.

0 投票
0 回答
44 浏览

firebase - 如何仅重新渲染 Flatlist 中的一项?

我有一个包含帖子的平面列表,并且我有一个类似的系统,我喜欢一个帖子,我希望重新渲染该帖子(又名平面列表中的项目),但不是整个屏幕,也不是整个平面列表,所以我看到类似计数已更新。我希望它像 Facebook 一样,您喜欢一个帖子,而该帖子现在又多了一个。所有这些都存储在火库中。

0 投票
1 回答
1031 浏览

react-native - 从状态中删除项目后,平面列表不会重新呈现

我正在开发一个反应本机应用程序,

在这个应用程序中,我有一个捕获视图的图像,如果用户捕获图像,它将存储在状态挂钩中,如果存储了某些内容,它将显示在 Flatlist 中。

如果我们认为用户需要从列表中删除一个项目,那我提供了一个删除按钮。当用户点击它时,该项目应该从状态中删除并更新平面列表。

我的问题是:从状态中删除项目后,我的视图不会重新渲染。我可以保证数据已成功从状态中删除,但我的 Flatlist 没有更新。

我的代码如下,请帮我找到答案。提前致谢。

下面的代码用于从状态中删除项目。

平面列表

---------- 完整代码 --------------

照片上传.tsx

ProgressBarWithImage.tsx

0 投票
1 回答
326 浏览

react-native - 将元素附加到倒置 FlatList 的顶部

我目前正在开发一个 React Native 聊天应用程序,我正在尝试以传统方式显示聊天消息。我将 Expo CLI 与 Socket.io 一起使用,我的消息 FlatList 如下所示:

我的聊天按预期工作并且显示良好,但是每当我发送新消息时,它都会附加在 FlatList 的顶部。

当一个新的聊天被发送时,我向我的 reducer 发送一个动作,并添加如下消息:

我想知道是否可以在 FlatList 的末尾附加新消息并滚动到它的末尾。

注意:我的消息数组是按最新最旧的顺序排列的

感谢任何可以帮助我的人!

0 投票
3 回答
1252 浏览

react-native - React Native Flatlist ListHeaderComponent 不起作用

ListHeaderComponent里面flatlist不工作。它不会在标题中呈现任何内容(上图flatlist)。但是,如果我放置一些自定义组件,它确实可以工作,但它不适用于我的renderHeader功能。我尝试使用与中相同的视图制作自定义组件,renderHeader但是当我使用它时没有渲染所以我不知道

我的平面列表以及整个渲染:

我的 renderHeader 函数:

为什么例如 renderFooter 作品?

0 投票
1 回答
102 浏览

javascript - 使用带有列表 ITem 的 RN FlatList 的唯一“关键”道具错误

我有一个显示产品列表的屏幕。我正在尝试设置分页。我正在使用 react-native-elements 中的 List 项目,并在此包的文档中尽可能地查看 Using RN FlatList。

我设置了分页功能,但我对代码感到困惑。我不知道如何修复它了。我想知道你是否有可能给我一个提升并重新阅读我的代码来给我你的意见。

目前我有错误:

列表中的每个孩子都应该有一个唯一的“关键”道具

我有点迷路,需要一些指导。感谢您的任何解释。

编码 :

0 投票
1 回答
38 浏览

reactjs - 如何使用反应原生 AsyncStorage 将 JS 对象保存在数组中并显示在平面列表中

美好的一天 React Native 开发者!

我一直在尝试使用 react native AsyncStorage 在我的字典应用程序中实现书签功能,但是有一个问题。我不知道该怎么做。

数组如下所示:

下面是我的反应原生平面列表,显示列表:

现在,一旦单击每个项目,我希望使用 asycStorage 保存每个项目。我还想在另一个页面中显示书签项目的列表。

请仅提供示例代码帮助我。我会没事的...

0 投票
2 回答
2101 浏览

react-native - 如何将 useState() 与 Flatlist 数据一起使用?

我在使用 useState() 时遇到了问题。我必须按我的数据和列表中的搜索词进行过滤。

我需要用 State 定义我的数据列表(我会用搜索词列出)但是当我使用 State 时,我遇到了“Invalid Hook”错误。

我找不到我在哪里使用它,我无法修复 3 天,我无法进入下一步:( 我希望我会在专家的帮助下修复...

谢谢

0 投票
2 回答
109 浏览

javascript - 按单词搜索后如何取回我的数据列表?

我使用 Flatlist 并在 renderHeader() 函数上按单词搜索。我可以过滤,但是当我删除字母时,我无法再次获得主列表。我认为有一个逻辑问题,但我尝试了一些东西后我找不到......

当我解决问题时,我有一个新的。我试图解决,但我做不到,我应该把问题摆在专家面前:)

谢谢你的帮助