react-native 單位換算(px,pt,dp,ppi)

問題(帶着問題學知識)

1. 設計師設計的UI設計圖採用的是PX，而reactnative默認採用的dp，如何進行轉換

2. 設備屏幕大小同樣，可是分辨率不一樣，如何保證展現效果一致性

3. 分辨率相同，設備屏幕大小不一樣，怎麼處理？

基礎知識

1. 區分物理寬度和相對寬度。
   － 物理寬度是可測量的。好比說：手機設備的寬度4英寸

－ 相對長度（像素寬度）是相對物理寬度而存在的。好比說：1英寸的顯示屏裏面能夠只有1個像素長度，也能夠有100像素長度。這個能夠結合window電腦的分辨率來理解，在物理設備（即屏幕）大小不變的狀況，調整桌面分辨率，能夠改變展現的像素點。1024768分辨率，即有：1024768＝786432個像素點。

1. 各類長度單位理解

   • 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