如何为深层嵌套的特定屏幕禁用drawer抽屉导航

多层嵌套导航下禁用特定屏幕抽屉手势的解决方案 #

核心原理 #

控制抽屉滑出手势的属性是作用于抽屉导航配置的swipeEnabled，而非Stack屏幕的gestureEnabled，后者仅控制Stack导航的右滑返回手势，这也是你之前配置错属性产生额外影响的原因。同时需要递归获取最深层级的聚焦路由名，解决getFocusedRouteNameFromRoute只能拿到当前层级路由名的问题。

步骤1：封装递归获取最深路由名的工具方法 #

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

// 递归获取当前最内层聚焦的屏幕路由名
const getDeepestFocusedRouteName = (route) => {
  const currentLevelRouteName = getFocusedRouteNameFromRoute(route);
  // 存在子导航状态则继续递归查找
  if (route.state?.routes) {
    const childRoute = route.state.routes[route.state.index];
    return getDeepestFocusedRouteName(childRoute);
  }
  return currentLevelRouteName;
};

步骤2：在抽屉导航中动态配置手势开关 #

在Drawer.Navigator的screenOptions中通过路由名判断是否禁用抽屉手势：

<Drawer.Navigator
  screenOptions={({ route }) => {
    const currentScreenName = getDeepestFocusedRouteName(route);
    return {
      // 将下方的TargetScreen替换为你需要禁用抽屉的目标屏幕路由名
      // 多个禁用场景可改为 !['Screen1', 'Screen2'].includes(currentScreenName)
      swipeEnabled: currentScreenName !== 'TargetScreen',
      // 保留你原有抽屉导航的其他配置项
    };
  }}
>
  {/* 抽屉导航原有子屏幕配置，比如嵌套的Stack导航等 */}
</Drawer.Navigator>

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