我来帮你理清这个问题的根源，再给你两个通用的解决方案，不用手动计算比例就能适配所有图片！

问题出在哪？ #

你设置了容器的aspectRatio: 1，这强制容器变成了正方形，但你的图片宽高比是1080/607≈1.78，和正方形比例完全不匹配。当用resizeMode="contain"时，图片会保持自身比例完整显示在容器内——因为你给容器设了width: '100%'，图片会先填满容器的宽度，然后按比例缩小高度，这样容器上下就会多出一大块红色空白。

而移除aspectRatio后，容器没有明确的高度，React Native的Image组件默认需要明确尺寸才会渲染，所以图片就“消失”了。

解决方案1：自动适配图片比例（通用无计算） #

利用Image的onLayout事件获取图片的实际宽高比，动态设置容器的aspectRatio，这样容器会完美贴合图片的比例，不会有多余空白：

import React, { useState } from 'react';
import { Image, StyleSheet, View } from 'react-native';

export default function YourComponent() {
  const [imgRatio, setImgRatio] = useState(null);

  const handleImageLayout = (e) => {
    const { width, height } = e.nativeEvent.layout;
    setImgRatio(width / height);
  };

  return (
    <View style={styles.wrapper}>
      <View 
        style={[
          styles.imgContainer, 
          imgRatio && { aspectRatio: imgRatio }
        ]}
      >
        <Image
          source={{ uri: 'http://your-image-server-url.com' }}
          resizeMode="contain"
          style={styles.image}
          onLayout={handleImageLayout}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    width: '100%',
    padding: 10, // 可选，根据你的布局调整
  },
  imgContainer: {
    backgroundColor: 'red',
    width: '100%',
  },
  image: {
    width: '100%',
    height: '100%',
  },
});

这个方法不管你的图片是横版、竖版还是任意比例，容器都会自动适配，完全不用你手动算比例。

解决方案2：更简洁的无计算方案 #

如果你不想用onLayout，可以直接让容器包裹图片的实际尺寸，去掉容器的aspectRatio，靠justifyContent和alignItems让图片居中，同时Image自动计算高度：

return (
  <View style={styles.imgContainer}>
    <Image
      source={{ uri: 'http://your-image-server-url.com' }}
      resizeMode="contain"
      style={styles.image}
    />
  </View>
);

const styles = StyleSheet.create({
  imgContainer: {
    backgroundColor: 'red',
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: '100%',
  },
});

这里Image设置了width: '100%'，resizeMode="contain"会让它自动根据图片比例算出合适的高度，容器因为设置了居中属性，会自动包裹住图片的实际大小，不会留下多余空白。

内容的提问来源于stack exchange，提问作者Gaylord.P