React Native 布局方式比较简单,但它不是完整的web flex布局。
整体而言,并不是很强大。
web有很完善的屏幕适配方案,主要因为可以就行百分比布局,有一系列好用的单位,如em,rem。
React Native 上的flex 只能对一个方向上的空间就行比例布局,那么另一个怎么办。。。
网上有篇文章讲的是安卓适配的
http://blog.csdn.net/lmj623565791/article/details/45460089
大体思路就是获取屏幕的分辨率和基准的320X480的屏幕进行比例换算。
分析React Native可变的元素,和屏幕有关系的主要就是 width ,height 和margin
比如iPhone 6 的屏幕是375X667的,一个空间占屏幕一半面积, 美工切图安装320x480的方式切
width:160 * window.width/320 ,
height:240 * window.height/480,
marginBottom:40 * window.height/480
就是 width marginLeft marginRight 和屏幕宽度进行比例换算,
height marginBottom marginTop 进行比例换算
关于图片,iOS和安卓都有自己的图片规范,要分别切图
iOS的图片引用方式require('image!player_cd_empty')
这种方式对iOS合适,安卓不支持,Facebook有点坑啊,这种方式可以放在工程的资源目录里面。
很遗憾,我们得自己写算法进行图片的选择了
对于ios如果是iPhone6p就选3倍图
如果是安卓分hdpi,mdpi,xhdpi,xxhdpi进行换算,图片大小按照对比来换算,模式选contain,等比拉伸。
React Native会对Label自动适配宽高,如果某些情况需要放大字体也按照一定规律缩放
http://blog.csdn.net/loongggdroid/article/details/41485697
构造一个自己的字体单位
对于登陆那种不能上下滑动的布局,用对比的方式,对于,listview 等可以滑动的可以不用放大。
网友评论