VirtualizedList：您有一个更新缓慢的大列表 - React Native FlatList

Posted 2023-02-21

【中文标题】VirtualizedList：您有一个更新缓慢的大列表 - React Native FlatList

【英文标题】：VirtualizedList: You have a large list that is slow to update - React Native FlatList

【发布时间】：2021-12-06 01:51:03

【问题描述】：

我对接收不超过 10 个项目的 FlatList 有疑问。

这是 FlatList 的代码：

<FlatList
    style=styles.flatList
    onScroll=(event) => toggleHeader(event.nativeEvent.contentOffset.y > headerHeight)
    contentContainerStyle= paddingBottom: getContentContainerStyle() 
    showsVerticalScrollIndicator=false
    onRefresh=makeRequest
    refreshing=isRefreshing
    data=data
    renderItem=renderItem
    keyExtractor=item => item?.id?.toString()
/>

应用程序中的流程如下：

应用程序正在使用标签栏导航，并且使用单个组件向每个标签发出具有特定 ID 的请求，以从 DB 获取正确的数据。

我的 renderItem 方法是一长串 if elses 来检查项目类型以知道要渲染，因为可以有多种类型的项目，但它们的数量真的很小（最多10-15）。有些项目是horizo​​ntal FlatLists，但其中的项目数量也像 2-4。

多次更改选项卡后，会抛出此 VirtualizedList 警告，但我的项目以正确的数量和顺序正确显示。

我正在使用功能组件和钩子。

尝试添加maxToRenderPerBatch 和initialNumToRender 但不起作用。

我不想在 PureComponent 中更改我的 renderItem，因为我的列表总是会有一些项目，所以我试图了解它为什么会引发此警告。

编辑

此问题仅在 ios 上发生。

【参考方案1】：

在您的情况下添加您所有的孩子 Scrollview FlatList：

<FlatList nestedScrollEnabled=true/>

【讨论】：

我尝试将此属性添加到我的所有 FlatLists 上，这些 FlatLists 以某种方式嵌套在我的大 FlatList 和大 FlatList 中，但仍在 iOS 上，谢谢您的时间