React Native：如何在Material Bottom Tabs中添加菜单打开Drawer

核心修改思路 #

默认Tab.Screen点击会跳转对应页面，我们需要自定义菜单标签的点击逻辑，阻止页面跳转，转而调用Drawer的切换方法。

修改后的完整代码 #

import { useNavigation, TouchableOpacity, Text } from '@react-navigation/native';
// 确保已导入Icon、Tab导航器等依赖

function TabGroup (){
    return(
      <Tab.Navigator   screenOptions={{
        headerShown: false,
        tabBarActiveTintColor :'red',
        tabBarInactiveTintColor :'black',
      }} >
          <Tab.Screen name='Beranda' component={TopTabroup}
           options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color, size }) => (
              <Icon name="home" color={color} size={20} />
            ),
          }}
          /> 
          <Tab.Screen name='Topik' component={Topik}
           options={{
            tabBarLabel: 'TOPIK',
            tabBarIcon: ({ color, size }) => (
              <Icon name="microphone" color={color} size={20} />
            ),
          }}/> 
          <Tab.Screen name='Indonesiaku' component={Foto}
           options={{
            tabBarLabel: 'FOTO',
            tabBarIcon: ({ color, size }) => (
              <Icon name="image" color={color} size={20} />
            ),
          }}/> 
          {/* 自定义Menu标签按钮 */}
          <Tab.Screen 
            name='Menu' 
            component={() => null} 
            options={{
              // 用自定义组件替换默认tabBar按钮
              tabBarButton: ({ color, size }) => {
                const navigation = useNavigation();
                return (
                  <TouchableOpacity 
                    onPress={() => navigation.toggleDrawer()}
                    style={{ alignItems: 'center', justifyContent: 'center', paddingVertical: 8 }}
                  >
                    <Icon name="align-justify" color={color} size={20} />
                    <Text style={{ color, fontSize: 12, marginTop: 2 }}>MENU</Text>
                  </TouchableOpacity>
                );
              },
            }}
          /> 
      </Tab.Navigator>
    )
  }

关键修改点说明 #

• 自定义tabBarButton：用TouchableOpacity包裹图标和文字，点击时调用navigation.toggleDrawer()直接切换抽屉状态，跳过页面跳转逻辑。
• 空组件占位：将Menu的component设为() => null，避免渲染不必要的页面组件。
• 样式统一：自定义按钮的图标颜色、文字样式和其他标签保持一致，保证底部导航栏视觉统一。

前提条件 #

你的App必须已配置Drawer导航器，且TabGroup是Drawer导航器下的一个屏幕，这样useNavigation()才能获取到Drawer的导航实例，正常调用toggleDrawer方法。

内容的提问来源于stack exchange，提问作者ruangjual