React Native Flatlist 在 Android 上导致巨大的性能问题，仅加载 5 个图像

Question

我正在将来自不同 URL 的图像加载到我的应用程序的平面列表中。由于某种原因，当图像不是本地图像时，它会使 Android 上的应用程序内存消耗如此之高，以至于即使 Flatlist 中只有 5 个图像，我也会出现可怕的丢帧......我看过很多关于 100 多张图像如何导致这种情况的帖子Flatlists 中的问题，但令我感到困惑的是，只有 5 张图像使我的应用程序基本上没有响应。我确实遵循了我在网上找到的一些性能优化技术，但它们绝对没有任何区别。我在这个项目中使用 Expo，所以我真的很想保持这种方式，而不是使用 react-native-fast-image ......我宁愿解决这个问题，也不愿在这个问题上抛出另一个库。怎么在 iPhone 上绝对没有问题，但在 Android 上却导致如此巨大的性能问题，感觉不对，我觉得这是某种错误。这是我的代码.. 有什么我遗漏的吗？

import {FlatList} from 'react-native'

 return (
        <ScreenWrapper>
            <CustomHeaderBasic
                iconName="menu-outline"
                goBack={() => {
                    props.navigation.toggleDrawer()
                }}
                header="Gallery"
                headerColor={{ color: colors.textColor }}
            />

            <FlatList
                style={styles.flatList}
                onRefresh={loadGalleries}
                refreshing={loadingGalleries}
                data={galleries}
                keyExtractor={(item) => `${item.galleryID}`}
                renderItem={({ item, index }) => {
                    return (
                        <Thumbnail
                            images={item}
                            galleryPressedHandler={() => {
                                galleryPressedHandler(item)
                            }}
                            navigation={props.navigation}
                            galleryName={item.galleryName}
                            onActionsPressed={() => {
                                bottomSheetRef.current?.handlePresentModalPress()
                                setDeleteID(item.galleryID)
                            }}
                            key={item.galleryID}
                        />
                    )
                }}
                showsVerticalScrollIndicator={false}
                numColumns={2}
                columnWrapperStyle={{
                    marginLeft: 10,
                }}
                contentContainerStyle={{
                    paddingBottom: tabBarBottomPosition + 80,
                }}
                removeClippedSubviews
                initialNumToRender={8}
                maxToRenderPerBatch={10}
            />
        </ScreenWrapper>
    )
}

这是我的数据的 console.log 被输入列表，出于显而易见的原因，我隐藏了 IP..

Array [
  Gallery {
    "eventDate": "2021-06-10 18:32:17",
    "galleryID": "48",
    "galleryName": "Test",
    "thumbnail": "http://xxx.xxx.xxx.xxx/uploads/60c25ab9944f0.jpeg",
  },
  Gallery {
    "eventDate": "2021-06-10 18:32:44",
    "galleryID": "49",
    "galleryName": "Test 2",
    "thumbnail": "http://xxx.xxx.xxx.xxx/uploads/60c25ad191549.jpeg",
  },
  Gallery {
    "eventDate": "2021-06-10 18:33:16",
    "galleryID": "50",
    "galleryName": "Desk",
    "thumbnail": "http://xxx.xxx.xxx.xxx/uploads/60c25af2160e9.jpeg",
  },
]

Answer 1

优化列表的常用洗衣清单基本上是

• 将您的 renderItem 属性提取到顶级函数而不是内联它，这样就不会在每次渲染时都重新创建它
• 确保图片尺寸不会过大
• 确保您的密钥稳定（这在您的代码中已经看起来很好）
• 尽可能简化和扁平化您的项目组件，删除任何不必要的容器视图