按标签栏导航按钮无法显示抽屉导航

Question

我浏览了所有谷歌，但找不到答案。 我想通过按下标签栏导航器中的按钮之一来打开名为“WiecejDrawer”的 Drawer.Navigator。我试图实施一些找到的解决方案，但它不起作用。我想在按下名称为 =“Wiecej”的 Tabs.Screen 后执行此操作。 感谢支持

下面是BottomTabNavigator代码：

import React, { FC } from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { AppParamList } from "./AppParamList";
import { Wykonam } from "./components/wykonam/wykonam";
import { Zlece } from "./components/zlece/zlece";
import { Wiadomosci } from "./components/wiadomosci/wiadomosci";
import { Feather, FontAwesome5, Ionicons } from "@expo/vector-icons";
import { WiecejDrawer } from "./WiecejDrawer";
import { DrawerActions, useNavigation } from "@react-navigation/native";

export interface AppTabsProps {}

const Tabs = createBottomTabNavigator<AppParamList>();
const navigation = useNavigation();

export const AppTabs: FC<AppTabsProps> = ({ navigation }) => {
  return (
    <Tabs.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === "Wykonam") {
            iconName = "hands-helping";
            return (
              <FontAwesome5 name="hands-helping" size={24} color="black" />
            );
          } else if (route.name === "Zlecę") {
            iconName = "donate";
            return <FontAwesome5 name="donate" size={24} color="black" />;
          } else if (route.name === "Wiadomości") {
            iconName = "feather";
            return <Feather name="message-square" size={24} color="black" />;
          } else if (route.name === "Więcej") {
            iconName = "ios-menu";
            return <Ionicons name={"ios-menu"} size={24} color="black" />;
          }
        },
      })}
      tabBarOptions={{
        activeTintColor: "#08bf11",
        inactiveTintColor: "gray",
      }}
    >
      <Tabs.Screen name="Wykonam" component={Wykonam} />
      <Tabs.Screen name="Zlecę" component={Zlece} />
      <Tabs.Screen name="Wiadomości" component={Wiadomosci} />
      <Tabs.Screen
        name="Więcej"
        component={WiecejDrawer}
        listeners={({ navigation }) => ({
          tabPress: (event) => {
            navigation.dispatch(DrawerActions.openDrawer());
            event.preventDefault();
          },
        })}
      />
    </Tabs.Navigator>
  );
};

这里是抽屉导航器

const Drawer = createDrawerNavigator<DrawerParamList>();

export const WiecejDrawer: FC<WiecejDrawerProps> = ({}) => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Profil" component={Profil} />
      <Drawer.Screen name="MojeOgłoszenia" component={MojeOgloszenia} />
      <Drawer.Screen name="MojeAkcje" component={MojeAkcje} />
      <Drawer.Screen name="Premium" component={Premium} />
      <Drawer.Screen name="Kontakt" component={Kontakt} />
    </Drawer.Navigator>
  );
};