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

Posted 2023-05-07

【中文标题】如何避免布局与状态栏重叠？

【英文标题】：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 添加到主视图组件，但是，如果我这样做，当错误没有发生时，屏幕会被推到底部，我不希望这样。

【参考方案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>
  );