React Native嵌套栈中仅在TestScreen隐藏底部标签栏导航头部

首先纠正你代码中的一处语法错误：Tab.navigator的screenOptions对象少了闭合的}，需要改为screenOptions={{headerShown: true}}。

以下是两种实现需求的方案：

方案一：在Tab导航器中动态判断控制 #

通过screenOptions的函数形式，读取嵌套栈的当前路由名称，动态决定是否显示Tab头部：

<Tab.navigator
  screenOptions={({ route }) => {
    // 获取HomeStack栈内当前活跃的路由名称
    const activeStackRoute = route.state?.routes[route.state.index]?.name;
    // 仅当当前不是TestScreen时显示Tab头部（注意你的TestScreen在栈中的name是'history'）
    return {
      headerShown: activeStackRoute !== 'history'
    };
  }}
>
  <Tab.screen name='home' component={HomeStack}/>
  <Tab.screen name='history' component={HistoryScreen}/>
  <Tab.screen name='account' component={AccountScreen}/>
</Tab.navigator>

方案二：在屏幕组件内动态设置Tab导航器选项 #

利用useNavigation获取父级Tab导航器的实例，在对应屏幕中设置头部显示状态：

HomeScreen中显示Tab头部 #

import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  useEffect(() => {
    // 获取父级Tab导航器并设置头部显示
    navigation.getParent()?.setOptions({ headerShown: true });
  }, [navigation]);

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

TestScreen中隐藏Tab头部 #

import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';

function TestScreen() {
  const navigation = useNavigation();

  useEffect(() => {
    // 获取父级Tab导航器并设置头部隐藏
    navigation.getParent()?.setOptions({ headerShown: false });
  }, [navigation]);

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

两种方案对比：

• 方案一配置集中在Tab导航器，逻辑清晰，适合简单场景；
• 方案二更灵活，适合需要根据屏幕内业务逻辑动态调整头部显示的场景。

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