反应导航关闭点击底部标签导航器上的抽屉

时间:2020-01-08 12:49:30

标签: react-native react-navigation

我的react navigation设置如下。当在抽屉组件外面按一下时,可以关闭抽屉。 (但是当我单击bottom navigator tabs part时不可以)。 单击底部导航时如何关闭抽屉?

const HomeFilterDrawer = createDrawerNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: ({navigation}) => ({
        header: null,
      }),
    },
  },
  {
    initialRouteName: 'Home',
    contentComponent: DrawerComponent,
    drawerPosition: 'right',
  },
);

const HomeScreenStack = createStackNavigator(
  {
    Home: {
      screen: HomeFilterDrawer,
      navigationOptions: ({navigation}) => ({
        header: null,
      }),
    },
    Search: {
      ...
    },
  }
);

const AppNavigator = createBottomTabNavigator(
    Home: {
      screen: HomeScreenStack,
      navigationOptions: {
        tabBarLabel: 'Home,
        tabBarIcon: tabInfo => {
          return (
            <Ionicons name="ios-home" size={25} />
          );
        },
        tabBarOnPress: ({navigation}) => {
          navigation.popToTop();
          navigation.navigate(navigation.state.routeName);
        },
      },
    },
);

enter image description here

1 个答案:

答案 0 :(得分:0)

您尝试使用DrawerActions关闭抽屉吗?

import { DrawerActions } from '@react-navigation/routers';
// ...

// in tabbaronPress call the following
navigation.dispatch(DrawerActions.closeDrawer());