React Native StackNavigator头部高度异常翻倍问题求助

嘿，我来帮你搞定这个Expo升级后导航头部出问题的事儿！结合你的代码和依赖情况，问题主要出在旧版react-navigation和新Expo的兼容性，还有嵌套导航里的header样式处理逻辑上。下面是具体的解决办法：

1. 先升级react-navigation依赖适配Expo SDK 37 #

你现在用的react-navigation@3.13.0和react-navigation-stack@1.7.3版本有点老了，和Expo SDK 36+用的React Native 0.61.x不太适配，这是导致头部高度乱掉的主要原因之一。建议升级到同系列的稳定适配版本：

• 跑下面的命令更新依赖：

  npm install react-navigation@4.4.4 react-navigation-stack@2.10.4 react-navigation-drawer@2.7.1 react-navigation-tabs@2.11.2
  

  这些版本都是实测适配Expo SDK 37的稳定版，能解决旧版里不少样式计算的bug。

2. 修正嵌套导航的Header处理逻辑 #

从你的代码看，已经在AboveBottomTabStack的Tabs页面设了header: null来隐藏外层栈的头部，但子栈（比如HomeStack）的样式设置还有问题：

• 别用headerStyle: { height: 0 }来隐藏头部，因为react-navigation-stack的header组件内部自带状态栏占位、标题容器这些元素，只改height没法完全覆盖默认样式，肯定会留个小尾巴。
• 如果就是想完全隐藏HomeStack的头部，直接在navigationOptions里设header: null就好：

  const HomeStack = createStackNavigator(
    {
      Dashboard: {
        screen: DashboardScreen,
        navigationOptions: {
          header: null, // 这样就能彻底隐藏，不会有残留
        }
      },
    }
  );
  

• 要是你想自定义头部高度而不是完全隐藏，得考虑状态栏高度的影响，建议结合SafeAreaView和手动计算高度：

  import { SafeAreaView, StatusBar } from 'react-native';
  
  const HomeStack = createStackNavigator(
    {
      Dashboard: {
        screen: DashboardScreen,
        navigationOptions: {
          headerStyle: {
            height: 60 + StatusBar.currentHeight, // 自定义高度加上状态栏高度
            paddingTop: StatusBar.currentHeight, // 避免内容被状态栏挡住
          }
        }
      },
    }
  );
  

3. 检查导航层级有没有重复渲染Header #

虽然你已经隐藏了外层栈的头部，但还是得确认其他层级没有意外渲染多余的header：

• MainTabNavigator默认是不显示头部的，这步基本不用管
• 检查下AuthStack这类其他导航栈的header设置，避免切换路由时出现头部叠加的情况

按上面的步骤来，应该就能解决你遇到的头部高度翻倍、设height:0还留残留的问题了。

内容的提问来源于stack exchange，提问作者b_k