React Native Navigation v5 從底部選項卡觸發抽屜

Question

目前，我正在嘗試從底部導航中撥動抽屜，如下所示：

我當前的標簽如下：

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

我的 Drawer 組件只是一個自定義的 Drawer 組件：

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

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

我的問題是這樣的可能嗎？ 我試圖跳跳虎從該navigation.openDrawer（） tabPress但找不到方法。 我這樣做是對的，還是需要某種自定義的底部導航？ 任何幫助深表感謝！

謝謝。

Answer 1

您可以使用DrawerActions.openDrawer ：

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

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

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

更好的解決方案是將選項卡嵌套在抽屜內，以便navigation.openDrawer()工作。

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