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

reactjs - ListHeaderComponent 接收对象,需要一个字符串或类/函数

我正在尝试使用道具渲染FlatList组件ListHeaderComponent,如果没有该道具,FlatList 渲染效果很好,但是当我添加 ListHeaderComponent 时出现以下错误。在此处输入图像描述

这是render()Discover 类的功能:

这是render()DiscoverSearch 类的功能:

我假设 VirtualizedList 必须是我从 react-native 导入的 flatList 的子级,我应该将此问题指向 github 上的 react-native 存储库吗?我找不到我的错误在哪里。在这里的任何帮助将不胜感激。

0 投票
2 回答
18831 浏览

reactjs - 如何使用动画制作列表(FlatList)自动滚动元素?

我有一个水平的 FlatList,每次到达末尾时,它都会自动将新元素添加到列表中,因此它是一个无限列表。我希望应用程序自动滚动列表,而用户仍然必须能够来回滚动。这就是我要远

它的工作原理是它自动滚动列表,但是问题是我无法手动滚动列表,因为滚动位置由 scrollTo 侦听器不断更新。我试图添加一个 onPress 回调以在按下 FlatList 时禁用动画,但是我无法让它工作。

0 投票
5 回答
12495 浏览

react-native - initialScrollIndex 不适用于 FlatList 反应原生

我遇到了 FlatList 的 initialScrollIndex 的问题 - 简单地忽略了 initialScrollIndex 的参数并显示了第一项。

https://snack.expo.io/Bk1mkK0zZ

0 投票
1 回答
324 浏览

javascript - React Native:使用 2 个 FlatList 时的性能问题

我在 ScrollView 中有 2 个 FlatList。一旦 FlatList 出现,ScrollView 和第二个 FlatList 就会滞后。我试着只保留一个 FlatList,它工作得非常顺利。我还使用 PureComponent 为 FlatList 呈现每个单独的项目

如您所见,我的 FlatList 项目里面有很多视图。如果我删除 2 或 3 个视图,性能也会变得更好。但不能真正做到这一点,因为 UI 需要那么多视图。

0 投票
4 回答
43219 浏览

react-native - 单击平面列表中的侦听器

如何添加点击监听器Flatlist

我的代码:

更新 1:我使用了按钮,但它在Flatlist. 但是,仅使用 button 而不是Flatlist,它可以工作。为什么它在FlatlistrenderItem 中不起作用?

0 投票
0 回答
107 浏览

react-native - 如何在 React Native 中使用平面列表(水平)在左滚动上调用 API 并在右滚动上调用另一个 API?

我已经在 React Native 中实现了平面列表(水平)。我使用 onEndReached 和 onEndReachedThreshold 来调用 API。因此,当我向右滚动时,API 被调用,但无法向左滚动并在其上调用不同的 API,因为我的初始页码为“0”,因此无法向左滚动。

所以基本上我需要设置一个页码,例如“3”,这样我就可以向左和向右滚动。然后我担心的是我怎么知道左滚动已被触发或右滚动在两者上调用不同的 API。

我现在为右滚动实现的内容如下:

}

0 投票
2 回答
459 浏览

react-native - 可触摸元素(如按钮、TouchableHighlight 等)在 FlatList 中不起作用

FlatList 中的可触摸元素不注册触摸。为什么以下代码不起作用?任何帮助表示赞赏。谢谢你。

0 投票
0 回答
430 浏览

reactjs - FlatList React Native 滞后

我有一个水平滚动的 FlastList 并且运行流畅。但是当我在这个下面添加一个水平滚动的 FlatList 时,整个滚动开始滞后。有什么解决办法吗?

0 投票
7 回答
75188 浏览

reactjs - VirtualizedList:您有一个更新缓慢的大型列表

我使用带有大量项目的 FlatList。我收到来自 Expo XDE 的以下警报。

VirtualizedList:您有一个更新缓慢的大型列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件,如 PureComponent、shouldComponentUpdate 等。 {"dt":13861,"prevDt":1498372326027,"contentLength":第6624章

我对我的 FlatList 使用了一些优化方法,例如 PureComponent,但我仍然收到此警报。在我描述我的优化之前,你能告诉我即使 FlatList 已经优化,这个警报是否总是出现?或者它可能表明性能存在实际问题?我问是因为我的 FlatList 的性能很好。

0 投票
1 回答
476 浏览

reactjs - 在 FlatList 的 Selector 中使用来自 Redux Reducer 的 Lodash 生成对象数组

如果您不了解 React 等,请阅读此处。以下是相同的问题,但与 React 等更相关:

我有包含一种数据的严重对象:价格:

加密货币数量:

如何获取这些对象并创建一个对象数组,例如:


对于 React 程序员:

要在 React 中使用新的 FlatList 组件,您需要提供一个对象数组

我使用了几个存储不同类型的加密货币数据的 reducer。Reducer1 商店价格:

Reducer2 存储您拥有的加密货币数量:

我的目标是遍历这些值并创建一个对象数组,例如

到目前为止,我认为正确的方法是在选择器中重新选择。缺少的部分是 createSelector 中的 lodash 部分。令人惊讶的是,我在互联网上没有找到任何结合 lodash 和 FlatList 的东西。非常感谢您的帮助。


解决方案奏效!更多解决方案在这里生成不同对象Javascript的对象数组 感谢您的帮助!很多 React 用户会喜欢