什么是 android 上的“SafeAreaView”的等价物 - React Native

Posted 2023-02-22

【中文标题】什么是 android 上的“SafeAreaView”的等价物 - React Native

【英文标题】：What is the equivalent of 'SafeAreaView' on android - React Native

【发布时间】：2020-04-23 12:09:27

【问题描述】：

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

虽然它在 ios 上运行良好，但在 android 上却完全不起作用。当然，经过快速研究，我发现这是一个仅限 IOS 的组件，当您尝试在 Android 上使用它时，<SafeAreaView/> 组件返回一个常规的<View/>。

所以，我正在尝试找出是否有适用于 android 的组件或解决方法。

【问题讨论】：

这能回答你的问题吗？ (React native) How to use SafeAreaView for Android notch devices?

【参考方案1】：

我建议使用 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>
  );
)

【参考方案2】：

通过导入 import SafeAreaProvider from 'react-native-safe-area-context';

来使用 <SafeAreaProvide>

【参考方案3】：

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

它只是安装 e 并创建一个 const 以具有此值，例如： 常量 barHeight = getStatusBarHeight(); 并将其放在 marginTop 值上：

或者，如果您使用 styled-components，您可以使用您的 styles.js

【参考方案4】：

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

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

【讨论】：

我是原生反应新手，但Constants.statusBarHeight 看起来完全错误。高度不是恒定的，它在很大程度上取决于设备是否有缺口。原生 Android 上有一个复杂的 API 可以找出答案。

@rekire 我认为常量库依赖于安装，因此“常量”应该在每次安装时更新，使其具有适合设备的正确值

@rekire Constants 是 expo-constants 库。它并不是指变量是“常数”。它获取应用程序正在使用的设备状态栏的高度。所以在这个意义上它是动态的。

【参考方案5】：

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