react-native单位换算（px,pt,dp,ppi）
问题(带着问题学知识)
1. 设计师设计的UI设计图采⽤的是PX，⽽reactnative默认采⽤的dp，如何进⾏转换
2. 设备屏幕⼤⼩⼀样，但是分辨率不同，如何保证展⽰效果⼀致性
3. 分辨率相同，设备屏幕⼤⼩不同，怎么处理？
基础知识
1. 区分物理宽度和相对宽度。
－ 物理宽度是可测量的。⽐如说：⼿机设备的宽度4英⼨
－ 相对长度（像素宽度）是相对物理宽度⽽存在的。⽐如说：1英⼨的显⽰屏⾥⾯可以只有1个像素长度，也可以有100像素长度。这个可以结合window电脑的分辨率来理解，在物理设备（即屏幕）⼤⼩不变的情况，调整桌⾯分辨率，可以改变展⽰的像素点。1024768分辨率，即有：1024768＝786432个像素点。
1. 各种长度单位理解
reactnativeui框架1. PPI（DPI）⼤多数情况下这两种是相等的，即PPI ＝ DPI。PPI是屏幕像素与设备的⽐值：PPI＝屏幕对⾓线像素点／屏幕对⾓
线物理宽度。通过这个密度单位可以解决我们之前提出的问题（见最后的⽰例）。
2. PPI (pixels per inch) 图像分辨率 （每英⼨所包含的像素数）
3. DPI（dots per inch）打印精度 （每英⼨所能打印的点数）
4. dp（dip）（Density-independent pixels）⼀种基于屏幕密度的抽象单位。在每英⼨160点的显⽰器上，1dp = 1px。特别需
要注意dp是相对长度单位，简单的说1dp在不同的屏幕或者不同的ppi下展⽰出来的“物理长度”可能不⼀致。
5. px 像素点。也是相对长度
6. in（inch）英⼨。物理长度
7. pt 中⽂叫磅，等于1/72英⼨。物理长度
8. sp（与刻度⽆关的像素）：与dp类似，但是可以根据⽤户的字体⼤⼩⾸选项进⾏缩放，adroid设置字体的时候使⽤。
9. 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值。
长度单位换算公式
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。