React Native React-Navigation v5抽屉点击菜单打不开、滑动即自动关闭

问题解决步骤 #

你遇到的抽屉点击无响应、滑动后自动关闭的问题，是React Navigation 6.x抽屉导航的依赖配置错误、版本冲突导致的，按以下步骤排查即可解决：

• 第一步：修改Babel配置添加Reanimated插件
  打开项目根目录下的babel.config.js，新增react-native-reanimated的插件配置，参考如下：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      // 新增下面这行配置
      plugins: ['react-native-reanimated/plugin'],
    };
  };
  

• 第二步：入口文件顶部导入手势库
  打开App.tsx，在所有导入代码的第一行添加手势库导入语句：

  import 'react-native-gesture-handler';
  

• 第三步：统一导航类依赖版本
  你当前package.json中@react-navigation/bottom-tabs为5.x版本，其余导航依赖均为6.x，跨大版本混用会引发未知冲突，执行命令升级到匹配的6.x版本：

  npm install @react-navigation/bottom-tabs@6.x
  # 如使用yarn则执行：yarn add @react-navigation/bottom-tabs@6.x
  

• 第四步：清理缓存重启项目
  所有配置修改完成后，执行以下命令清理Expo缓存重启项目，确保配置生效：

  expo start -c
  

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