React Native中获取图片缩放后的实际尺寸

要拿到contain模式下图片缩放后的实际尺寸，核心思路是先获取图片原始宽高 + 容器的宽高，再按照contain的等比例缩放规则自己计算——毕竟RN不会直接暴露这个缩放后的尺寸，得我们手动对齐它的内部逻辑。

下面是具体的实现步骤和完整示例：

步骤1：获取图片的原始尺寸 #

我们可以用Image.getSize()方法（兼容性更好的传统方式）或者RN 0.71+新增的useImageDimensions钩子来获取远程图片的原始宽高。这里先展示兼容性更强的Image.getSize()：

Image.getSize('https://blabla.com/img.jpg', (originalWidth, originalHeight) => {
  // 成功拿到图片原始宽高，存入状态备用
}, (error) => {
  console.error('获取图片原始尺寸失败:', error);
});

如果是本地图片，直接用Image.resolveAssetSource(source).width/height就能拿到原始尺寸，不用调用getSize。

步骤2：获取图片所在容器的尺寸 #

接下来要确定图片的“可用空间”——也就是它所在容器的实际渲染宽高。我们可以通过measure方法结合ref来实现：

// 函数组件示例
const containerRef = useRef(null);
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });

useLayoutEffect(() => {
  const updateContainerSize = () => {
    if (containerRef.current) {
      containerRef.current.measure((x, y, width, height) => {
        setContainerSize({ width, height });
      });
    }
  };

  // 初始获取容器尺寸
  updateContainerSize();
  // 可选：监听屏幕旋转/尺寸变化，实时更新容器尺寸
  const subscription = Dimensions.addEventListener('change', updateContainerSize);
  return () => subscription?.remove();
}, []);

// 容器组件绑定ref
<View ref={containerRef} style={{ /* 你的容器样式，比如固定宽高/flex占比 */ }}>
  <Image 
    style={{ resizeMode: Image.resizeMode.contain }} 
    source={{uri:'https://blabla.com/img.jpg'}} 
  />
</View>

步骤3：按照contain规则计算缩放后的尺寸 #

contain的核心逻辑是：等比例缩放图片，让图片的宽和高都不超过容器的对应维度。所以我们要取宽、高两个缩放比例里的较小值，再用这个比例去乘原始尺寸：

const calculateScaledSize = (originalWidth, originalHeight, containerWidth, containerHeight) => {
  const widthScale = containerWidth / originalWidth;
  const heightScale = containerHeight / originalHeight;
  // 取较小的比例，保证图片能完全放入容器
  const finalScale = Math.min(widthScale, heightScale);
  
  return {
    scaledWidth: originalWidth * finalScale,
    scaledHeight: originalHeight * finalScale
  };
};

完整的函数组件示例 #

把上面的步骤整合起来，就能得到一个可以实时获取缩放后尺寸的组件：

import React, { useState, useRef, useLayoutEffect } from 'react';
import { View, Image, Text, Dimensions } from 'react-native';

const ContainImageWithSize = () => {
  const [originalSize, setOriginalSize] = useState({ width: 0, height: 0 });
  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
  const [scaledSize, setScaledSize] = useState({ width: 0, height: 0 });
  const containerRef = useRef(null);
  const imageUri = 'https://blabla.com/img.jpg';

  // 获取图片原始尺寸
  useLayoutEffect(() => {
    Image.getSize(imageUri, (width, height) => {
      setOriginalSize({ width, height });
    }, (error) => {
      console.error('Failed to fetch image size:', error);
    });
  }, [imageUri]);

  // 获取容器尺寸并监听变化
  useLayoutEffect(() => {
    const updateContainerSize = () => {
      containerRef.current?.measure((x, y, width, height) => {
        setContainerSize({ width, height });
      });
    };

    updateContainerSize();
    const subscription = Dimensions.addEventListener('change', updateContainerSize);
    return () => subscription?.remove();
  }, []);

  // 计算缩放后的尺寸
  useLayoutEffect(() => {
    if (originalSize.width && originalSize.height && containerSize.width && containerSize.height) {
      const { scaledWidth, scaledHeight } = calculateScaledSize(
        originalSize.width,
        originalSize.height,
        containerSize.width,
        containerSize.height
      );
      setScaledSize({ width: scaledWidth, height: scaledHeight });
    }
  }, [originalSize, containerSize]);

  // 封装的计算函数
  const calculateScaledSize = (originalWidth, originalHeight, containerWidth, containerHeight) => {
    const widthScale = containerWidth / originalWidth;
    const heightScale = containerHeight / originalHeight;
    const finalScale = Math.min(widthScale, heightScale);
    return {
      scaledWidth: originalWidth * finalScale,
      scaledHeight: originalHeight * finalScale
    };
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <View 
        ref={containerRef} 
        style={{ width: 300, height: 400, borderWidth: 1, borderColor: '#ccc' }}
      >
        <Image 
          style={{ resizeMode: Image.resizeMode.contain, width: '100%', height: '100%' }} 
          source={{ uri: imageUri }} 
        />
      </View>
      {scaledSize.width > 0 && (
        <Text style={{ marginTop: 16 }}>
          缩放后实际尺寸：宽{scaledSize.width.toFixed(2)}px，高{scaledSize.height.toFixed(2)}px
        </Text>
      )}
    </View>
  );
};

export default ContainImageWithSize;

注意事项 #

• 记得处理图片加载失败的情况，避免因尺寸为0导致计算错误。
• 如果容器尺寸是动态变化的（比如flex布局随屏幕变化），一定要监听尺寸更新，保证计算结果实时准确。

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