zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    prometheus,alertmanager 报警配置详解
    使用 kubeadm 搭建 kubernetes1.10 集群
    kibana-sentinl-监控报警
    ELK集群模式部署
    mongo 误操作恢复数据
    mongo 实时同步工具 mongosync
    移动端巨坑——iphone6Plus默认设置不使用sessionStorage
    iphone6 Plus seesionStorage失效
    移动端手势拖拽排序神器Sortable.js
    vue使用swiper(转)
  • 原文地址:https://www.cnblogs.com/lhyforfront/p/8446398.html
Copyright © 2011-2022 走看看