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

react-native - React Native - FlatList 不渲染

(注意:我正在为这个应用程序使用 Expo)

我正在尝试渲染一个FlatList显示打印机列表的内容。这是代码:

这是<Printer />组件的代码:

我似乎无法让<Printer />组件呈现。我尝试FlatList在道具中包含一个类似的自定义组件(在应用程序的另一部分中工作),renderItem但它也不起作用。

但是,当我用<Printer />组件替换组件时<Text>{item.name}</Text>,打印机名称的呈现方式与我期望的一样。

以前有没有人遇到过这个问题,或者有没有人有解决方案?

0 投票
1 回答
74 浏览

react-native - 平面列表的项目+滚动中的 React Native+ TextInput 滞后

我使用的是 Flatlist,因为我使用了 textinput 字段。当我滚动 flatlist 时, textinput 会自动聚焦,并且滚动会滞后且无法流畅运行。如果我在 textinputfield 之外滚动,滚动工作顺利。

任何解决方案?

0 投票
0 回答
14 浏览

react-native - 是否可以阻止第一次渲染并继续进行 componentDidMount?

我有记录列表。点击每个记录用户将被重定向到详细信息页面。当用户回到列表页面时,列表页面必须保留它的滚动位置(即用户应该登陆他点击过的同一条记录)。我FlatList的如下,

每次用户滚动页面时,滚动位置通过使用onScroll方法存储以供以后使用

这是handleScroll方法

这是FlatList当用户从详细信息页面返回到列表页面时滚动到所需位置的代码

我这样做是componentDidMount因为,this.flatListRef在组件至少呈现一次之前可用。

这里的问题是,当第一次渲染发生时FlatList渲染没有任何滚动位置,然后当 componentDidMout 被调用时FlatList渲染滚动位置(滚动到所需的列表项)。这种行为对于用户来说显然是明显的,即渲染发生了两次。

这里我的疑问是,1.是否可以阻止第一次渲染,以便componentDidMount单独渲染FlatList

或者

2.当从详细页面返回到列表页面时,是否有任何替代方法可以将用户置于相同的滚动位置?

谢谢你。

0 投票
1 回答
287 浏览

image - 如何使用 flatlist 显示本地图像?

我想制作一个包含 200 张图像的离线应用程序。我想使用 flatlist 渲染这些图像。我应该将这些图像存储在我的项目文件夹中并创建一个包含这些图像源的 json 文件吗?或者最好的方法是什么

0 投票
1 回答
988 浏览

react-native - 更改方向时如何更改 Flatlist 的 numColumns

我创建了函数名称 getOrientation() 并将其放在 useEffect 中,这样每当我旋转设备时,它都会重新渲染组件并显示设备的方向。

我还创建了变量来使用钩子确定方向

获取方向()

在使用效果

我的问题是我想在 Flatlist (LANDSCAPE) 中设置 numsColumns = 2 并且在纵向模式下等于 1,但是错误弹出窗口告诉我我无法动态更改 numColumns。我该怎么办 ?

这是我的平面清单

这个令人毛骨悚然的错误 在此处输入图像描述

P/s:我是新的 React-Native 开发者。感谢所有检查我问题的人

0 投票
1 回答
309 浏览

react-native - 在 react native 中,如何使用 FlatList 自定义警报文本数组

在 react native 中,如何使用 FlatList 自定义警报文本数组。

如果单击第一个项目,我想显示警报标题的“警报优先”。

但是很难在 ALERT_TITLE 和 props{id} 之间同步 id。

多次失败后,我需要堆栈溢出。

请回答我的问题。

下面是我的代码和来自https://reactnative.dev/docs/0.60/flatlist的参考

我不确定 const array set const ALERT_TITLE = {'Alert First', 'Alert Second', 'Alert Third'}; 或 const ALERT_TITLE = [{id: 'aa', title: 'Alert First ',},{id: 'bb', title: 'Alert Second ',},{id: 'cc', title: 'Alert Third ' ,},];

0 投票
2 回答
127 浏览

reactjs - Flatlist 未呈现“文本字符串必须在文本组件中呈现”

我正在尝试呈现 2 列平面列表。我使用的数组没有 id,只有字符串组件。我收到错误“必须在文本组件中呈现文本字符串”

0 投票
2 回答
2418 浏览

react-native - 在 FlatList 中添加“查看更多”按钮?

我使用 flatList 来制作元素列表。我想显示 15 个元素,然后添加一个“查看更多”按钮以显示接下来的 15 个等。我打算使用本教程:https ://aboutreact.com/react-native-flatlist-pagination-to-load -more-data-dynamically-infinite-list/ 但我不需要使用 fetch,我已经设置了数据(state.listData),事实上,我对如何调整它有点迷茫.. .

我想也许有人可以帮助我一点。非常感谢

感谢@Pramod 的回答,我刚刚尝试了这个:

未显示平面列表:我得到: 在此处输入图像描述

0 投票
1 回答
438 浏览

reactjs - 获取 FlatList 中选定项目的值反应原生

我想将item.cin所选项目的 放入数据中。

请帮助我在任何地方都没有找到解决方案。

这是代码:

0 投票
1 回答
78 浏览

react-native - 两个平面列表合而为一 Reat Native

我计划在移动设备中实现这一目标。使用平面列表。

它作为一个整体滚动

在此处输入图像描述

我试图在本机反应中创建它,我的代码看起来像这样

但似乎它没有滚动作为一个整体,它滚动每组平面列表。

我希望有人能帮助我。