React Native Navigation v5 从底部选项卡触发抽屉

Question

Currently I am trying to tigger the drawer from the bottom nav as you can see here:

My current tabs is the following:

 <NavigationContainer>
  <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused }) => {
        let iconName;

        switch (route.name) {
          case 'Home':
            iconName = 'window-maximize';
            break;
          case 'Purchases':
            iconName = 'tags';
            break;
          case 'Notifications':
            iconName = 'bell';
            break;
          case 'Checkout':
            iconName = 'shopping-cart';
            break;
          case 'Orders':
            iconName = 'dollar';
            break;
          case 'Menu':
            iconName = 'navicon';
            break;
        }

        return (
          <Icon
            name={iconName}
            size={20}
            color={focused ? 'blue' : 'grey'}
          />
        );
      },
    })}
    tabBarOptions={{
      showLabel: false,
    }}>
    <Tab.Screen name="Home" component={LandingScreens} />
    <Tab.Screen name="Purchases" component={PurchasesScreens} />
    <Tab.Screen name="Notifications" component={Notifications} />
    <Tab.Screen name="Checkout" component={CheckoutScreens} />
    <Tab.Screen name="Orders" component={OrdersScreens} />
    <Tab.Screen
      name="Menu"
      component={Drawer}
      listeners={({ navigation }) => ({
        tabPress: (e) => {
          e.preventDefault();
        },
      })}
    />
  </Tab.Navigator>
</NavigationContainer>

And my Drawer Component is just going to be a custom Drawer component:

const Drawer = ({ navigation }) => {
    const Drawer = createDrawerNavigator();

    return (
      <Drawer.Navigator
        drawerContent={(props) => <CustomDrawerContent {...props} />}>
        <Drawer.Screen name="Home" component={LandingScreens} />
      </Drawer.Navigator>
    );
  };

My question is something like this possible? I was trying to tigger the navigation.openDrawer() from the tabPress but couldn't find the method. I am doing this right, or would I need some sort of custom bottomNav? Any help is much appreciated!

Thanks.

Answer 1

You can either use DrawerActions.openDrawer :

import { DrawerActions } from '@react-navigation/native'

    <Tab.Screen
      name="Menu"
      component={Drawer}
      listeners={({ navigation }) => ({
        tabPress: (e) => {
          e.preventDefault();

          navigation.dispatch(DrawerActions.openDrawer())
        },
      })}
    />

A better solution is to nest the tabs inside the drawer so navigation.openDrawer() works.

https://reactnavigation.org/docs/nesting-navigators#navigator-specific-methods-are-available-in-the-navigators-nested-inside