react-native 单位换算(px,pt,dp,ppi)

问题(带着问题学知识)

1. 设计师设计的UI设计图采用的是PX，而reactnative默认采用的dp，如何进行转换
2. 设备屏幕大小一样，但是分辨率不同，如何保证展示效果一致性
3. 分辨率相同，设备屏幕大小不同，怎么处理？

基础知识

1. 区分物理宽度和相对宽度。
   － 物理宽度是可测量的。比如说：手机设备的宽度4英寸
   － 相对长度（像素宽度）是相对物理宽度而存在的。比如说：1英寸的显示屏里面可以只有1个像素长度，也可以有100像素长度。这个可以结合window电脑的分辨率来理解，在物理设备（即屏幕）大小不变的情况，调整桌面分辨率，可以改变展示的像素点。1024768分辨率，即有：1024768＝786432个像素点。

2. 各种长度单位理解

   • PPI（DPI）大多数情况下这两种是相等的，即PPI ＝ DPI。PPI是屏幕像素与设备的比值：PPI＝屏幕对角线像素点／屏幕对角线物理宽度。通过这个密度单位可以解决我们之前提出的问题（见最后的示例）。
   • PPI (pixels per inch) 图像分辨率 （每英寸所包含的像素数）
   • DPI（dots per inch）打印精度 （每英寸所能打印的点数）
   • dp（dip）（Density-independent pixels）一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px。特别需要注意dp是相对长度单位，简单的说1dp在不同的屏幕或者不同的ppi下展示出来的“物理长度”可能不一致。
   • px 像素点。也是相对长度
   • in（inch）英寸。物理长度
   • pt 中文叫磅，等于1/72英寸。物理长度
   • sp（与刻度无关的像素）：与dp类似，但是可以根据用户的字体大小首选项进行缩放，adroid设置字体的时候使用。
   • density 密度。density ≈ 设备PPI/160PPI。比如我是320PPI设备，density＝320PPI/160PPI=2;density是一个int类型的值，比如说我的设备是326PPI(iPhone6的ppi)，density也是等于2；在比如401PPI(iPhone6 Plus的ppi)density等于3；401-320=81 , 480 - 401=79 因此79跟加接近，所以density等于480PPI的density值。
     react-native 官网针对这个的说明

长度单位换算公式

• 160PPI下：

  • 1dp = 1px = 1dip
  • 1pt = 1/72in
  • 1pt = 160/72 sp
    推导过程
    160 PPI ＝ 160px／1in ＝ 160dp／1in
    1pt ＝ 1/72in ＝> 1in = 72pt
    1pt = 160dp/72
  • 1px = dp * (density / 160)

• 不同PPI的dp与px的换算关系

  • 160PPI(mdpi) : 1dp = 1px
  • 240PPI(hdpi) : 1dp = 1.5px
  • 320PPI(xhdpi) : 1dp = 2px
    • iPhone 4, 4S ; iPhone 5, 5c, 5s ; iPhone 6都是这个ppi
  • 480PPI(xxhdpi) : 1dp = 3px

UI设计到android布局示例

=======================================
UI设计原型：基于iphone6
分辨率：1334 x 750 px；
屏幕大小：4.7英寸
DPI 326dpi（约等于320dpi，density=2;1dp＝(1*density)px）
全屏dp值：667 x 375 dp ((1334/density) x (750/density) )

=======================================

• 假设UI设计师顶部导航了100px，这时候转换成dp就是：100px/2=50dp