React Native中Image组件无法即时更新，需清缓存才能显示新图

问题原因 #

React Native的Image组件默认会缓存远程图片，只要图片URI不变，即便后端已经替换了对应URI的图片，客户端仍会读取本地缓存的旧图，必须清除应用存储才能加载新图。

解决方案 #

1. 给图片URI添加版本/时间戳参数（推荐） #

在图片URI末尾拼接一个和图片更新状态绑定的参数（比如后端返回的图片更新时间戳、版本号），让RN识别为新的资源地址，从而重新请求图片。

修改你的代码：
首先在接口请求时，同时获取图片的更新时间（假设接口返回proof_of_delivery_updated_at字段）：

const [proofDeliveryData, setProofDeliveryData] = useState({ img: '', updateTime: '' });

useEffect(() => {
  dispatch(GetTransaction({ id: transaction_data?.id, token: auth_access?.results?.access_token })).then((res) => {
    const booking = res?.payload?.results?.bookings?.[0];
    setProofDeliveryData({
      img: booking?.proof_of_delivery,
      updateTime: booking?.proof_of_delivery_updated_at || Date.now().toString()
    });
  })
}, [])

然后在Image组件中使用带参数的URI：

proofDeliveryData.img != '' ? (
  <TouchableOpacity onPress={() => handlerOpenCamera()}>
    <Image 
      mt="5" 
      source={{
        uri: `${REACT_APP_API_STORAGE_URL}/${proofDeliveryData.img}?v=${proofDeliveryData.updateTime}`
      }} 
      alt={proofDeliveryData.img} 
      style={{ width: width - 90, height: 200 }} 
    />
  </TouchableOpacity>
) : null

如果后端没有返回图片更新时间，也可以用当前请求时间戳作为临时方案，但会导致每次组件挂载都重新加载图片，适合临时调试。

2. 使用FastImage组件控制缓存策略 #

替换原生Image为react-native-fast-image，它提供了更灵活的缓存控制选项，可以强制跳过缓存重新请求图片。

第一步：安装依赖

npm install react-native-fast-image
# 或者 yarn add react-native-fast-image

第二步：替换代码中的Image组件

import FastImage from 'react-native-fast-image';

// ...

proofDeliveryData.img != '' ? (
  <TouchableOpacity onPress={() => handlerOpenCamera()}>
    <FastImage 
      mt="5" 
      source={{
        uri: `${REACT_APP_API_STORAGE_URL}/${proofDeliveryData.img}`,
        cache: FastImage.cacheControl.reload // 强制重新加载，跳过缓存
      }} 
      alt={proofDeliveryData.img} 
      style={{ width: width - 90, height: 200 }} 
    />
  </TouchableOpacity>
) : null

3. 利用key属性强制组件重新渲染 #

通过修改Image组件的key值，让RN认为这是一个新的组件实例，从而重新加载图片。key值需要和图片的更新状态绑定，比如使用图片更新时间或请求时间戳：

const [proofDeliveryImg, setProofDeliveryImg] = useState('');
const [imgKey, setImgKey] = useState(Date.now());

useEffect(() => {
  dispatch(GetTransaction({ id: transaction_data?.id, token: auth_access?.results?.access_token })).then((res) => {
    const newImg = res?.payload?.results?.bookings?.[0]?.proof_of_delivery;
    setProofDeliveryImg(newImg);
    // 每次获取数据时更新key，确保图片更新时触发重新渲染
    setImgKey(Date.now());
  })
}, [])

// ...

proofDeliveryImg != '' ? (
  <TouchableOpacity onPress={() => handlerOpenCamera()}>
    <Image 
      mt="5" 
      source={{ uri: `${REACT_APP_API_STORAGE_URL}/${proofDeliveryImg}` }} 
      alt={proofDeliveryImg} 
      key={imgKey} 
      style={{ width: width - 90, height: 200 }} 
    />
  </TouchableOpacity>
) : null

方法对比 #

• 方法1是最优解，后端可控，缓存策略合理，不会浪费资源。
• 方法2适合需要精细化控制缓存的场景，FastImage还支持更多高级特性（比如占位图、加载进度）。
• 方法3是临时解决方案，简单粗暴，但可能导致不必要的图片重新加载。

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