React Native Stack Navigation全局隐藏导航头部仅指定页面显示的实现方法

全局默认隐藏导航头部 #

在创建Stack Navigator时，通过screenOptions全局配置headerShown: false，让所有栈内页面默认隐藏导航头部：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false, // 全局默认隐藏头部
      }}
    >
      <Stack.Screen name="TabNavigator" component={TabNavigator} />
      <Stack.Screen name="OtherScreen" component={OtherScreen} />
    </Stack.Navigator>
  );
}

指定页面单独开启头部 #

对需要显示头部的页面，在其options属性中覆盖全局配置，设置headerShown: true，还可自定义头部样式：

<Stack.Screen
  name="TargetScreen"
  component={TargetScreen}
  options={{
    headerShown: true,
    title: '自定义页面标题',
    headerStyle: { backgroundColor: '#fff' }, // 自定义头部背景
  }}
/>

适配Bottom Tab Navigation场景 #

如果Bottom Tab的每个标签页是独立Stack，只需在对应子Stack中重复上述全局隐藏+指定页面开启的逻辑即可：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Profile" component={ProfileStack} />
    </Tab.Navigator>
  );
}

// Home子栈配置
function HomeStack() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="HomeMain" component={HomeMain} />
      {/* 该页面单独显示头部 */}
      <Stack.Screen
        name="HomeDetail"
        component={HomeDetail}
        options={{ headerShown: true, title: '详情页' }}
      />
    </Stack.Navigator>
  );
}

动态控制头部显示（可选） #

若需在页面内部根据状态动态切换头部显示，可使用useNavigation钩子修改配置：

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

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

  useEffect(() => {
    // 根据业务条件动态设置头部显示
    navigation.setOptions({
      headerShown: true,
    });
  }, []);

  return (
    {/* 页面内容 */}
  );
}

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