React Navigation v7：如何在屏幕内获取导航选项并判断是否存在头部

嗨，我刚解决了类似的问题，正好可以帮到你！在React Navigation v7里确实没有直接的getOptions方法，但我们有几种靠谱的方式来判断当前屏幕是否显示头部：

方法一：借助useHeaderHeight钩子 #

React Navigation提供了useHeaderHeight这个内置钩子，它会返回当前屏幕头部的高度。如果屏幕通过headerShown: false或者header: () => null隐藏了头部，这个钩子会返回0。大部分场景下这个判断足够准确：

import { useHeaderHeight } from '@react-navigation/elements';
import { View } from 'react-native';

function YourScreen() {
  const headerHeight = useHeaderHeight();
  const hasHeader = headerHeight > 0;

  // 根据判断结果执行逻辑
  console.log('当前屏幕是否有头部:', hasHeader);

  return <View>{/* 你的屏幕内容 */}</View>;
}

⚠️ 注意：如果你的自定义头部高度设置为0，这个判断会失效，但这种场景非常少见。

方法二：匹配路由的初始导航配置 #

如果你的Stack Navigator是提前配置好各屏幕的头部显示状态，你可以通过当前路由名称，结合自己维护的配置映射来判断：
首先是导航器的初始配置：

const Stack = createNativeStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: true }} />
      <Stack.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}

然后在屏幕内部使用useRoute获取路由名称，匹配配置：

import { useRoute } from '@react-navigation/native';
import { View } from 'react-native';

function ProfileScreen() {
  const route = useRoute();
  // 可以把这个配置抽成单独的常量文件，方便全局维护
  const screenHeaderConfig = {
    Home: true,
    Profile: false,
    // 其他屏幕的配置
  };
  // 默认值设为true，兼容没有配置的屏幕
  const hasHeader = screenHeaderConfig[route.name] ?? true;

  console.log('当前屏幕是否有头部:', hasHeader);
  return <View>{/* 你的屏幕内容 */}</View>;
}

这个方法的优势是判断绝对准确，不会受自定义头部的影响，适合屏幕数量较少的项目。

方法三：自定义useHeaderShown钩子（推荐） #

如果上面两种方法都不满足你的需求，你可以自己封装一个钩子，利用navigation.setOptions的函数形式间接获取当前的导航配置：

import { useNavigation } from '@react-navigation/native';
import { useLayoutEffect, useState } from 'react';
import { View } from 'react-native';

// 自定义钩子
function useHeaderShown() {
  const navigation = useNavigation();
  const [hasHeader, setHasHeader] = useState(false);

  useLayoutEffect(() => {
    // 传入函数给setOptions，参数就是当前的导航配置
    navigation.setOptions(prevOptions => {
      // 判断headerShown是否为false，其他情况都视为有头部
      setHasHeader(prevOptions.headerShown !== false);
      // 返回原配置，避免修改原有导航选项
      return prevOptions;
    });
  }, [navigation]);

  return hasHeader;
}

// 在屏幕中使用
function YourScreen() {
  const hasHeader = useHeaderShown();
  
  console.log('当前屏幕是否有头部:', hasHeader);
  return <View>{/* 你的屏幕内容 */}</View>;
}

这个方法能准确获取当前屏幕的headerShown状态，不管是全局配置还是屏幕单独设置的都能识别，而且不会修改原有的导航配置，我自己就是用这个方法解决了项目里的问题，亲测有效！

另外，你提到的Expo 53完全兼容这些方法，因为Expo 53和React Navigation v7的依赖版本是完全匹配的，不用担心兼容性问题。

内容来源于stack exchange