时间戳

首页 > 解决方案 > 什么是 'SafeAreaView' 在 android - React Native 上的等价物

javascript - 什么是 'SafeAreaView' 在 android - React Native 上的等价物

问题描述

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

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

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

标签： javascriptandroidreactjsreact-nativemobile

解决方案

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

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

推荐阅读