Flatlist 项目闪烁然后消失

Question

我有一个应该代表项目的 Flatlist。 昨天，Flatlist 工作没有问题，今天它在渲染时开始严重闪烁，并且当再次调用屏幕时，仅显示最后一项。 数据通过 axios 从 API 在此屏幕中异步拉取

然后我将 Flatlist 重建到最低状态，但错误仍然存在。

<FlatList
            data={packages}
            horizontal
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item) => item.id}
            snapToInterval={packageCardWidth}
            bounces={false}
            decelerationRate={0}
            renderItem={({ item, index }) => {
                return (
                    <PackageCard
                        containerWidth={packageCardWidth}
                        {...item}
                    />
                );
            }}
        />

渲染项目的代码

export default function PackageCard(props) {

return (
    <View style={[tw.style('flex-1'), { width: props.containerWidth }]}>
        <View
            style={[
                tw.style(
                    'bg-white rounded-lg shadow-md pb-4 m-3 overflow-hidden'
                ),
                {},
            ]}
        >
            <Image
                source={{
                    uri: 'https://images.unsplash.com/photo-1577705998148-6da4f3963bc8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
                }}
                style={tw.style('h-64 w-full mb-4')}
            />
            <View style={tw.style('px-3 p-2')}>
                <Text style={tw.style('text-xl font-semibold')}>
                    {props.name}
                </Text>
            </View>
        </View>
    </View>
);

}

Answer 1

造成这种情况有几个原因，但就我而言，我只是将此道具添加到 FlatList

initialNumToRender

，并给了它整个数据的长度，我相信这个道具应该用于减少初始数量数据来提高性能，但我找不到任何其他方法来解决问题，但除了这个解决方案之外，它对我来说效果很好。

解决方案示例：

  <FlatList
     data={myData}
     initialNumToRender={myData.length}//
    />