如何避免布局与状态栏重叠？

【问题标题】：How can I avoid a layout from overlapping with the status bar?如何避免布局与状态栏重叠？
【发布时间】：2021-12-28 00:53:05
【问题描述】：

我正在制作一个应用程序，有时我的布局会被状态栏重叠。这是随机发生的，当我导航到另一个屏幕时会触发。我认为这可能与导航有关。我该怎么做才能解决这个问题？

它应该是这样的：

这就是有时重叠的方式：

我尝试将paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 添加到主视图组件，但是，如果我这样做，当错误没有发生时，屏幕会被推到底部，我不希望这样。

【问题讨论】：

标签： android reactjs react-native react-navigation

【解决方案1】：

您需要考虑设备的“安全区域”。您已标记react-navigation，它内置了一些支持并使用react-native-safe-area-context。他们有 documentation 描述安全区域支持。

例如：

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

function Demo() {
  return (
    <SafeAreaView
      style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}
    >
      <Text>This is top text.</Text>
      <Text>This is bottom text.</Text>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>{/*(...) */}</NavigationContainer>
    </SafeAreaProvider>
  );
}

【讨论】：