图片适配问题：设置maxWidth与contain后父容器高度未收缩

下面是几种不需要显式设置height属性的方案：

• 用AspectRatio组件包裹图片
  先确定图片的原始宽高比，将图片放在AspectRatio组件中，设置组件的ratio为图片的宽高比。这样父容器会根据图片缩放后的宽度自动调整高度，保持和图片一致的比例，不会留存多余高度。示例代码：

  import { AspectRatio, Image } from 'react-native';
  
  // 假设图片原始宽高为1200x800，宽高比就是1.5
  <AspectRatio ratio={1.5}>
    <Image
      source={require('./your-image.png')}
      style={{ maxWidth: '90%', resizeMode: 'contain', width: '100%' }}
    />
  </AspectRatio>
  

  如果是网络图片，需要先通过Image.getSize()获取图片原始宽高，再计算比例赋值给ratio。

• 监听图片onLayout事件动态设置父容器高度
  利用图片的onLayout事件获取其实际渲染后的高度，再将这个高度同步给父容器。这样父容器会完全贴合图片的实际高度。示例代码：

  import { useState } from 'react';
  import { View, Image } from 'react-native';
  
  export default function App() {
    const [parentHeight, setParentHeight] = useState(0);
  
    return (
      <View style={{ borderWidth: 1, height: parentHeight }}>
        <Image
          source={require('./your-image.png')}
          style={{ maxWidth: '90%', resizeMode: 'contain', alignSelf: 'center' }}
          onLayout={(e) => {
            setParentHeight(e.nativeEvent.layout.height);
          }}
        />
      </View>
    );
  }
  

• 使用第三方自动高度图片库
  可以用react-native-auto-height-image这个库，它会自动根据图片宽度和自身宽高比计算高度，无需手动处理。安装后直接替换原生Image组件即可，父容器会自适应图片高度。

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