react-native 学习（三）

上一次讲到了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

下一节将 react-native 布局。。