React Native Navigation Drawer仅首次滑动可打开问题求助

问题描述 #

使用React Native Navigation Drawer时出现异常：仅首次从左向右滑动能打开抽屉，点击顶部汉堡图标无响应；重新构建应用后，仍仅首次滑动可触发打开。在全新项目中测试问题依旧，调用navigation.openDrawer()和navigation.toggleDrawer()方法无反应，但Stack、Bottom Tabs等其他导航器可正常工作。

解决方案 #

1. 用GestureHandlerRootView包裹导航容器 #

react-native-gesture-handler需要根视图来统一处理手势逻辑，未正确包裹会导致抽屉交互异常。修改App.js：

import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import Feed from './components/Feed'
import Article from './components/Article'

const Drawer = createDrawerNavigator()

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name="Home" component={Feed} />
          <Drawer.Screen name="Settings" component={Article} />
        </Drawer.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

2. 调整react-native-reanimated版本至兼容RN 0.71的版本 #

RN 0.71.8与react-native-reanimated@3.2.0存在兼容性问题，降级到适配版本：

• 修改package.json中的依赖版本：

  "react-native-reanimated": "^2.14.4"
  

• 执行命令更新依赖并清除缓存：

  npm install
  npm start --reset-cache
  

• 针对Android额外清理构建缓存：

  cd android && ./gradlew clean && cd ..
  

• 针对iOS重新安装Pods：

  cd ios && pod deintegrate && pod install && cd ..
  

3. 验证Babel插件配置顺序 #

确保react-native-reanimated的Babel插件是最后一个配置项（部分版本对插件顺序有严格要求），修改babel.config.js：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // 其他插件需放在此插件之前
    ['react-native-reanimated/plugin', {
      relativeSourceLocation: true,
    }]
  ]
};

4. 排查自定义组件的手势冲突 #

如果Feed或Article组件中使用了自定义手势（如PanGestureHandler），需检查是否覆盖了抽屉的手势响应区域，避免事件被组件内部手势拦截。

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