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

react-native - 如何在本机反应中更改平面列表滚动动画持续时间?

我现在有一个包含一堆项目的平面列表,当我按下按钮时,平面列表使用 ref 和 scrollToIndex 方法向下滚动。但是滚动动画比我需要的要快,无论如何增加滚动动画的持续时间?

这是向上滚动(向上滑动手势)功能的代码

这是返回的 jsx

任何帮助将不胜感激,过去几天我一直在研究这个错误,但我没有找到任何明确的解决方案:(

0 投票
1 回答
465 浏览

react-native - 警告:列表中的每个孩子都应该有一个唯一的“关键”道具。反应原生

您好,我正在尝试使用 react native 构建一个迷你社交媒体应用程序,但出现以下错误:

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

查看 VirtualizedList 的 render 方法

也尝试使用 results.map 而不是平面列表。并且还使用stackoverflow上的解决方案更改密钥提取器,但没有成功。任何人都可以帮忙吗?

代码:

旅游卡:

const TouristCard = ({item,onPress}) => {

结果对象:

0 投票
1 回答
54 浏览

javascript - 如何在一个项目中访问我的第一个平面列表中的所有数据,以便我可以将它传递给我的第二个平面列表?

  1. 我在 React Native 中有两个平面列表
  2. 第一个平面列表包含我所有帖子的数据集。这些数据被渲染成 Posts
  3. 第二个平面列表包含用户喜欢的所有帖子的数据集。这些数据被渲染成 Posts
  4. 用户可以在他们的主页中导航到喜欢的帖子(都在同一个堆栈导航器中)。我想将数据集从我的第一个平面列表传递到我的第二个平面列表
  5. 当我在帖子中(第一个平面列表的一个项目)时,我无法弄清楚如何访问第一个平面列表的所有数据。我只能访问当前项目的数据
  6. 有没有办法在一个项目(帖子)中访问第一个平面列表中的所有数据,以便我可以将它传递给我的第二个平面列表。在屏幕之间导航时,我目前正在撤回数据,这似乎不是最理想的
0 投票
1 回答
30 浏览

javascript - Flatlist 无法呈现项目

我无法理解为什么当我将 dummyData 与 renderItem 箭头函数一起使用时它不渲染它的内容,但是当我{item}) => <Text style={styles.item}>{item.key}</Text>直接传递给 renderItem 道具时它可以工作

0 投票
1 回答
207 浏览

javascript - 如何在 React Native 中以状态存储 JSON 项目

我一直对 react native 有一些困惑,我希望社区可以帮助解决它。我正在尝试从 API 接收一些公告的列表,并在平面列表中显示每个公告。

我可以接收和解析 JSON,我可以显示在状态中编码的项目,但是我无法在状态中存储 JSON 数据。

所以问题是这样的:我如何存储从 API 接收到的 JSON 数据,并以 React Native 的状态存储?

这是我的代码(我试图修剪,那里可能有一些卡顿,对此感到抱歉)

JSON看起来像这样

0 投票
1 回答
178 浏览

arrays - react native flatlist hooks - 使用对象数组渲染项目

我有这样的数据 api,想在 flatlist react native hooks 上显示它。用于名称、句点和文件名。怎么做

例如我希望它看起来像这样:

在此处输入图像描述

但是,目前我只能像这样显示一个数据(只是名称),下面是为我检索平面列表数据时的基本代码

0 投票
1 回答
27 浏览

javascript - 在 flatlist 中实现 searchbar 以搜索 api 数据 react native

我已经实现了一个搜索栏作为平面列表的标题,它显示了我的 api 数据(平面列表工作正常)但搜索栏不起作用,我尝试了几个代码但仍然不起作用如果有人可以帮助我解决这个问题会很感激的:)

我的 API 显示一个文档,其中包含: -Titre(String) -Montant(Number) I want to search by Titre 。这是我尝试过的最后一个代码:

0 投票
1 回答
30 浏览

javascript - 使 Flatlist 异步反应原生

我有一个不是异步的平面列表,所以如果我在我的视图中更新某些内容,我必须返回主屏幕并重新输入以检查修改或保存我的项目,我已经在我的 fetch 中实现了 async 和 await 但仍然什么都没发生 !

这是我的代码,如果有人可以帮助我解决这个问题,我将不胜感激

0 投票
0 回答
54 浏览

javascript - 重新渲染整个平面列表与当前项目,onViewableItemsChanged

当我更新呈现我的帖子的平面列表中的状态时,我遇到了问题。我正在尝试根据当前可见索引暂停/播放视频(想想 Tik tok)。让它工作,但问题是我目前正在重新渲染我的整个平面列表,而不仅仅是导致性能问题的当前项目。对于功能,似乎使用 usememo 可能是一个解决方案。是否有人对 onViewableItemsChanged 有代码/经验并为当前可见索引设置状态,他们在其中获取当前项目以重新渲染(视频)与整个平面列表。在帖子中暂停的代码也在我暂停的视频组件中 = {props currentvisibleindex != props.index || 暂停}。

0 投票
0 回答
170 浏览

react-native - React Native 平面列表 || 当在 TextInput 字段中按下时,VirtualizedList 从 0 个索引重新开始

我需要帮助。我在 React Native 中制作了一个聊天应用程序,但是当我向上滚动浏览一些聊天时遇到了一些问题,然后当我点击 TextInput 时,我的 FlatList 或 VirtualizedList 从索引 0 开始,这是我不想要的,我所期望的就像在WhatsApp中一样,在滚动了一些距离之后,当我们按下输入字段时它不会滚动到底部而是静止不动

分享这方面的视频。 https://youtu.be/DvrdTFWpREo

我使用 REST 国家 API https://restcountries.eu/重现了这里的场景

我没有改变任何状态,因此我认为它不是重新渲染。

要点链接:https ://gist.github.com/sultanularefin/7eb11e5d278020bffd1d51ac58efd664