React Native 布局方案
发布在React Native2016年4月6日view:2487React Nativereact-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 有过这样的描述,

enter image description here

关于 dpi 有过这样的描述

enter image description here

其中 240/160 两列,像素比同为1.5,可证明 screen densitydpi概念一样,只是换了个表达方式。

下面给出一些常见屏幕概念的对比表格

enter image description here

dppx 的关系为:

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 宽。

enter image description here

参考链接: 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

评论
发表评论
1年前

hi,我是淘宝网的前端工程师,我看到你的博客非常不错,有没有兴趣来淘宝网?欢迎投简历到我邮箱,三天内电话面试:fengyu.xy@alibaba-inc.com

WRITTEN BY
PUBLISHED IN
React Native

记载 React Native 开发过程中产出的文档

我的收藏