屏幕更改时如何更改抽屉导航器标题的标题？答案

【问题标题】：How to change title of Drawer navigator header when the screen changes?屏幕更改时如何更改抽屉导航器标题的标题？
【发布时间】：2023-02-08 19:30:36
【问题描述】：

我对React/React-Native 和Javascript 也很陌生，但对一般编程并不陌生。我最近开始学习React-Native，并且一直在观看The Net Ninja在 YouTube 上的播放列表，该播放列表已有 3-4 年历史。他做了一些在较新的 API 中不可用或已更改的事情。大多数东西我都能自己解决，但我似乎无法弄清楚这一点。

如何在屏幕变化时更改Drawer Navigator 标题上的标题？

这是我的应用程序的样子，

我有 2 Stack Navigator 屏幕 Home 和 About

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>
    );
};

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 Navigator，

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>
    );
}

现在，无论我转到哪个屏幕，我都只能看到标题中 Drawer Navigator 中定义的屏幕的标题，即标题上的 Home 或 About，而不是 HomeStack 下定义的其他屏幕的标题。

这是Home屏幕，

这是Drawer

这是About屏幕

这是Reviews屏幕

主页和评论屏幕是 HomeStack 的一部分，每当我从主屏幕上单击一个项目时，它应该说 Reviews，因为我当时在评论屏幕中。

另外，因为我在堆栈导航器中禁用了标题，所以我不再有后退按钮。

【问题讨论】：

标签： javascript react-native navigation-drawer

【解决方案1】：

在您的抽屉导航器文件中，您已将评论屏幕命名为主页。您的屏幕名称可以通过更改这些名称来更改。

                <RootDrawerNavigator.Screen
                    name='Home' // here
                    component={HomeStack}
                    options={{ title: 'Home' }} // here
                />
                <RootDrawerNavigator.Screen
                    name='About'
                    component={AboutStack}
                    options={{ title: 'About' }}
                />

【讨论】：