React Native实现抽屉导航时遇Reanimated版本不匹配错误

当前行为 #

之前栈导航可正常运行，但替换为抽屉导航时出现以下错误：

ERROR  ReanimatedError: [Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.16.1 vs 3.10.0).
    查看Reanimated官方故障排查文档了解更多详情., js engine: hermes

平台 #

• ✅ Android
• ❌ iOS
• ❌ Web
• ❌ Windows
• ❌ MacOS

使用的包 #

• ❌ @react-navigation/bottom-tabs
• ✅ @react-navigation/drawer
• ❌ @react-navigation/material-top-tabs
• ✅ @react-navigation/stack
• ❌ @react-navigation/native-stack
• ❌ react-native-tab-view

环境 #

• ✅ 已移除未使用的包

依赖版本 #

启动方式与测试设备 #

通过执行 npx expo start --tunnel 启动应用
测试设备：

• Redmi Note 11 Pro 5G
• OS版本：1.0.5.0 TKCEUOR
• Android版本：13 TKQ1.221114.001

预期行为 #

按照官方文档实现抽屉导航功能

目前有一个临时解决方案：安装最新版expo并修复依赖，以此降级部分组件：

• npm i expo@latest
• npx expo install --fix

但此方案并不理想，因为无法保留各包的最新版本

复现方式 #

最小复现示例仓库：github.com/nicolas-goyon/reanimated_drawer_issue
复现步骤：

• npm i
• npx expo start --tunnel
• 使用Expo扫码（建议使用与上述描述接近的设备）

相关文件与代码 #

Menu.js #

引发问题的文件为 src/components/Menu.js，代码如下：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Login, Notifications, PlaceCreation, Places, Profil, ProfilEdit,Register, Requests,Reservations,Reserve } from '../screens';

const Drawer = createDrawerNavigator();


export default function Menu() {
    return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Register">    
          <Drawer.Screen name="Login" component={Login} />
          <Drawer.Screen name="Register" component={Register} />                  
        </Drawer.Navigator>
      </NavigationContainer>
    );
}

将@react-navigation/drawer替换为@react-navigation/stack则无问题

Package.json #

package.json中的包版本也是引发问题的原因之一，代码如下：

{
  "name": "iwa",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "start:tunnel": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-community/datetimepicker": "^8.2.0",
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/stack": "^6.4.1",
    "@reduxjs/toolkit": "^2.3.0",
    "axios": "^1.7.7",
    "expo": "~51.0.28",
    "expo-image-picker": "~15.0.7",
    "expo-status-bar": "~1.12.1",
    "iwa": "file:",
    "moment": "^2.30.1",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "react-native-calendars": "^1.1307.0",
    "react-native-config": "^1.5.3",
    "react-native-date-picker": "^5.0.7",
    "react-native-dotenv": "^3.4.11",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-reanimated": "^3.16.1",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^3.35.0",
    "react-redux": "^9.1.2",
    "redux": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0"
  },
  "private": true
}

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