如何在React Native中获取屏幕厘米/毫米实际尺寸以展示图片真实大小？

要在React Native中展示图片的实际物理尺寸（如厘米），核心是将图片的像素尺寸转换为物理单位——关键在于获取设备的每英寸像素数（DPI），再结合像素尺寸计算厘米数（1英寸=2.54厘米）。

实现步骤与代码示例 #

1. 基础实现（无额外依赖）

使用React Native内置API获取图片像素尺寸，结合屏幕参数计算设备DPI：

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

const ImagePhysicalSize = () => {
  const [physicalSize, setPhysicalSize] = useState({ width: 0, height: 0 });
  const imageUri = 'https://example.com/your-image.jpg'; // 替换为目标图片地址

  useEffect(() => {
    // 获取图片原始像素宽高
    Image.getSize(imageUri, (widthPx, heightPx) => {
      // 计算屏幕物理尺寸（英寸）：逻辑尺寸 / 像素密度
      const { width: screenWidthDp, height: screenHeightDp } = Dimensions.get('window');
      const pixelRatio = PixelRatio.get();
      const screenWidthInch = screenWidthDp / pixelRatio;
      const screenHeightInch = screenHeightDp / pixelRatio;

      // 通过屏幕对角线计算精准DPI
      const screenDiagonalInch = Math.sqrt(screenWidthInch ** 2 + screenHeightInch ** 2);
      const screenDiagonalPx = Math.sqrt((screenWidthDp * pixelRatio) ** 2 + (screenHeightDp * pixelRatio) ** 2);
      const dpi = screenDiagonalPx / screenDiagonalInch;

      // 像素转厘米：(像素数 / DPI) * 2.54
      const widthCm = (widthPx / dpi) * 2.54;
      const heightCm = (heightPx / dpi) * 2.54;

      setPhysicalSize({
        width: parseFloat(widthCm.toFixed(2)),
        height: parseFloat(heightCm.toFixed(2))
      });
    }, (error) => {
      console.error('获取图片尺寸失败:', error);
    });
  }, []);

  return (
    <View style={{ padding: 20, alignItems: 'center' }}>
      <Image
        source={{ uri: imageUri }}
        style={{ width: 200, height: 200, marginBottom: 20 }}
        resizeMode="contain"
      />
      <Text>实际物理尺寸：{physicalSize.width}cm × {physicalSize.height}cm</Text>
    </View>
  );
};

export default ImagePhysicalSize;

2. 高精度实现（依赖第三方库）

如果需要更精准的设备DPI数据，可以使用react-native-device-info库：

先安装依赖：

npm install react-native-device-info
# 或 yarn add react-native-device-info

实现代码：

import React, { useState, useEffect } from 'react';
import { View, Text, Image } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const ImagePhysicalSize = () => {
  const [physicalSize, setPhysicalSize] = useState({ width: 0, height: 0 });
  const imageUri = 'https://example.com/your-image.jpg';

  useEffect(() => {
    Image.getSize(imageUri, (widthPx, heightPx) => {
      // 获取设备原生DPI
      const dpi = DeviceInfo.getDpi();
      const widthCm = (widthPx / dpi) * 2.54;
      const heightCm = (heightPx / dpi) * 2.54;

      setPhysicalSize({
        width: parseFloat(widthCm.toFixed(2)),
        height: parseFloat(heightCm.toFixed(2))
      });
    }, (error) => {
      console.error('获取图片尺寸失败:', error);
    });
  }, []);

  return (
    <View style={{ padding: 20, alignItems: 'center' }}>
      <Image
        source={{ uri: imageUri }}
        style={{ width: 200, height: 200, marginBottom: 20 }}
        resizeMode="contain"
      />
      <Text>实际物理尺寸：{physicalSize.width}cm × {physicalSize.height}cm</Text>
    </View>
  );
};

export default ImagePhysicalSize;

注意事项 #

• 本地图片适配：若使用本地资源（如require('./assets/image.png')），Image.getSize无法直接获取尺寸，可改用react-native-image-size库读取本地图片的像素参数。
• 精度误差：不同设备的DPI计算可能存在微小偏差，若需工业级精度，建议结合硬件传感器数据校准。

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