React Native 的默认单位和自适应布局方案(转)

原文链接: https://segmentfault.com/a/1190000004878644

默认单位 dp

设置默认宽高的时，是不需要带单位的，如下所示：

那么，布局的默认单位是什么？在官方文档中有一段关于布局单位的描述。

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

getPixelSizeForLayoutSize方式，是用于把默认以dp单位长度，转化为对应的px数值。那么很明显， 默认的布局单位是dp。

1dp = 1(css)px

dp到底是个什么样单位？

关于 dp 官网给了我一个定义：

A dpisequal to one physical pixelona screenwitha densityof160.To calculatedp:dp = (widthinpixels *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 只有竖屏模式，所以可以只获取一次 widthconstdeviceWidthDp = Dimensions.get('window').width;// UI 默认给图是 640constuiWidthPx =640;functionpxToDp(uiElementPx){returnuiElementPx *  deviceWidthDp / uiWidthPx;}exportdefaultpxToDp;

调用方法

import pxToDp from './pxToDp';......

如果 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

4月6日发布

更多