expo + react native项目隐藏状态栏踩坑

我的app.tsx文件内容如下:

import MainPage from "./screens/Main/index";export default function App() {return (<MainPage />);
}

需求:当屏幕方向旋转90度后,状态栏所在位置是处于顶部安全区域所在位置。需要忽略顶部安全区区域,这样才不会显得非常突兀。

在使用expo的eas模块打包完毕后,手机端下载打开该APP,发现整个APP都被包裹在安全区域内显示了,这就非常奇怪了,我们明明没有使用安全区域的组件,为何APP会被置于安全区域内显示?

在网上找了很久原因,感觉这个是相对可靠的:Expo 默认会在 Android 上启用 SafeAreaView。即使你在代码中没有使用 SafeAreaView,Expo 也可以在预留时自动添加。

然后就是推荐我们使用这个第三方包来管理安全区域:react-native-safe-area-context

修改后的代码如下:

import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
import { SafeAreaView } from 'react-native-safe-area-context';
import MainPage from "./screens/Main/index";export default function App() {return (<SafeAreaProvider><SafeAreaView style={{ flex: 1 }} edges={["bottom"]} ><MainPage /></SafeAreaView></SafeAreaProvider>);
}

SafeAreaView的edges参数官方解释为:

Array of top, right, bottom, and left. Defaults to all.Sets the edges to apply the safe area insets to.

大致意思就是:设置要应用安全区域插入的边缘,默认值是[“left”,“right”,“top”,“bottom”]

我的理解就是哪边需要安全区,就将该方向放入数组中然后给edges参数即可。

打包后依旧不行,后来忘了在哪篇文章看到这样一段话了,大致意思说:状态栏的高度是由状态栏的背景颜色决定的,把StatusBar设置为透明,React Native将无法获取状态栏的安全区域。

修改代码如下:

import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
import { SafeAreaView } from 'react-native-safe-area-context';
import MainPage from "./screens/Main/index";
import { StatusBar } from "react-native";export default function App() {return (<SafeAreaProvider initialMetrics={initialWindowMetrics}><SafeAreaView style={{ flex: 1 }} edges={["bottom"]} ><StatusBar translucent={true} backgroundColor="rgba(0, 0, 0, 0)" /><MainPage /></SafeAreaView></SafeAreaProvider>);
}

打包apk后成功解决。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/137216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎样克服上公开课的心里恐惧?

1.模糊的知识点不讲 讲解困难的知识点避免不讲&#xff0c;万一讲不好自信受挫&#xff0c;更紧张。 2.节奏放慢 越是紧张就越要放慢语速&#xff0c;说话太快容易咬字不清&#xff0c;错讲或者混乱。 3.日常模拟公开课 平时上课最好按照公开课的标准去进行&#xff0c;及时…

开发知识点-人工智能-深度学习Tensorflow2.0

Tensorflow 常用的参数有&#xff1a;快捷配置 做得多环境 环境问题 一、 简单 概述二、Tensorflow2版本简介与心得三、深度学习框架安装 Tensorflow2版本安装方法四 、 TF 基础操作So tensor flow 矩阵 在 这个 大框架 流动 五 深度学习要解决的问题六 深度学习应用领域#1下载…

JVM中的STW(Stop The World)

1. STW是什么&#xff1f; Stop一the一World&#xff0c;简称STW&#xff0c;指的是Gc事件发生过程中&#xff0c;会产生应用程序的停顿。停顿产生时整个应用程序线程都会被暂停&#xff0c;没有任何响应&#xff0c;有点像卡死的感觉&#xff0c;这个停顿称为STW。 2. STW出…

混合云中 DevOps 的最佳实践

近年来&#xff0c;出现了各种工具、技术和框架&#xff0c;其目标是增强灵活性、性能和可扩展性。传统的整体方法已被微服务和纳米服务等更加模块化的方法所取代。此外&#xff0c;云计算的兴起导致本地软件被云环境所取代&#xff0c;云环境提供了以前无法提供的广泛优势和功…

创建第一个Go的程序Hello Kitty

上一篇&#xff0c;我们已经搭建好了开发要用的基础环境:Go开发基础环境搭建, 今天我们要开始用GoLand实操关于Go的代码开发。 创建工程 File > New > Project 其中 game为项目名称 在项目目录下会自动生成一个文件:go.mod ,模块是相关Go包的集合。modules是源代码交换…

【ONE·C++ || 网络基础(二)】

总言 主要内容&#xff1a;演示socke套接字编程&#xff08;TCP模式&#xff09;&#xff0c;介绍序列化和反序列化&#xff0c;并进行演示&#xff08;json版本达成协议编写、守护进程介绍&#xff09;。 文章目录 总言4、基于套接字的TCP网络程序4.0、log.hpp4.1、version1.…

竞赛选题 深度学习疲劳驾驶检测 opencv python

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 &#x1f525; 优…

NSS [鹏城杯 2022]压缩包

