升级Expo SDK 50后CachedImage无法正常渲染的问题排查

• 核心问题：你使用的CachedImage属于第三方图片缓存库，Expo SDK 50对应的React Native版本（0.73）底层API有变更，旧版本的第三方缓存库未适配这些变更，导致图片加载失败，只能渲染样式定义的占位形状。

• 解决步骤：

  1. 升级对应的缓存图片依赖
     先确认你用的CachedImage具体是哪个库（比如react-native-cached-image、@georstat/react-native-image-cache这类），查看它的版本更新记录，找到适配Expo SDK 50的版本后执行升级：

     # 替换成你实际使用的库名
     npm install <缓存图片库名>@latest
     # 使用yarn的话执行
     yarn add <缓存图片库名>@latest
     

  2. 改用Expo官方的缓存方案
     如果第三方库暂未适配，直接替换为Expo官方的expo-image组件，它自带完善的缓存功能，完全兼容最新SDK版本，代码修改示例：

     import { Image } from 'expo-image';
     
     <Image
       style={styles.homeImage}
       source={{ uri: item.picture_compressed }}
       cachePolicy="memory-disk" // 开启内存+磁盘双缓存
       onLoad={() => {
         Animated.timing(imageOpacity, {
           toValue: 1,
           duration: 1000,
           useNativeDriver: true,
         }).start();
       }}
     />
     

  3. 清理缓存重建项目
     升级依赖后必须清理Expo缓存再重启项目，避免旧缓存干扰：

     npx expo start --clear
     # 若为裸项目，还需清理原生端构建缓存
     # iOS: 进入ios目录执行 pod install --repo-update
     # Android: 进入android目录执行 ./gradlew clean
     

• 补充说明：
  原生Image组件能正常工作，是因为它属于Expo/React Native的核心组件，SDK升级时官方已同步适配底层变更；而第三方组件需要开发者自行跟进版本适配，因此出现了功能差异。

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