react-native样式布局

使用react-native是不带单位的,样式都是
<View style={{width:100,height:100}}></View>
都是这样写的 
官方文档中有一段关于布局的描述是:

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

1dp = 1(css)px = pixelRatio

官网给dp的定义是:
A dp is equal to one physical pixel on a screen with a density of 160.
To calculate dp:
dp = (width in pixel * 160) / screen density

很明显,dp与px有一个关于(160/screen density)的正相关关系
自适应布局方案采用了,将ui等比放大到app上的自适应布局

import {Dimensions} from 'react-native';
const deviceWidthDp = Dimensions.get('window').width;
const uiWidth = 640;
function pxToDp(uiElementPx) {
return uiElementPx * deviceWidthDp / uiWidth;
}

调用方法:

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

 

posted @ 2016-04-19 19:59  tiva  阅读(383)  评论(0编辑  收藏  举报