我的app.tsx文件內(nèi)容如下：

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

需求：當屏幕方向旋轉(zhuǎn)90度后，狀態(tài)欄所在位置是處于頂部安全區(qū)域所在位置。需要忽略頂部安全區(qū)區(qū)域，這樣才不會顯得非常突兀。

在使用expo的eas模塊打包完畢后，手機端下載打開該APP，發(fā)現(xiàn)整個APP都被包裹在安全區(qū)域內(nèi)顯示了，這就非常奇怪了，我們明明沒有使用安全區(qū)域的組件，為何APP會被置于安全區(qū)域內(nèi)顯示？

在網(wǎng)上找了很久原因，感覺這個是相對可靠的：Expo 默認會在 Android 上啟用 SafeAreaView。即使你在代碼中沒有使用 SafeAreaView，Expo 也可以在預留時自動添加。

然后就是推薦我們使用這個第三方包來管理安全區(qū)域：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參數(shù)官方解釋為：

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

大致意思就是：設(shè)置要應用安全區(qū)域插入的邊緣，默認值是[“l(fā)eft”,“right”,“top”,“bottom”]

我的理解就是哪邊需要安全區(qū)，就將該方向放入數(shù)組中然后給edges參數(shù)即可。

打包后依舊不行，后來忘了在哪篇文章看到這樣一段話了，大致意思說：狀態(tài)欄的高度是由狀態(tài)欄的背景顏色決定的，把StatusBar設(shè)置為透明，React Native將無法獲取狀態(tài)欄的安全區(qū)域。

修改代碼如下：

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