Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

关于react native 的疑惑

最近在用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
    }
})

这是因为他们的设计图给的尺寸与模拟器的尺寸是一样的么?

这几天都在查阅相关资料,但还是不清楚,比较疑惑,还望各位指教!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

你是如何理解scrollview的呢?屏幕滚动是正常的,你只需要适配设计的宽度就可以,高度应该去自行适应,为何要整屏效果在不同的设备上一样呢?你开发的是app,高度不确定的进行滚动是很正常的,除非是某些活动界面需要整屏效果除外。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...