本文主要是介绍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后成功解决。
这篇关于expo + react native项目隐藏状态栏踩坑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
