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

react-native - react-naitve,如何移动到平面列表中的某个项目

我正在使用 react-native 制作自己的应用程序,我在做通知功能时遇到了一些困难。

我们有板子和评论,如果我们注意到有人写了评论,我想去平面列表评论中的评论(板子里可能有很多评论,所以如果我们只是去董事会而不关注通知评论,用户可能很难查找评论)。我在 flatlist 中搜索了一些滚动索引方法的示例。但我想直接去没有按钮或输入。我们在通知模型中有评论 ID。所以首先我认为,如果我们比较 flatlist 中的评论 ID 和设置状态,我们可以保存该评论的索引。但是 setState() 在 flatlist 中不起作用,因为错误“无法从不同组件的函数体内更新组件”。其次,我不知道我们将函数 scrollToIndex() 放在哪里,因为它可能会在渲染完成后移动。但我不知道那个状态。

如果您知道如何解决该问题,请帮助我!

(你可以认为instagram评论通知,如果我们点击它们,我们可以看到该评论,无论它们在哪里,因为它会自动移动到该评论

0 投票
1 回答
66 浏览

react-native - 检查 Flatlist 中每个项目的本地存储并根据结果 REACT NATIVE 显示图标

我正在从 api 读取数据并在平面列表中显示此数据,此数据是一堆文档,每当用户按下任何项目时,它都会将他带到该文档,我下载此文档以便用户可以阅读它离线模式。我现在要做的是从每个实体旁边的平面列表中显示此文件是否已下载。我已经知道如何检查文件是否存在并且 m 得到正确的结果,但是 m 无法在平面列表中显示相应的图标。

检查文件的代码:

我调用函数的代码:

如果我让 checkFiles 方法直接返回图标,它会显示它,但是当我添加代码以检查文件是否存在时,它什么也不显示。那么我该如何解决这个问题?

0 投票
0 回答
244 浏览

reactjs - 如何在本机反应中创建自定义月份选择器?

我想创建一个月份选择器,其中所有月份都可以在滑块中使用,中间的月份将是选定的月份,当月份周期从 12 月到 1 月时,年份应该自动增加或减少。

我附上示例图片这里。我已经创建了月份的数组并使用 flatlist 显示了所有月份,但我不知道这是否正确,如果是这样,那么如何让中间月份成为选定的月份,如图所示。

0 投票
1 回答
342 浏览

javascript - react native如何访问事件目标?

我用json文件中的国家/地区拨号代码制作了FlatList 。现在我想访问事件目标的值,但是当我尝试点击它时,它并没有像我想象的那样工作。有人可以帮忙吗?这是FlatList组件的样子:

当我控制台日志时e.target,我得到类似的东西

0 投票
2 回答
385 浏览

javascript - FlatList 在 react-native 中的 CRUD 之后没有更新

我要做的是将新数据传递给 API 并将其显示在 FlatList 中。我所有的 CRUD 方法都通过了,但我的 FlatList 不会显示更改,直到我刷新我的“App.js”。我的“App.js”(如下所示)中的代码包含“delete”方法,该方法正在工作,我的 FlatList 会立即更新它,我猜是因为状态是本地的,FlatList 可以找到它。但是当我使用“PUT”和“POST”方法时,在其他组件中声明它不会对它做出反应。

在 react-native 以及在其中导航方面,我是一个完全的菜鸟。关于如何解决这个难题的任何提示?

0 投票
0 回答
97 浏览

react-native - 当用户实际在页面上向下滚动时,有没有办法仅在 FlatList 中触发 onEndReached?

我有一个像这样保存 FlatList 的屏幕(我替换了不相关的代码,...以使问题尽可能容易阅读):

问题是,如果我有一个非常短的列表完全适合一个屏幕,那么当用户登陆屏幕时onEndReached就会被触发。这会导致下一批消息的自动加载,这是我不想要的。我想要它,以便onEndReached在用户到达列表末尾并且用户实际进行手动滚动操作时触发。

IE

  • 消息总页数 = 2
  • 适合一页的消息数 = 2
  • 消息总数 = 4

问题:当用户第一次登陆我的屏幕时,他们将看到前 2 条消息,但由于它们已经在列表的末尾(即使他们没有向下滚动到列表的底部),onEndReached被触发并且接下来的 2 条消息会自动加载。

期望行为:当用户第一次登陆屏幕时,他们应该看到前 2 条消息。但是,接下来的 2 条消息不应该加载,直到用户位于列表的末尾,并且当他们在列表的底部实际进行滚动动作时。

我不确定这个问题是否可以解决,但感谢任何见解!

0 投票
0 回答
17 浏览

react-native - 将参数传递给选项卡导航器中位于堆栈导航器内的所有选项卡

我有一个堆栈导航器,里面是一个选项卡导航器。当我从不同的堆栈导航到这个特定的堆栈时,我会传递一些参数,如下所示:

此外,我的屏幕上还有一个 flatList,我正在从中导航。因此,当我单击任何项​​目时,都会调用上述函数。我现在在选项卡导航器中,第一个选项卡正确接收参数,然后我转到第二个选项卡,然后返回上一个屏幕。然后我点击另一个项目。它打开选项卡导航器,但参数仍然相同。虽然它应该收到新的参数,因为用户点击了不同的项目。

我只知道用户名已正确传递给选项卡导航器,但在选项卡导航器中没有正确接收。

另外我想避免使用 React Context 或任何类型的商店。

0 投票
0 回答
78 浏览

reactjs - 无法在功能组件中重新渲染 FlatList?

每当我删除一个项目时,我都想重新渲染这个平面列表,我尝试了几种方法但没有任何效果,而且我收到一个错误:

Hooks 只能在功能组件中使用

提前致谢。

0 投票
0 回答
487 浏览

reactjs - 从最后一项到第一项的 scrollToIndex Flatlist 导致空白屏幕

在 React Native 中,我试图在“scrollToIndex”的帮助下滚动一个平面列表。这工作正常,直到我想从最后一页转到第一页(索引 0)。然后不调用“renderItem”,我看到一个空页面,而不是平面列表预期的渲染页面/项目。

我采取的步骤:

首先我在组件中创建了一个钩子引用: const flatListRef = React.createRef();

然后我将 flatlist 添加到组件渲染中:

然后我添加了一个 useEffect,它将平面列表从索引 8 滚动到 0:

最后我为平面列表添加了数据:

预期行为: 它加载最后一页,5 秒后它应该打开第一个项目/页面(索引 0)并成功呈现。

实际行为: 它加载最后一页,5 秒后打开第一页,但平面列表不调用“renderItem”,因此显示一个空页面。

小吃示例

0 投票
1 回答
522 浏览

reactjs - 自定义 React Native Carousel 的解决方案,例如示例图像

我想在轮播中创建滑块,像下面的示例图像一样反应原生我希望在每张幻灯片上显示三个视图中间的幻灯片比另一个更大,并在中间的幻灯片中显示我的文本有没有人有创建这个滑块的解决方案与平面列表? 在此处输入图像描述