上一次讲到了react-native 的配置环境 和 如何去进行调试,这一次我们说一说,关于react-native的 样式兼容问题。
由于iphonex的发售,在兼容的时候,我门也需要去考虑iphoneX。iphoneX的兼容思路就是,将上部和下部分的安全区域空出来。所以在每次写样式的整体布局的时候,都需要去判断是不是iphoneX,如果是iphoneX的话,那么整体的话,给一个paddingTop 和 paddingBottom。
好了,闲扯了一个 东西。让我们继续将react-native的适配。
一般 这种属于 webApp UI给的尺寸是 那种带有px 的,而我们 手机上的最好适配是dhpi。也就是 根据像素密度去进行适配。因为我们的手机他是分为 1倍率,2倍率,1.5倍率的。像iphpne6他是2倍率,iphone6P他是3倍率。。。(关于这些手机的密度怎么获取的可以直接去react-native的官网,然后去找pixelRatio这个API)在此。。我还是要着重说一下 iphoneX。他是3倍率的手机屏。但是他的宽度和iphone6一致,只不过高度更高了。
一般 像我们设计师给的尺寸是 750的尺寸,也就是 iphone6的尺寸。 然后 iphone6的像素密度是2。接下来 我门要开始一系列的换算了。。。
1.首先我们需要将px转换成dp
做过安卓的都知道,在安卓当中,单位都是dp而非px。 dp他是适配于各个分辨率的手机屏幕的。
px和dp之间的关系是:dp = px/像素密度 (在此,iphone6的像素密度是2)
所以 750px = 750/2 dp
2. 将设计师给的尺寸转换成dp并且作为一个基准
我们 以计算出来的 iphone6的转换来作为一个基准。
3.计算 当前 手机屏幕的尺寸
我们计算 出当前手机屏幕的尺寸Dimensions.get(‘window‘).width;Dimensions.get(‘window‘).height;
将这个尺寸与 iphone6 的尺寸进行对比,得到一个缩放的比例,又根据 上一步的基准进行十字相乘,得到最终的大小
说了这么多。。。直接提供代码地址。。
这是我学习的资料。。。我给了star。。。觉得写的蛮好的。大家可以借鉴借鉴
转载:https://github.com/lizhuoyuan/ReactNativeScreenUtil/blob/master/ScreenUtil.js