如何修改react-navigation/drawer菜单项的onPress点击行为

方案1：通过Screen的listeners属性拦截点击事件（推荐，改动最小） #

直接给Drawer中对应的Restaurants路由配置drawerItemPress事件监听，拦截默认行为后执行自定义跳转逻辑，代码如下：

import { StackActions } from '@react-navigation/native';

<HomeDrawerNavigator.Screen 
  name='Restaurants'
  component={RestaurantsStackNavigator}
  // 新增listeners配置
  listeners={({ navigation }) => ({
    drawerItemPress: (e) => {
      // 阻止默认的点击跳转逻辑
      e.preventDefault();
      // 确保当前导航到Restaurants栈下
      navigation.navigate('Restaurants');
      // 弹出Stack中所有非首屏页面，回到MenuScreen
      navigation.dispatch(StackActions.popToTop());
      // 点击后关闭抽屉
      navigation.closeDrawer();
    }
  })}
/>
<HomeDrawerNavigator.Screen 
  name='Settings'
  component={SettingsNavigator}
/>

这个方案不需要修改其他抽屉项的逻辑，仅针对需要特殊处理的路由生效，适合只有少数抽屉项需要自定义点击逻辑的场景。

方案2：自定义抽屉内容 #

如果有多个抽屉项需要自定义点击逻辑，可以完全重写抽屉的内容组件，统一处理所有项的点击事件：

import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';
import { StackActions } from '@react-navigation/native';

// 自定义抽屉内容组件
function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      {props.state.routes.map((route, index) => {
        const isFocused = props.state.index === index;
        const handlePress = () => {
          if (route.name === 'Restaurants') {
            props.navigation.navigate('Restaurants');
            props.navigation.dispatch(StackActions.popToTop());
          } else {
            props.navigation.navigate(route.name);
          }
          props.navigation.closeDrawer();
        };

        return (
          <DrawerItem
            key={route.key}
            label={route.name}
            focused={isFocused}
            onPress={handlePress}
          />
        );
      })}
    </DrawerContentScrollView>
  );
}

之后将自定义组件传入Drawer导航器的drawerContent属性即可：

<HomeDrawerNavigator.Navigator
  drawerContent={(props) => <CustomDrawerContent {...props} />}
  // 其他原有Drawer配置保持不变
>
  <HomeDrawerNavigator.Screen 
    name='Restaurants'
    component={RestaurantsStackNavigator}
  />
  <HomeDrawerNavigator.Screen 
    name='Settings'
    component={SettingsNavigator}
  />
</HomeDrawerNavigator.Navigator>

两种方案都可以实现需求，StackActions.popToTop()会自动回到当前Stack导航器的第一个页面，不需要硬编码目标页面名称，后续如果修改Stack的首页配置也不需要同步修改跳转逻辑。

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