Expo Image组件添加新图片时闪烁问题求助

你遇到的问题核心是expo-image组件的transition属性导致的：代码里设置了transition={1000}，这个属性会让图片加载完成后播放1秒的过渡动画。当瀑布流列表添加新图片时，每个新挂载的RemoteImage组件都会触发这个过渡，叠加起来就表现为不必要的闪烁/缓动效果。

直接解决方案 #

移除transition属性，或者将其设置为0，彻底关闭加载过渡动画：

import { Image } from "expo-image";
import { useState, useMemo } from "react";
import { View, StyleSheet } from "react-native";

const RemoteImage = ({ uri, dimension, borderRadius = 15 }) => {
    const [loading, setLoading] = useState(false);
    
    // 用useMemo替代useEffect计算宽高比，避免不必要的状态更新
    const ratio = useMemo(() => {
        return dimension?.small?.width / dimension?.small?.height || 1;
    }, [dimension]);

    return (
        <View style={{
            overflow:'hidden', 
            position:'relative', 
            backgroundColor:'#F7F7F7', 
            width:'100%', 
            aspectRatio: ratio, 
            borderRadius: borderRadius
        }}>
            <Image
                source={uri}
                style={[styles.image, { aspectRatio: ratio, borderRadius }]}
                contentFit="cover"
                // 移除transition属性，或设置为transition={0}
                accessible={true}
                cachePolicy='memory-disk'
                onLoadStart={() => setLoading(true)}
                onLoadEnd={() => setLoading(false)}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    image: {
        width: "100%"
    }
});

export default RemoteImage;

额外优化点 #

1. 用useMemo计算ratio：原来的useEffect空依赖数组会导致dimension更新时ratio无法同步，改用useMemo并依赖dimension，能保证宽高比始终正确。
2. 补充缺失的组件导入：代码里用到View和StyleSheet，需在顶部完成导入。

内容的提问来源于stack exchange，提问作者kaankilic