NSS [鹏城杯 2022]压缩包 考点&#xff1a;条件竞争/逻辑漏洞&#xff08;解压失败不删除已经解压文件&#xff09; 参考&#xff1a;回忆phpcms头像上传漏洞以及后续影响 | 离别歌 (leavesongs.com) 源码有点小多 <?php highlight_file(__FILE__);function removedir($…

不想努力了,有没有不用努力就能考上硕士的方法

今年&#xff0c;硕士研究生考试报考人数再次刷新了纪录&#xff0c;高达474万人次。 这些年考研一直在扩招&#xff0c;但是录取率却越来越低&#xff0c;内卷血腥程度可想而知&#xff01; 2020年研究生报考人数341万&#xff0c;录取人数99.05万&#xff0c;录取率29.05%。…

物联网水表有什么弊端吗?

物联网水表作为新一代智能水表&#xff0c;虽然在很大程度上提高了水资源的管理效率&#xff0c;但也存在一定的弊端。在这篇文章中&#xff0c;我们将详细讨论物联网水表的弊端&#xff0c;以帮助大家更全面地了解这一技术。 一、安全隐患 1.数据泄露&#xff1a;物联网水表通…

Zabbix深入解析与实战

1.Zabbix 1.1.监控概述 监控是指对行为、活动或其他变动中信息的一种持续性关注&#xff0c;通常是为了对人达成影响、管理、指导或保护的目的 监控 监视主机架构状态控制&#xff0c;事后追责目标&#xff1a;早发现早处理(故障、性能、架构) 网站扩容(用数据说话) 为什么要…

基于SSM的社区生鲜电商平台

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Google Analytics优缺点分析

Google Analytics是一款广泛使用的网站分析工具&#xff0c;它能够帮助网站和应用程序的拥有者收集和分析数据&#xff0c;并提供有关用户行为、流量来源和转化率等方面的详细见解。本文小编将讲讲关于Google Analytics的优缺点分析。 一、Google Analytics优点 1、免费使用&a…

万宾科技内涝积水监测仪使用效果一览

当一个城市突降暴雨&#xff0c;对城市管理部门来讲首当其中的是防止积水成患。随着城市人口快速增长&#xff0c;基础设施建设也日益受到更多的关注&#xff0c;城市内涝问题频繁增加&#xff0c;会给城市带来严重的经济损失和人员的安全问题。城市生命线工程建设过程中&#…

线程池创建、执行、销毁的原理解析

目录 线程池的执行原理线程执行参考&#xff1a; 线程池的执行原理 假设最大核心数是2&#xff0c;非核心线程数为1&#xff0c;队列长度是3 来第一个任务的时候&#xff0c;没有工作线程在工作&#xff0c;需要创建一个 来第二个任务的时候&#xff0c;发现当前核心线程数…

474. 一和零

给你一个二进制字符串数组 strs 和两个整数 m 和 n 。 请你找出并返回 strs 的最大子集的长度&#xff0c;该子集中 最多 有 m 个 0 和 n 个 1 。 如果 x 的所有元素也是 y 的元素&#xff0c;集合 x 是集合 y 的 子集 。 示例 1&#xff1a; 输入&#xff1a;strs ["…

JS前端实现身份证号码合法性校验(校验码校验)

在做项目过程中针对自然人数据提交到后端前一般是要进行身份证的合法性校验&#xff0c;当身份证号输入错误以便给于用户友好的提示(也可以根据身份证号同时校验表单中性别和出生日期等)&#xff0c;验证主要是防止无效数据入库。本文在前端使用JavaScript实现15/18位身份证的合…

数字滤波器分析---零极点分析

数字滤波器分析---零极点分析 zplane 函数绘制线性系统的极点和零点。 例如&#xff0c;在 -1/2 处为零且在 0.9e−j2π0.3 和 0.9ej2π0.3 处有一对复极点的简单滤波器为 zer -0.5; pol 0.9*exp(j*2*pi*[-0.3 0.3]); 要查看该滤波器的零极点图&#xff0c;您可以使用 z…

Simulia仿真之CST的使用指南(1) | 百世慧®

前言 CST是Computer Simulation Technology的缩写,是全球范围内众多工程师都喜欢使用的高端电磁仿真分析软件。 本文又名《智慧的CST生活》这里一共列出了120个章节&#xff0c;其中包括CST使用过程中的有用小技巧&#xff0c;还有给用户提供技术支持的过程中常见的问题。本专…

金蝶云星空表单插件实现父窗体打开子窗体,并携带参数到子窗体

文章目录 金蝶云星空表单插件实现父窗体打开子窗体&#xff0c;并携带参数到子窗体父窗体打开子窗体准备设置携带参数打开子窗体子窗体接收参数 金蝶云星空表单插件实现父窗体打开子窗体&#xff0c;并携带参数到子窗体 父窗体打开子窗体准备 BillShowParameter OtherInAdd n…