如何使用 Top Navigator 和 Bottom Navigator 而不让 Top Navigator 与 React Navigation 中的状态栏重叠？

Question

我正在尝试在反应导航中将顶部导航器嵌套在底部导航器中。但是，当我这样做时，顶部导航器会与状态栏发生冲突。我假设这是因为底部导航器将其向上推。但是我怎样才能让两个导航器都出现在状态栏旁边呢？下面是重叠问题的图像。我正在使用 React Navigation 5，任何其他解决方案都使用我尝试过但不起作用的旧版本。

顺便说一句，如果需要该信息，我会在 iPhone 11 上进行编码。

Answer 1

您应该将您的应用容器样式设置为具有等于状态栏高度的marginTop 值。然后您的整个应用程序将显示在状态栏下方。

类似这样的：

import Constants from "expo-constants";

...

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight
  }
});