如何将标题传递到Drawer Navigator（React Navigation V5）

Question

所以这就是我正在做的事情，我想知道通过反应导航实现此目标的最佳方法是什么： 我有一个想要打开抽屉菜单的自定义标题。目前，我正在操作Stack Navigator。 显然，我还需要在其中添加一个Drawer Navigator。我的问题是如何将自定义标头传递到抽屉中，以便可以单击“菜单”按钮打开抽屉？我知道Drawer.Navigator似乎不喜欢screenOptions={{ header: Header }}道具；仅屏幕渲染而没有任何标题。

导航组件：

import "react-native-gesture-handler";
import React, { useContext } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Header from "./components/Header";
import Home from "./components/Home";
import { UserContext } from "./contexts/UserContext";
import Login from "./components/Login";
import Signup from "./components/Signup";
import GameNotes from "./components/GameNotes";

const Stack = createStackNavigator();

export default function ComponentContainer() {
    const { user } = useContext(UserContext);
    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName="Home"
                screenOptions={{ header: Header }}
            >
                {user ? (
                    <Stack.Screen name="Home" component={GameNotes} />
                ) : (
                    <Stack.Screen name="Home" component={Home} />
                )}
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="Signup" component={Signup} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

标题组件：

import React, { useContext } from "react";
import { View, Text } from "react-native";
import ButtonContainer from "../elements/ButtonContainer";
import PrimaryButton from "../elements/PrimaryButton";
import HeaderButton from "../elements/HeaderButton";
import { tailwind } from "../lib/tailwind";
import localeSelect from "../services/localeSelect";
import { LanguageContext } from "../contexts/LanguageContext";
import { UserContext } from "../contexts/UserContext";
import { title, login, signup, logout } from "../data/locales";

export default function Header({ navigation }) {
    const { language } = useContext(LanguageContext);
    const { user, role, logout: doLogout } = useContext(UserContext);
    return (
        <View
            style={tailwind(
                "bg-blue-500 px-3 pt-8 pb-3 flex flex-row justify-between"
            )}
        >
            <View style={tailwind("flex flex-row justify-start")}>
                {user && (
                    <View style={tailwind("mr-2")}>
                        <HeaderButton name="menu" />
                    </View>
                )}
                <View>
                    <Text style={tailwind("text-left text-white text-2xl pt-1")}>
                        {localeSelect(language, title)}
                    </Text>
                </View>
            </View>
            <ButtonContainer style={tailwind("flex flex-row justify-end")}>
                {!user && (
                    <>
                        <View style={tailwind("mr-2")}>
                            <PrimaryButton
                                text={localeSelect(language, login)}
                                onPress={() => {
                                    navigation.navigate("Login");
                                }}
                            />
                        </View>
                        <View>
                            <PrimaryButton
                                text={localeSelect(language, signup)}
                                onPress={() => {
                                    navigation.navigate("Signup");
                                }}
                            />
                        </View>
                    </>
                )}
                {user && (
                    <View>
                        <PrimaryButton
                            text={localeSelect(language, logout)}
                            onPress={() => {
                                doLogout();
                            }}
                        />
                    </View>
                )}
            </ButtonContainer>
        </View>
    );
}