使用物理单位（厘米、英寸）在React Native中进行尺寸调整

Question

我正在给我的应用添加“标尺”功能，关键是需要保证在多个设备上标尺的尺寸/比例（以厘米为单位）始终保持一致，也就是说，一个“刻度”必须始终等于1厘米。然而，我没有在任何文档中找到一种使用现实世界单位（cm，inch）来调整组件大小的方法（就像在CSS中那样）。我也没有找到一种准确获取屏幕尺寸（以英寸或厘米为单位）或DPI的方法。

有没有一种方法可以在React Native中使用厘米/英寸，或者获取真实的屏幕DPI？

- Pedro Affonso

---

https://dev59.com/GLTma4cB1Zd3GeqP4EzJ - LonelyCpp

Answer 1

1英寸 = 160 dp (始终如此)

请注意，无论屏幕尺寸如何，1英寸始终等于160dp。dp（密度无关像素）是1/160英寸的物理距离。

React-Native使用dp（密度无关像素）作为样式单位。

因此，如果您编写：

<View style={{ height: 160, width:160, backgroundColor: 'red }}>
</View>

这将为您提供一个红色的块，大小为1英寸 X 1英寸。

- Vipul

---

实际上，这就是问题所在，在React Native中，160 dp并不总是等于1英寸。在我的测试设备上，我得到的1英寸约等于140 dp。 - Pedro Affonso

@PedroAffonso 你是在模拟器上进行测试吗？如果是的话，模拟器的尺寸可能不符合比例。 - Vipul

Answer 2

在React Native中，尺寸属性是无单位的，因此这些属性在ReactNative中不可用。最好的方法是使用PixelRatio的getPixelSizeForLayoutSize()函数，该函数在此文档中有详细说明：https://reactnative.dev/docs/pixelratio#getpixelsizeforlayoutsize

您还需要知道您解决方案的像素密度（dpi），以及以下公式： https://www.pixelto.net/px-to-cm-converter

在尝试将1cm适配到屏幕上的微小像素时，您仍可能遇到一些奇怪的情况，例如像素被分成一半和其他舍入误差，这是由于物理限制导致的，因此可能并不总是等于1cm。

- mikep17