React Native 的默認單位和自適應佈局方案

默認單位 dp

設置默認寬高的時，是不須要帶單位的，以下所示：

<View style={{width:100,height:100}}></View>

那麼，佈局的默認單位是什麼？在官方文檔中有一段關於佈局單位的描述。

static getPixelSizeForLayoutSize(layoutSize: number) 
Converts a layout size (dp) to pixel size (px).
Guaranteed to return an integer number.

getPixelSizeForLayoutSize 方式，是用於把默認以 dp 單位長度，轉化爲對應的 px 數值。那麼很明顯， 默認的佈局單位是 dp。

1dp = 1(css)px

dp 究竟是個什麼樣單位？

關於 dp 官網給了我一個定義：

A dp is equal to one physical pixel on a screen with a density of 160.To calculate dp:
dp = (width in pixels * 160) /  screen density

很明顯， dp 與 物理px 有一個關於 (160/screen density) 的正相關的關係：

1dp = 1物理px （screen density = 160）
1dp = 2物理px （screen density = 320）
1dp = 3物理px （screen density = 480）

同理在 H5 頁面，如下等式是成立的。

1 (css)px = 1物理px （device pixel ratio = 1）
1 (css)px = 2物理px （device pixel ratio = 2）
1 (css)px = 3物理px （device pixel ratio = 3）

而實際上 (160/screen density) 就是 pixelRatio，也就是就是寫 H5 頁面時，像素比率 window.devicePixelRatio。

也就是說，1dp = 1(css)px。

屏幕的單位和概念對比

在 Android 中，screen density 等於 DPI，表示像素密度。

在 google 佈局單位文檔中，關於 screen density 有過這樣的描述，

dpi 有過這樣的描述

其中 240/160 兩列，像素比同爲1.5，可證實 screen density 和 dpi概念同樣，只是換了個表達方式。

下面給出一些常見屏幕概念的對比表格

dp 與 px 的關係爲：

1dp = 1(css)px = 1px * pixelRatio

自適應佈局方案

自適應佈局方案採用了，將 UI 等比放大到 app 上的自適應佈局。

UI 給默認 640 的圖，採用 pxToDp 函數，便可將 UI 等比放大到 Android 機器上。

import {Dimensions} from 'react-native';

// 58 app 只有豎屏模式，因此能夠只獲取一次 width
const deviceWidthDp = Dimensions.get('window').width;
// UI 默認給圖是 640
const uiWidthPx = 640;

function pxToDp(uiElementPx) {
return uiElementPx *  deviceWidthDp / uiWidthPx;
}

export default pxToDp;

調用方法

import pxToDp from './pxToDp';

...
<View style={{width:pxToDp(100),height:pxToDp(100)}}></View>
...

若是 UI 圖默認不是 640 寬，能夠經過 PS 設置爲 640 寬。

參考連接：
RN官網 http://facebook.github.io/react-native/docs/pixelratio.html#content
px、dp、sp對比 http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-on-android/2025541#2025541
Android 佈局方案（Google）https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-density-independent-pixels-dp-
Android 佈局方案（趙凱強）http://blog.csdn.net/zhaokaiqiang1992/article/details/45419023