React Native Expo Router：如何仅隐藏首页的Stack导航栏

当然可以实现仅隐藏首页（home.js）的导航栏，同时保留详情页（details.js）带返回箭头的导航栏，以下是两种常用的实现方式：

方法一：在全局路由布局中配置 #

直接修改app/_layout.js，通过Stack组件的screenOptions根据路由名称动态控制导航栏显示：

import { Stack } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {
  return (
    <SafeAreaProvider>
      <Stack
        initialRouteName="home"
        screenOptions={({ route }) => ({
          // 仅当路由不是home时显示导航栏
          headerShown: route.name !== 'home'
        })}
      />
    </SafeAreaProvider>
  );
}

这种方式属于全局集中管理路由导航样式，首页导航栏会被隐藏，从首页跳转至详情页后，详情页会自动生成带返回箭头的导航栏，无需额外配置。

方法二：在首页单独配置 #

如果仅需针对首页做特殊配置，可以在home.js中通过导航钩子修改当前页面的导航选项：

import { useLayoutEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { Link } from 'expo-router';
import { View, Text } from 'react-native';

export default function Home() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    // 设置当前页面隐藏导航栏
    navigation.setOptions({
      headerShown: false,
    });
  }, [navigation]);

  return (
    <View>
      <Text>首页</Text>
      <Link href="/details">跳转到详情页</Link>
    </View>
  );
}

这种方式仅对首页生效，详情页的导航栏会保持默认状态，自动显示返回箭头。

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