Expo Router导航至新Stack页面时隐藏上一级Stack头部的方法

问题分析 #

你当前的问题是：进入exercise/Active页面时，同时显示了来自app/layout.tsx的根Stack头部（显示exercise）和exercise/layout.tsx的子Stack头部（显示Active），且需要在返回exercise/index时恢复根头部显示，同时不能全局隐藏根头部影响首页。

解决方案 #

方案1：通过路由参数动态控制根头部显示 #

这种方式更符合Expo Router的路由参数约定，无需直接操作导航器实例。

1. 修改根布局app/layout.tsx
   在根Stack的exercise路由配置中，根据路由参数控制头部是否显示：

   import { Stack } from "expo-router";
   
   export default function RootLayout() {
     return (
       <Stack>
         <Stack.Screen name="index" options={{ title: "首页" }} />
         <Stack.Screen
           name="exercise"
           options={({ route }) => ({
             // 仅当参数showRootHeader不为false时显示根头部
             headerShown: route.params?.showRootHeader !== false,
           })}
         />
       </Stack>
     );
   }
   

2. 修改exercise/index.tsx的跳转逻辑
   改用push而非replace（确保返回时能回到index页面），并传递隐藏根头部的参数：

   import { useRouter } from "expo-router";
   
   export default function ExerciseIndex() {
     const router = useRouter();
   
     const handleStart = () => {
       router.push({
         pathname: "/exercise/Active",
         params: { showRootHeader: false },
       });
     };
   
     return (
       <button onPress={handleStart}>开始锻炼</button>
     );
   }
   

3. 在exercise/index.tsx中恢复根头部
   当index页面挂载时，重置参数恢复根头部显示：

   import { useRouter, useEffect } from "expo-router";
   
   export default function ExerciseIndex() {
     const router = useRouter();
   
     useEffect(() => {
       // 页面挂载时恢复根头部
       router.setParams({ showRootHeader: true });
     }, []);
   
     // ...其他页面代码
   }
   

方案2：直接操作导航器实例控制头部 #

这种方式更灵活，适合需要精细控制导航行为的场景。

1. 修改exercise/layout.tsx的Active路由配置
   在Active页面的选项中，通过导航器实例控制根头部的显示/隐藏：

   import { Stack } from "expo-router";
   import { Button } from "react-native";
   
   export default function ExerciseLayout() {
     return (
       <Stack>
         <Stack.Screen
           name="index"
           options={{
             headerShown: false,
             presentation: "modal",
           }}
         />
         <Stack.Screen
           name="Active"
           options={({ navigation }) => {
             const rootNav = navigation.getParent();
             return {
               headerShown: true,
               title: "正在锻炼",
               // 进入Active时隐藏根头部
               onLayout: () => rootNav?.setOptions({ headerShown: false }),
               // 自定义返回按钮，恢复根头部后返回
               headerLeft: () => (
                 <Button
                   onPress={() => {
                     rootNav?.setOptions({ headerShown: true });
                     navigation.goBack();
                   }}
                   title="返回"
                 />
               ),
             };
           }}
         />
       </Stack>
     );
   }
   

2. 处理Android物理返回键（可选）
   在exercise/Active.tsx中监听物理返回事件，确保返回时恢复根头部：

   import { BackHandler, useEffect } from "react-native";
   import { useNavigation } from "@react-navigation/native";
   
   export default function Active() {
     const navigation = useNavigation();
     const rootNav = navigation.getParent();
   
     useEffect(() => {
       const handleBack = () => {
         rootNav?.setOptions({ headerShown: true });
         navigation.goBack();
         return true;
       };
   
       const backHandler = BackHandler.addEventListener("hardwareBackPress", handleBack);
       return () => backHandler.remove();
     }, [navigation, rootNav]);
   
     // ...页面内容
   }
   

注意事项 #

• 避免使用router.replace跳转至Active：replace会替换当前路由栈中的exercise/index，导致返回时直接回到首页而非index页面；若需返回index，使用router.push。
• 两种方案均可实现需求，可根据项目习惯选择。

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