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

【问题标题】：What is the equivalent of 'SafeAreaView' on android - React Native什么是 android 上的“SafeAreaView”的等价物 - 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?

标签： javascript android reactjs react-native mobile

【解决方案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中有全屏应用，也不可能与状态栏重叠。状态栏既不是始终可见，也可以“向下拖动”使其可见，但在这两种情况下，状态栏都超出了应用程序的工作区域。

【讨论】：