最近在用react native做一个安卓端的app,设计师给了540dp x 960dp的设计图。但是按照设计图上的尺寸来布局的话,最后实现的效果是跟设计图是不同的。使用Dimensions API来获取虚拟机的宽高是 384 x 592 。所以按照设计图的尺寸是肯定得不到一样的效果的。然后自己的解决方案是 用机器的 宽高与设计图的宽高的比例 x 设计图的尺寸
const deviceWidthDp = 384;
const uiWidthDp = 540;
function convertW(uiElementDp){
return uiElementDp * deviceWidthDp / uiWidthDp
}
function convertH(uiElementDp){
return uiElementDp * deviceHeightDp / uiHeightDp
}
var styles = StyleSheet.create({
logo : {
height : convertH(100),
width : convertW(100)
}
})
但是疑惑的是,因为这个问题,我在github上看了很多项目的源码,发现那些项目中的长度都没任何处理,都是直接的一个数字长度。类似这样:
var styles = StyleSheet.create({
header : {
marginTop : 10
}
})
这是因为他们的设计图给的尺寸与模拟器的尺寸是一样的么?
这几天都在查阅相关资料,但还是不清楚,比较疑惑,还望各位指教!
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…