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

javascript - React Native 的 FlatList 是否允许您定位滚动条?

我目前在一个项目中实现了 FlatList,我需要将滚动条进一步向下移动,以便它不会越过 FlatList 中的某些项目,或者我可以完全移除滚动条。我很好奇定位滚动条是否可行。我假设showsHorizontalScrollIndicator如果我也想摆脱它,我可以在 FlatList 中将 prop of 设置为 false。

我试图调整容器的填充和边距,看看这是否会将滚动条推开,但事实并非如此。

提前致谢!

0 投票
1 回答
2852 浏览

react-native - React Native 将固定组件放在 Flatlist 之上

一个组件最初占据了屏幕的顶部

B组件占据整个屏幕,我这里想用FlatList

如上所示,我想创建这个由两部分组成的屏幕,在这里我可以单击此处提供的第一个视图上的 A 组件和 B 组件。当用户滚动 B 组件时,它可能会占据整个屏幕并在 A 组件上移动。(组件不随 FlatList 移动)。

我是本地人的新手,想知道如何创建这样的行为?我尝试在 FlatList 中使用绝对定位和 ListHeaderComponent,但并没有真正到达任何地方。让我知道是否有人有想法。

谢谢!

0 投票
2 回答
7222 浏览

react-native - React Native FlatList - 在返回组件的渲染方法中调用函数

我正在使用 FlatList 创建一个可选列表,该列表突出显示/勾选每个选定的项目。

在 index.js 上,我以这种方式使用组件:

在 selectable-list.js 我将列表定义为:

这是我得到的输出:

啊啊啊

xxx

啊啊啊

xxx

我希望它是:

啊啊啊

一个

xxx

啊啊啊

b

xxx

这条线不起作用:

0 投票
1 回答
8200 浏览

react-native - React Native FlatList onPress for child

我正在尝试为嵌套在 React Native FlatList 中的图像连接新闻处理程序。我已经通过直接在我的组件内部调用该函数来验证该函数是通过道具传递的,并且效果很好。下面是一个简化的测试用例。我还尝试在图像上设置 onPress,结果相同。

0 投票
0 回答
756 浏览

react-native - react-native FlatList onViewableItemsChanged 松鼠行为

我已经在我的 FlatList 中连接了 onViewableItemsChanged。我正在使用下面的配置。我确实看到了我期望的调试 console.log()s,这很好。然而,奇怪的是,如果我只上下滚动几个像素,始终在屏幕上保持同一行,则更改表明该项目来自可见性集。我是否解释了错误的日志记录?

0 投票
1 回答
5305 浏览

javascript - React Native - FlatList 排序而不对数据进行排序

有没有办法以特定顺序呈现Flatlist行而不对数据源进行排序?

例子

上面的代码呈现了一个列表

有没有办法让它在不对数据源进行排序的情况下呈现以下内容?

0 投票
1 回答
6301 浏览

react-native - 使用 FlatList#onViewableItemsChanged 调用组件函数

我目前正在尝试使用该FlatList组件实现一种 LazyLoading 形式,它引入了一个名为的简洁小功能onViewableItemsChanged,它为您提供了所有不再出现在屏幕上的组件以及现在出现在屏幕上的项目的列表。

这是一个自定义的 LazyLoad 实现,因此比大多数可用的 LazyLoad 开源库更复杂,这就是我正在开发自己的实现的原因。我已经调查过react-native-lazy-load和其他人。

基本上,我需要能够调用一个函数,该函数是在 FlatList 中呈现的组件的一部分,我尝试创建对 FlatList 中呈现的项目的引用并这样调用它,但它似乎不起作用.

例如:

现在在<Example />组件中,我将有一个调用的函数startLoading,当一个新的可见项被带到屏幕上时应该调用它,但是 ref 永远不存在。

0 投票
5 回答
3914 浏览

javascript - 将自动递增键道具添加到 Flatlist

如何为 Flatlist renderItem 添加递增键,它是用于地图的方式:

现在我有这样的,但密钥没有出现在 MyComponent 道具中:

0 投票
1 回答
1181 浏览

react-native - React Native FlatList 水平从左到右拉刷新

我有多个水平设置为 true 的平面列表。我想实现功能,以便当用户到达第一个项目(左侧)并尝试向左拉时,它会刷新内容。我不能使用 RefreshControl,因为它在下拉时起作用。有没有人在第一个项目上实现从左到右滑动刷新?任何提示将不胜感激。

我正在考虑一个替代方案:在标题和 ActivityIndi​​cator 中放置一个按钮。当用户单击该按钮时,它将触发刷新。

0 投票
3 回答
1692 浏览

react-native - FlatListFooter 无法显示

我想在我的 flatList 中添加页脚:我试试这个代码:

但运行时不出现页脚。

请提供任何帮助