React Native Image开发与生产模式表现不一致问题排查

问题场景 #

使用React Native结合Expo开发iOS应用时，开发模式下Logo图片显示正常，但生产模式下图片出现放大且被裁切的情况，相关代码如下：

<Image
    source={require("../assets/Logo.png")}
    resizeMode={"center"}
    style={{
        resizeMode: "center",
        transform: [{ scale: 0.8 }],
        width: 250,
        height: 75,
    }}
/>

为了让resizeMode生效，同时设置了组件属性和样式中的resizeMode，但问题依然存在。

开发模式显示效果：

生产模式异常效果：

可能原因及解决办法 #

• 重复设置resizeMode导致行为冲突
  React Native中Image组件的resizeMode属性优先级高于样式中的同名设置，同时设置会让渲染逻辑在开发/生产环境中出现不一致——开发模式可能忽略样式中的设置，而生产模式处理逻辑不同，引发显示异常。
  解决：只保留一处resizeMode设置，推荐用组件属性的方式。

• transform: scale的适配问题
  scale变换基于图片中心点缩放，生产模式下Expo会对本地图片做压缩优化，可能改变图片实际渲染尺寸，导致缩放后的图片超出设置的width/height容器范围，最终被裁切。
  解决：移除transform: [{ scale: 0.8 }]，直接调整width和height数值控制图片大小，确保容器尺寸和图片原始比例匹配。

• Expo生产模式的图片优化差异
  Expo生产构建时会自动压缩本地图片，可能改变图片原始宽高比，导致和开发模式渲染结果不一致。
  解决：

  1. 检查Logo.png原始尺寸，确保设置的width/height比例和图片原生比例一致；
  2. 尝试改用resizeMode="contain"，该模式会保持图片比例并完整显示在容器内，避免裁切；
  3. 若需保留原始图片尺寸，可在app.json中临时配置expo.ios.imageAssetMode: 'raw'禁用图片优化（不推荐长期使用，建议优先匹配比例）。

修改后的示例代码 #

<Image
    source={require("../assets/Logo.png")}
    resizeMode="contain"
    style={{
        width: 250,
        height: 75,
    }}
/>

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