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后成功解决。

相关推荐
木西4 小时前
React Native DApp 开发全栈实战·从 0 到 1 系列(兑换-前端部分)
react native·web3·solidity
薛定谔的算法5 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
小lan猫8 小时前
React学习笔记(一)
前端·react.js
江城开朗的豌豆13 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
前端人类学13 小时前
React框架详解:从入门到精通(详细版)
react.js·redux
江城开朗的豌豆13 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
艾小码14 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
bug_kada14 小时前
详解 React useCallback & useMemo
前端·react.js
用户7847215099115 小时前
Zustand源码解读(更新中)
react.js
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js