React Native Expo多比例图片固定宽度动态适配高度问题咨询

首先明确：仅靠样式无法完全实现该需求，React Native的Image组件和Web端<img>标签行为不同，不会自动根据远程图片原始宽高比计算自适应高度，必须添加少量逻辑处理，具体实现步骤如下：

步骤1：处理无图场景 #

首先加简单的条件渲染，只有当subject.ImageUrl存在且有效时才渲染图片容器，无图时直接不渲染该部分，自然就不会占位，下方内容自动上移：

{subject.ImageUrl && (
  <View style={styles.ImageContainer}>
    <Image 
      style={[styles.Image, { height: calculatedImageHeight }]} 
      source={{ uri: subject.ImageUrl }}
    />
  </View>
)}

注意：你之前示例代码中source={{ url: subject.ImageUrl }}属于属性名写错，React Native Image的source参数属性名是uri不是url，这个也是你之前测试时图片不显示的常见诱因。

步骤2：动态计算图片高度 #

利用React Native内置的Image.getSize()方法获取远程图片的原始宽高，结合预设的90%屏幕宽度，计算出符合原始比例的自适应高度：

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

// 先获取屏幕宽度，计算出图片容器固定宽度
const screenWidth = Dimensions.get('window').width;
const imageContainerWidth = screenWidth * 0.9;

const SubjectImage = ({ imageUrl }) => {
  const [imageHeight, setImageHeight] = useState(0);

  useEffect(() => {
    if (!imageUrl) return;
    // 获取图片原始宽高
    Image.getSize(imageUrl, (width, height) => {
      // 按比例计算自适应高度
      const adaptiveHeight = (height / width) * imageContainerWidth;
      setImageHeight(adaptiveHeight);
    }, (error) => {
      // 图片加载失败时设置高度为0，不占位
      setImageHeight(0);
      console.log('图片加载失败', error);
    });
  }, [imageUrl]);

  if (imageHeight === 0) return null;

  return (
    <View style={styles.ImageContainer}>
      <Image 
        style={[styles.Image, { height: imageHeight }]} 
        source={{ uri: imageUrl }}
        resizeMode="contain"
      />
    </View>
  );
};

// 样式
const styles = StyleSheet.create({
  ImageContainer: {
    width: imageContainerWidth,
    alignSelf: 'center',
  },
  Image: {
    width: '100%',
  }
});

补充说明 #

你之前如果在Web端用纯样式实现过类似效果，是因为Web原生<img>标签默认具备按原始比例自适应高度的特性，而React Native的Image组件为了性能考虑，默认需要显式指定尺寸，所以必须添加上述少量逻辑。

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