react-native - react 导航 : Open drawer when I click on bottom tab navigator

Question

使用 React Navigation 5，我想在单击底部选项卡导航器时打开抽屉(我使用 material bottom navigator )。

我设法创建底部选项卡按钮并单击它们，主页会打开两个选项卡(GymIndexScreen 或 FoodIndexScreen)。

当我在主页(GymIndexScreen 或 FoodIndexScreen)上时，我可以用手指打开不同的抽屉( GymDrawerNavigator 和 FoodDrawerNavigator ):一切正常。

问题:我希望抽屉在我单击底部选项卡按钮时自动打开/关闭(切换)，而无需用手指打开它们。

App.js :

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

const App = () => {
  return (
    <NavigationContainer>
      <BottomTabNavigator />
    </NavigationContainer>
  )
}

BottomTabNavigator.js :

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'

const Tab = createMaterialBottomTabNavigator()

const BottomTabNavigator = (props) => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Gym"
        component={GymDrawerNavigator}
        options={{
          tabBarLabel: "Musculation",
        )}
      />
      <Tab.Screen
        name="Food"
        component={FoodDrawerNavigator}
        options={{
          tabBarLabel: "Alimentation",
        )}
      />
    </Tab.Navigator>
  )
}

GymDrawerNavigator.js :

import { createDrawerNavigator } from '@react-navigation/drawer'

const Drawer = createDrawerNavigator()

const GymDrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Gym"
        component={GymStackNavigator}
      />
    </Drawer.Navigator>
  )
}

GymStackNavigator.js:

import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

const GymStackNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="GymIndex">
      <Stack.Screen
        name="GymIndex"
        component={GymIndexScreen}
        }}
      />
      <Stack.Screen
        name="GymExerciseIndex"
        component={GymExerciseIndexScreen}
        }}
      />
      ... list of screens

Answer 1

如果我对你的问题的理解正确，你想在导航到屏幕时自动打开抽屉吗？将此添加到您希望在导航到时打开抽屉的屏幕组件。

import {useEffect} from 'react'

...

useEffect(()=>{
  navigation.addListener('focus', () => {
     // when screen is focused (navigated to)
     navigation.openDrawer();
  });  
},[navigation])``