React Native Drawer Navigation v6.6.2与Reanimated v3.2.0兼容问题求助

问题定位 #

你的问题大概率是两个关键依赖的配置或加载顺序错误导致的：react-native-gesture-handler 导入位置不对，以及 react-native-reanimated 缺少必要的Babel配置。

解决方案 #

1. 调整react-native-gesture-handler的导入位置 #

将import 'react-native-gesture-handler';移到入口文件的最顶部，确保它在所有其他导入之前加载：

/**
 * @format
 */
import 'react-native-gesture-handler'; // 移至最顶部
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

2. 配置react-native-reanimated的Babel插件 #

在项目根目录的babel.config.js中添加Reanimated插件（无此文件则新建）：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

3. 清除缓存并重启服务 #

执行以下命令彻底清除缓存，再重启Metro和应用：

# 清除Metro缓存
npx react-native start --reset-cache

# 重新运行对应平台
npx react-native run-android
# 或
npx react-native run-ios

4. （可选）手动配置汉堡按钮 #

如果默认汉堡按钮仍不显示，可在Drawer.Screen的options中显式添加控制按钮：

<Drawer.Screen 
  name="Home" 
  component={HomeScreen} 
  options={({navigation}) => ({
    headerLeft: () => (
      <Button
        onPress={() => navigation.toggleDrawer()}
        title="☰"
      />
    ),
  })}
/>

完成以上步骤后，抽屉导航的汉堡按钮点击、滑动手势以及页面跳转后的功能即可恢复正常。

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