默许单元 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