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

Question

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

它应该是这样的：

这就是有时重叠的原因：

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

Answer 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>
  );
}

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

How can I avoid a layout from overlapping with the status bar?

android

reactjs

react-native

react-navigation