RN - ResizeMode在iOS上不生效，如何维持图片宽高比？

我之前在做React Native项目时也碰到过iOS和Android端图片resizeMode表现不一致的坑，针对你设置width:150+resizeMode:'center'的场景，给你几个可行的解决方向：

• 明确容器尺寸+裁剪溢出内容
  iOS的Image组件在仅设置宽度、未指定高度时，可能会优先保留图片原始高度，导致resizeMode='center'的效果不符合预期。你可以用一个固定宽高的View作为容器，开启溢出隐藏，再让图片填满容器并居中：

  <View style={{ width: 150, height: 150, overflow: 'hidden' }}>
    <Image
      source={require('./your-image.png')}
      resizeMode="center"
      style={{ width: '100%', height: '100%' }}
    />
  </View>
  

  这里的容器高度可以根据图片的原始宽高比计算，比如图片宽高比是3:2，那height设为100即可，这样能保证图片比例不变，同时居中显示。

• 使用AspectRatio组件约束比例
  如果不想手动计算高度，可以用React Native内置的AspectRatio组件来自动维持图片的原始比例，同时固定宽度：

  import { AspectRatio, Image } from 'react-native';
  
  // 假设图片原始宽高比是4/3，也可以通过Image.getSize异步获取真实比例
  <AspectRatio ratio={4/3} style={{ width: 150 }}>
    <Image
      source={你的图片源}
      resizeMode="center"
      style={{ width: '100%', height: '100%' }}
    />
  </AspectRatio>
  

  你可以用Image.getSize方法异步获取图片的真实宽高，然后计算比例，这样适配任何图片都没问题。

• 尝试替换为ImageBackground组件
  有时候ImageBackground在iOS端的渲染逻辑更稳定，尤其是resizeMode的表现。你可以直接用它代替Image，设置相同的宽高和resizeMode：

  <ImageBackground
    source={你的图片源}
    resizeMode="center"
    style={{ width: 150, height: 150 }}
  />
  

  如果不需要在图片上叠加内容，这个方案简单又有效。

• 检查图片格式和原始尺寸
  少数情况下，iOS对WebP格式的图片支持有细微差异，如果你的图片是WebP格式，可以换成PNG/JPG试试。另外，如果图片原始尺寸远小于设置的150px，iOS可能会自动拉伸导致居中效果不明显，这种情况建议使用高分辨率的图片。

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