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

Question

Basically, i am creating a react-native app and i wanted that my logo image didn't overlap with the notification/status bar and i didn't want to set a marginTop property manually because the size of the notification bar changes on different models of phones, and i found out that if i replaced my <View/> component with a <SafeAreaView/> component my problem would be solved.

And while it worked great for IOS, it didn't worked at all for android. Of course, after a quick research i found out that this is a IOS only component, and when you try to use it on Android the <SafeAreaView/> component returns a regular <View/> back.

So, i am trying to find out if there's a component or a workaround that works on android.

Answer 1

Yes, status bar height changes from device to device, so you can either import status bar from react-native, or Constants from Expo so you can get the actual status bar height based on the device that is used.

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

Answer 2

You can use the react-native-status-bar-height.https://www.npmjs.com/package/react-native-status-bar-height

It´s just install e and create a const to have this value like: const barHeight = getStatusBarHeight(); and put it on the marginTop value: <View style = {{ marginTop: barHeight}}>

or if you´re using styled-components you can put on your styles.js

Answer 3

使用<SafeAreaProvide>而不是导入
import { SafeAreaProvider } from 'react-native-safe-area-context';

Answer 4

I recommend using SafeAreaView from the react-native-safe-area-context package. It will take care of both the Android and iOS problems.

import { SafeAreaView } from "react-native-safe-area-context";
import { View } from 'react-native';

export function YourComponent() {
  return (
    <SafeAreaView>
      <View></View>
    </SafeAreaView>
  );
)

Answer 5

This is not a case for Android, becuase even if You have full-screen app in Android, there is no possibility to overlap with status bar. The status bar is neither always visible, or can be "dragged down" to be visible, but in both cases, the status bar is out of the working area of the application.