React Navigation：当我单击底部选项卡导航器时打开抽屉

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])``

Answer 2

如何在屏幕（健身房/食物）中使用导航变量，并在屏幕加载后立即打开抽屉？

function GymIndexScreen({ navigation }) {
  navigation.openDrawer()
  return (
    <View>
    </View>
  );
}

参考：https://reactnavigation.org/docs/drawer-based-navigation/