一、最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边

二、但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏的statusBar高度问题。

三、适配方案

通过获取屏幕纵横比来判断是否为全面屏

1、获取宽高

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

2、计算纵横比

const wh = height/width

3、全面屏手机一般纵横比wh大于1.8,正常手机屏幕小于1.8

4、获取statusBar高度

const { StatusBarManager } = NativeModules;

5、纵横比减去2个statusBar高度就是正常的了

react native Expo适配全面屏/Expo识别全面屏和正常屏的更多相关文章

  1. 从React Native到微服务,落地一个全栈解决方案

    Poplar是一个社交主题的内容社区,但自身并不做社区,旨在提供可快速二次开发的开源基础套件.前端基于React Native与Redux构建,后端由Spring Boot.Dubbo.Zookeep ...

  2. React Native 性能优化指南【全网最全,值得收藏】

    2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了.文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能 ...

  3. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  4. Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  5. React Native 开发豆瓣评分(五)屏幕适配方案

    前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...

  6. React Native & Google & Proxy

    React Native & Google & Proxy https://snack.expo.io/ https://expo.io/snacks/@xgqfrms https:/ ...

  7. Expo大作战(二)--expo的生命周期,expo社区交流方式,expo学习必备资源,开发使用expo时关注的一些问题

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  8. React Native踩坑日记 —— tailwind-rn

    项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看, ...

  9. React Native纯干货总结

    随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...

  10. 腾讯优测优分享 | 探索react native首屏渲染最佳实践

    腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~ 此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app ...

随机推荐

  1. skeleton directory: /etc/skel

    第一次接触这个词汇 还是在LFS8.2里面,感觉有点吓人.好好一个计算机操作系统,怎么搞出这个恐怖的术语.... 当使用useradd 或者其他命令创建用户的时候,/etc/skel这个目录下的文件. ...

  2. Vs2017 NetCode EF Mysql 控制台应用

    1  运行环境   vs2017   NetCode2.0 2 NuGet  MySql.Data.EntityFrameworkCore 8.0.18   Json.Net 1.0.16 3  源代 ...

  3. idou老师教你学Istio 09: 如何用Istio实现K8S Ingress流量管理

    前言 在Istio的世界里,如果想把外部的请求流量引入网格,你需要认识并会学会配置Istio Ingress Gateway 什么是Ingress Gateway 由于Kubernetes  Ingr ...

  4. SQL ISNULL 参数

    SQL Server 中有两个参数,语法:     ISNULL(check_expression, replacement_value) check_expression 与 replacement ...

  5. Pycharm----显示tab制表符

    设置前: 设置后: 操作方法:

  6. C#百度api 根据经纬度获取地址

    public string GetAddress(string lat, string lng) { try { string res = ""; string url = @&q ...

  7. harbor1.9.0 仓库的搭建

    配置及文中的xxx 为你自己的配置信息   1.创建目录   mkdir -p /data/soft cd /data/soft   2.安装docker-composer     2.1官方安装 c ...

  8. FFmpeg处理音视频流程学习笔记

    原文作者:一叶知秋0830 链接:https://www.jianshu.com/p/1b715966af50 FFmpeg处理音视频完整流程包括5个阶段(输入文件—>编码数据包—>解码后 ...

  9. [AH2017/HNOI2017]抛硬币(扩展lucas)

    推式子+exlucas. 题意: 小 A 和小 B 是一对好朋友,两个人同时抛 b 次硬币,如果小 A 的正面朝上的次数大于小 B 正面朝上的次数,则小 A 获胜. 小 A 决定在小 B 没注意的时候 ...

  10. React顶层API

    1.React.Children相关 1. React.Children.map(props.children, mapFunc) 1)该方法用于在props.children不透明的情况下,安全的遍 ...