一、最新版本的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. node-exporter cpu使用率为负数

    在prometheus利用公式:100 - (avg by (instance) (irate(node_cpu{instance="xxx", mode="idle&q ...

  2. 一：(1.1)了解MVC之路由重写

    Mvc默认路由 //系统的Url路由规则 routes.MapRoute( name: "Default", url: "{controller}/{action}/{i ...

  3. border边框设置为1px

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 关键字final 修饰类、方法、属性、参数类型

    笔记: /** 关键字final(最终的) 标记的类不能被继承, 提高安全性,提高程序的可读性 * 1.final 修饰类,这个类就不能被继承: 如:String类.StringBuffer类.Sys ...

  5. 0003SpringBoot整合SpringDataJPA

    SpringBoot整合SpringDataJpa步骤如下: 1.添加data-jpa起步依赖(pom.xml) 2.添加数据库驱动坐标.添加Junit起步依赖(pom.xml) 3.添加数据库连接信 ...

  6. Java核心技术 卷一 复习笔记(丁

    面向对象1.面向对象设计概述 1.1.面向对象是什么 面向对象是一种程序设计范型(简称OOP),是针对对象进行开发,简化开发过程的一种设计方式 1.2.类 类是构造对象的模板,相当于一个烘焙模板,而对 ...

  7. email.py

    import os import argparse import yaml import smtplib import csv from email.mime.multipart import MIM ...

  8. 更好的处理 Python 多工程 import 依赖

    话说, 这段时间需要开发一个项目, 新项目对现有的几乎所有项目都有依赖. 豆瓣现存的几个大项目,基本都是围绕豆瓣主站shire的依赖, 也就是说, 其他项目对shire的单项依赖,  这些项目在需要主 ...

  9. maven+struts2例子

    本文在开发第一个maven示例的基础上进行扩展. 第一个maven示例目录结构如下: 扩展后目录为: 打开pom.xml 在WEB-INF文件夹下新建web.xml: <?xml version ...

  10. 关系型数据库与NoSQL的对比

    SQL(结构化的查询语言)数据库是过去四十年间存储数据的主要方式.20世纪90年代末随着Web应用和MySQL.PostgreSQL和SQLite等开源数据库的兴起,用户爆炸式的增长. NoSQL数据 ...