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

Posted 2023-04-18

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

【英文标题】：How can I use Top Navigator and Bottom Navigator without having Top Navigator overlap with the Status Bar in React Navigation?

【发布时间】：2020-10-31 00:47:37

【问题描述】：

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

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

【参考方案1】：

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

类似这样的：

import Constants from "expo-constants";

...

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

【讨论】：

我尝试将它添加到导航容器中，但它不起作用。使用 react navigation 5 它不使用 appContainer 并且我正在使用新文档显示的功能组件，不确定这是否是它不起作用的原因？

等等，实际上我将它添加到 createMaterialTopTabNavigator.Navigator 中，它在那里工作！谢谢你