为什么图像在FloatList中闪烁？

Question

我使用react native并从https://jsonplaceholder.typicode.com/photos获取数据。

<View style={[{alignSelf: 'stretch'},styles.main]}>
                    <Filter filterValue={filterValue} setFilterValue={setFilterValue}/>
                    {filteredImages.length > 0?(
                        <FlatList
                            containerContentStyle={{alignSelf: 'stretch'}}
                            data={filteredImages}
                            renderItem={({item}) => (
                                <ImageCard item={item}/>
                            )}
                            keyExtractor={item => generateKey(item.id)}
                        />
                    ):(
                        <View style={[styles.main,{alignItems:'center'}]}>
                            <Text style={styles.text}>Images not found.</Text>
                        </View>
                    )}
                </View>

export const ImageCard = props => {

    const item = props.item;
    return (
        <View style={styles.card}>
            <View style={styles.row}>
                <Text style={styles.header}>Album # {item.albumId}</Text>
            </View>
            <View style={styles.imgContainer}>
                <Image source={{uri:item.url}} style={styles.image}/>
            </View>
            <View style={styles.row}>
                <Text style={styles.text}>{item.title}</Text>
            </View>
        </View>

    );
};

但是随后我滚动到第50个元素，并且滚动时图像开始闪烁。我哪里出错了？