如何在切换屏幕时更改Drawer Navigator的头部标题？

算力阿峰

2026-8-2

问题：切换屏幕时更新Drawer Navigator头部标题

背景

我有通用编程基础，但刚接触React、React-Native和JavaScript，最近跟着The Net Ninja3-4年前的YouTube教程学React-Native，遇到了API变更/废弃的问题，大部分自己解决了，但这个问题搞不定：切换屏幕时怎么改Drawer Navigator的头部标题？

当前代码结构

HomeStack导航器

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

import Home from '../screens/home';
import Reviews from '../screens/reviews';

const Stack = createNativeStackNavigator();

export default function HomeStack() {
    return (
        <Stack.Navigator initialRouteName="Home">
            <Stack.Group screenOptions={{
                /* headerStyle: { */
                /*     backgroundColor: '#eee', */
                /*     height: 80, */
                /* }, */
                /* headerTintColor: '#444', */
                header: () => null,
                headerShown: true,
            }}>
                <Stack.Screen
                    name='HomeScreen'
                    component={Home}
                    options={{ title: 'GameZone' }}
                />
                <Stack.Screen
                    name='ReviewsScreen'
                    component={Reviews}
                    options={{ title: 'Reviews' }}
                />
            </Stack.Group>
        </Stack.Navigator>
    );
};

AboutStack导航器

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

import About from '../screens/about';

const Stack = createStackNavigator();

export default function AboutStack() {
    return (
        <Stack.Navigator initialRouteName="Home" screenOptions={{ headerMode: 'screen' }}>
            <Stack.Group screenOptions={{
                /* headerStyle: { */
                /*     backgroundColor: '#eee', */
                /*     height: 80, */
                /* }, */
                /* headerTintColor: '#444', */
                header: () => null,
                headerShown: false,
            }}>
                <Stack.Screen
                    name='AboutScreen'
                    component={About}
                    options={{ title: 'About GameZone' }}
                />
            </Stack.Group>
        </Stack.Navigator>
    );
};

Drawer导航器

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from "@react-navigation/drawer";

import AboutStack from './aboutStack';
import HomeStack from './homeStack';

const RootDrawerNavigator = createDrawerNavigator();

export default function Drawer() {
    return (
        <NavigationContainer>
            <RootDrawerNavigator.Navigator initialRouteName='GameZone' backBehavior='history'>
                <RootDrawerNavigator.Group screenOptions={{
                    headerStyle: {
                        backgroundColor: '#ccc',
                        height: 80,
                    },
                    headerTintColor: '#444',
                }}>
                    <RootDrawerNavigator.Screen
                        name='Home'
                        component={HomeStack}
                        options={{ title: 'Home' }}
                    />
                    <RootDrawerNavigator.Screen
                        name='About'
                        component={AboutStack}
                        options={{ title: 'About' }}
                    />
                </RootDrawerNavigator.Group>
            </RootDrawerNavigator.Navigator>
        </NavigationContainer>
    );
}

问题现象

切换到HomeStack下的Reviews屏幕时，头部还是显示Drawer里定义的"Home"，而不是Reviews屏幕自己的标题"Reviews"
Stack导航器里禁用了头部，导致没有返回按钮

解决方案

核心思路

让头部控制权归属于嵌套的Stack导航器，而非外层Drawer，这样Stack里的每个屏幕都能自定义标题，同时自动生成返回按钮，再给Stack的首屏添加Drawer触发按钮即可。

修改步骤

1. 调整HomeStack，启用头部并添加Drawer触发按钮

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons'; // 需先安装：npm install @expo/vector-icons

import Home from '../screens/home';
import Reviews from '../screens/reviews';

const Stack = createNativeStackNavigator();

export default function HomeStack() {
    const navigation = useNavigation();
    return (
        <Stack.Navigator initialRouteName="HomeScreen">
            <Stack.Screen
                name='HomeScreen'
                component={Home}
                options={{ 
                    title: 'GameZone',
                    headerStyle: {
                        backgroundColor: '#ccc',
                        height: 80,
                    },
                    headerTintColor: '#444',
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => navigation.openDrawer()}>
                            <Ionicons name="menu" size={24} color="#444" style={{ marginLeft: 15 }} />
                        </TouchableOpacity>
                    )
                }}
            />
            <Stack.Screen
                name='ReviewsScreen'
                component={Reviews}
                options={{ 
                    title: 'Reviews',
                    headerStyle: {
                        backgroundColor: '#ccc',
                        height: 80,
                    },
                    headerTintColor: '#444',
                    // 自动生成返回按钮，无需额外配置
                }}
            />
        </Stack.Navigator>
    );
};

2. 调整AboutStack，同样启用头部并添加Drawer触发按钮

import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';

import About from '../screens/about';

const Stack = createStackNavigator();

export default function AboutStack() {
    const navigation = useNavigation();
    return (
        <Stack.Navigator initialRouteName="AboutScreen">
            <Stack.Screen
                name='AboutScreen'
                component={About}
                options={{ 
                    title: 'About GameZone',
                    headerStyle: {
                        backgroundColor: '#ccc',
                        height: 80,
                    },
                    headerTintColor: '#444',
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => navigation.openDrawer()}>
                            <Ionicons name="menu" size={24} color="#444" style={{ marginLeft: 15 }} />
                        </TouchableOpacity>
                    )
                }}
            />
        </Stack.Navigator>
    );
};

3. 修改Drawer导航器，移除头部配置

头部已经由嵌套Stack控制，Drawer只负责侧边栏功能：

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from "@react-navigation/drawer";

import AboutStack from './aboutStack';
import HomeStack from './homeStack';

const RootDrawerNavigator = createDrawerNavigator();

export default function Drawer() {
    return (
        <NavigationContainer>
            <RootDrawerNavigator.Navigator initialRouteName='Home' backBehavior='history'>
                <RootDrawerNavigator.Screen
                    name='Home'
                    component={HomeStack}
                    options={{ drawerLabel: 'Home' }}
                />
                <RootDrawerNavigator.Screen
                    name='About'
                    component={AboutStack}
                    options={{ drawerLabel: 'About' }}
                />
            </RootDrawerNavigator.Navigator>
        </NavigationContainer>
    );
}

效果说明

切换到HomeStack的Reviews屏幕时，头部会自动显示"Reviews"，同时出现返回按钮
所有页面的头部样式保持统一，且都能通过汉堡按钮打开Drawer侧边栏
完全适配新版React Navigation API，避免了旧教程里的API废弃问题

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

如何在切换屏幕时更改Drawer Navigator的头部标题？

背景 #

当前代码结构 #

HomeStack导航器 #

AboutStack导航器 #

Drawer导航器 #

问题现象 #

解决方案 #

核心思路 #

修改步骤 #