React-Native 通过Dimensions调用全面屏手机高度异常的问题

      在实际开发中,React-Native通过调用Dimensions.get('window')去获取全面屏手机(MI 10)的高度时,发现获取到的高度要比实际手机高度来的短一些,针对此种情况对全面屏手机做适配。

      首先通过获取屏幕的纵横比来判断当前手机是否为全面屏,常规纵横比为大于1.8 (16:9)。(这里只做了简单判断,当然也有很多更为准确的方案)

      查阅相关资料后发现是因为全面屏的statusBar高度问题。

      导包:


import { Dimensions,NativeModules } from 'react-native';
const { StatusBarManager } = NativeModules;

     定义高和宽并计算纵宽比:

const {width,height} = Dimensions.get('window')
const wh = height/width

     对纵宽比做判断并拿到真实高度(针对安卓):

const trueheight = wh  > 1.8 ? height+ StatusBarManager.HEIGHT * 2 : height,

   存疑:

   1.计算纵宽比,当手机为全面屏时,是否会因为获取到的长度会比实际的少,导致wh(纵宽比)降低,影响后面的判断。

   补充:MI 10 取Dimensions.get('window').height  拿到的高度为710左右,屏幕宽度在392,纵宽比计算得1.81。

   2.在链接1中认为差一个StatusBar的高度,实际编写中,发现链接2的两个高度较为合理。 

   补充:全面屏发现小米10 占两个高度 , 另一款全面屏测试机占一个高度

 

    实际测试中发现ios设备如果为全面屏则不需要进行处理 所以这里我们需要加一层判断。

   

import { Dimensions, PixelRatio, NativeModules, Platform } from 'react-native';
const { StatusBarManager } = NativeModules;


height: Platform.OS === 'ios' ? Dimensions.get('window').height : Dimensions.get('window').height / Dimensions.get('window').width > 1.8 ? Dimensions.get('window').height + StatusBarManager.HEIGHT * 2 : Dimensions.get('window').height,

    参考链接:

     1.https://blog.csdn.net/u014012083/article/details/102938789

     2.https://www.cnblogs.com/piaobodewu/p/10680034.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值