react-native 学习

Posted 爱吃土豆的包子君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 学习的主要内容,如果未能解决你的问题,请参考以下文章

react-native版文字跑马灯

ubuntu 12.04 react-native 安装

在 react-native 中更改 TextInput 焦点的 underlineColorAndroid

react-native upoad imagepicker

react-native 图片选取与上传

在 react-native 和 firebase 3.1 中登录 Facebook