升级Expo SDK 50后React Native iOS应用图片无法显示求助

一、本地图片（assets）问题排查 #

• 检查Metro配置的资源扩展名
  Metro默认未包含所有图片格式，需在metro.config.js中确保resolver.sourceExts添加了你用到的格式：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  const config = {};
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), {
    resolver: {
      sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'png', 'jpg', 'jpeg', 'svg'],
    },
  });
  

• 校验本地图片导入路径
  升级后路径解析规则变化，避免多层嵌套的相对路径简写，优先使用根路径别名（若配置）或完整正确路径。例如：
  不推荐：import img from '../../assets/icon.png'
  推荐（配别名后）：import img from '@assets/icon.png'
• 彻底清理缓存重建
  执行以下命令清除Metro和iOS缓存后重新构建：

  npx react-native start --reset-cache
  cd ios && pod deintegrate && pod install && cd ..
  npx react-native run-ios
  

二、网络图片问题排查 #

• 检查iOS网络权限配置
  若使用HTTP图片链接，需在Info.plist中添加访问权限；HTTPS链接需确认证书有效性：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

  注：上线时建议针对特定域名配置NSExceptionDomains，不要全局开启NSAllowsArbitraryLoads。
• 规范Image组件使用
  网络图片必须以{ uri: '图片链接' }格式传入source属性，示例：
  正确写法：<Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 100, height: 100 }} />
  错误写法：<Image source="https://example.com/image.jpg" />

三、Web与iOS差异的核心原因 #

Web依赖Webpack的资源打包映射逻辑，而Metro遵循React Native原生资源查找规则；同时iOS沙盒机制对资源访问权限、路径解析的限制比Web更严格，这是两者表现不同的根本原因。

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