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

【问题标题】：VirtualizedList: You have a large list that is slow to update - React Native FlatListVirtualizedList：您有一个更新缓慢的大列表 - 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）。有些项目是horizontal FlatLists，但其中的项目数量也像 2-4。

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

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

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

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

编辑

此问题仅在 iOS 上发生。

【问题讨论】：

标签： react-native react-native-flatlist react-virtualized

【解决方案1】：

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

<FlatList nestedScrollEnabled={true}/>

【讨论】：

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