React Native Navigation Drawer点击遮罩层不关闭（仅iOS）问题求助

解决方案 #

1. 降级react-native-reanimated版本
   你当前使用的2.2.0版本和@react-navigation/drawer 5.x存在iOS端的已知兼容问题，先卸载现有版本，安装官方推荐的2.1.0版本：

npm uninstall react-native-reanimated
npm install react-native-reanimated@2.1.0

iOS端操作完成后进入ios目录执行pod install更新原生依赖。

2. 确认babel配置正确
   打开项目根目录的babel.config.js，确认react-native-reanimated的插件已经添加，且放在插件列表的最后一位：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // 你的其他插件保持不变
    'react-native-reanimated/plugin',
  ]
};

配置修改后执行npx react-native start --reset-cache清空缓存重启项目。

3. 排查手势库冲突
   暂时移除项目中其他带有手势操作逻辑的第三方组件，逐一测试确认是否存在库冲突导致手势拦截异常。

4. 兜底手动控制方案
   如果上述操作都无法解决，可以先关闭iOS端的抽屉手势滑动功能，通过按钮手动控制抽屉开关：

import { Platform } from 'react-native';

// 在Drawer.Navigator配置中添加
<Drawer.Navigator
  screenOptions={{
    gestureEnabled: Platform.OS !== 'ios',
    swipeEnabled: Platform.OS !== 'ios'
  }}
  // 其余原有配置保持不变
>

在页面头部添加菜单按钮，调用navigation.openDrawer()和navigation.closeDrawer()方法即可手动控制抽屉状态。

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