React Navigation v6如何自定义抽屉导航Home按钮的跳转行为

实现方案 #

你可以通过自定义抽屉菜单项的点击事件来覆盖默认跳转逻辑，具体修改步骤如下：

1. 先导入需要的依赖

import { CommonActions, DrawerActions } from '@react-navigation/native';
import { DrawerItem } from '@react-navigation/drawer';

2. 修改Home对应的Drawer.Screen配置，将options改为函数形式获取navigation实例，自定义drawerItem的点击逻辑：

<Drawer.Screen
  name={'HomeTabNav'}
  component={MainTabs}
  options={({ navigation }) => ({
    drawerLabel: 'Home',
    drawerItem: ({ label, focused, style, ...restProps }) => (
      <DrawerItem
        {...restProps}
        label={label}
        focused={focused}
        style={style}
        onPress={() => {
          // 先关闭抽屉
          navigation.dispatch(DrawerActions.closeDrawer());
          // 执行重置逻辑，回到Home栈顶层
          navigation.dispatch(
            CommonActions.reset({
              index: 0,
              routes: [
                // 如果MainTabs是嵌套导航，需要重置到子导航的顶层可以按下方写法配置
                {
                  name: 'HomeTabNav',
                  state: {
                    index: 0,
                    routes: [{ name: 'Home' }] // 替换为你MainTabs下的顶层路由名称
                  }
                }
              ],
            })
          );
        }}
      />
    )
  })}
/>

你可以根据自己的实际路由结构调整reset配置的index和routes字段，和你在屏幕组件内调用reset的写法完全一致，即可实现任意页面点击抽屉Home按钮都回到Home栈顶层的效果。

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