React Native：如何在指定screen页面禁用drawer侧边抽屉导航

你的导航层级是 Drawer导航为根导航，Stack导航是Drawer的子路由，gestureEnabled 是Drawer导航的专属配置项，直接写在Stack的screen配置中只会作用于Stack自身的右滑返回手势，无法传递到父级Drawer，所以配置不生效。

步骤1：给Drawer导航设置唯一ID，方便子路由调用 #

修改你的Drawer导航配置，添加id属性，避免多层导航嵌套时找错父级：

<Drawer.Navigator 
  id="Drawer" // 新增这行
  initialRouteName="Home" 
  drawerContent={props => {
    return (
      <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
    )
  }}>

步骤2：在Work页面监听聚焦状态，动态修改Drawer配置 #

在你的Work页面组件中，通过路由聚焦钩子动态切换Drawer的手势开关：

// 先导入依赖
import { useFocusEffect } from '@react-navigation/native';
import { useCallback } from 'react';

// Work组件内部添加这段逻辑
const Work = ({ navigation }) => {
  useFocusEffect(
    useCallback(() => {
      // 进入Work页面时禁用Drawer手势
      navigation.getParent('Drawer').setOptions({ gestureEnabled: false });
      // 离开Work页面时恢复Drawer手势
      return () => {
        navigation.getParent('Drawer').setOptions({ gestureEnabled: true });
      };
    }, [navigation])
  );

  // 剩下的Work组件原有逻辑
  // ...
}

步骤3：移除WorkHeader的抽屉打开按钮 #

你的WorkHeader里如果保留了点击呼出抽屉的菜单按钮，就算禁用手势，用户点击按钮依然可以打开抽屉，所以需要把对应TouchableOpacity节点删掉。

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