什么相当于 React Native 上的'SafeAreaView'

Question

基本上，我正在创建一个 react-native 应用程序，我希望我的徽标图像不会与通知/状态栏重叠，并且我不想手动设置marginTop属性，因为通知栏的大小在不同型号的手机上会发生变化，我发现如果我用<SafeAreaView/>组件替换我的<View/>组件，我的问题就会得到解决。

虽然它对IOS效果很好，但对Android根本不起作用。当然，经过快速研究，我发现这是一个仅限IOS的组件，当您尝试在Android上使用它时，<SafeAreaView/>组件会返回常规<View/>。

因此，我正在尝试找出是否有适用于Android的组件或解决方法。

Answer 1

是的，状态栏高度因设备而异，因此您可以从 react-native 导入状态栏，也可以从 Expo 导入常量，以便您可以根据所使用的设备获取实际状态栏高度。

import { StyleSheet, Platform, StatusBar } from "react-native";
import Constants from 'expo-constants';
const statusBarHeight = Constants.statusBarHeight

Answer 2

您可以使用 react-native-status-bar-height。 https://www.npmjs.com/package/react-native-status-bar-height

只需安装 e 并创建一个 const 即可具有此值，例如： const barHeight = getStatusBarHeight((; 并将其放在边距顶部值：<视图样式>

或者，如果您使用的是样式化组件，则可以添加样式.js

Answer 3

通过导入
import { SafeAreaProvider } from 'react-native-safe-area-context';来改用<SafeAreaProvide>

Answer 4

我建议从react-native-safe-area-context包中使用SafeAreaView。它将解决Android和iOS问题。

import { SafeAreaView } from "react-native-safe-area-context";
import { View } from 'react-native';
export function YourComponent() {
return (
<SafeAreaView>
<View></View>
</SafeAreaView>
);
)

Answer 5

Android不是这种情况，因为即使您在Android中有全屏应用程序，也不可能与状态栏重叠。状态栏既不总是可见的，也不能"向下拖动"以可见，但在这两种情况下，状态栏都超出了应用程序的工作区域。