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>

我的抽屉组件将成为自定义抽屉组件：

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

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

我的问题是这样的吗？我试图从tabPress来简化navigation.openDrawer（）的操作，但是找不到该方法。我这样做正确，还是需要某种自定义的bottomNav？任何帮助深表感谢！

谢谢。

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

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

1 个答案: