布局尺寸（dp）

Density-independent Pixels，通过dp定义的布局尺寸会根据屏幕密度自动缩放。例如：

• 在160dpi（基线密度）的屏幕上，1dp = 1px；
• 在320dpi（xhdpi）的屏幕上，1dp = 2px（公式：px = dp × (dpi/160)）。
  ​​

RN中的应用​​： RN默认使用dp作为布局单位，开发者无需显式指定单位，系统会根据设备密度（scale）自动转换。例如，width: 100在Android上表示100dp，在iOS上表示100pt，但两者效果等价于物理尺寸。

像素尺寸（px）

​​px是屏幕上的实际物理像素点，与设备分辨率直接相关。

​​问题​​： 直接使用px可能导致UI在不同密度的屏幕上显示不一致。例如，在640px宽度的设计稿中，iPhone4（640×960px）会占满屏幕，但iPhone6（750×1334px）则会留白。

例子

iPhone16的dp和px大小：

• {“fontScale”: 1, “height”: 852, “scale”: 3, “width”: 393}
• {“height”: 2556, “width”: 1179}

如何获取设备的像素尺寸

第一步：先获取设备的布局尺寸dp。dimensions

const {height, width} = Dimensions.get('screen');

第二步：将dp转换成px。pixelratio

{
  width: PixelRatio.getPixelSizeForLayoutSize(width),
  height: PixelRatio.getPixelSizeForLayoutSize(height),
}