Javascript 部分和复活的本机部分不匹配（3.16.1 与 3.10.0）

Question

当前行为

在更改之前，我已经有了一个堆栈导航，但是当尝试实现抽屉而不仅仅是堆栈时，我遇到了以下错误：

 ERROR  ReanimatedError: [Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.16.1 vs 3.10.0).
    See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-part-and-native-part-of-reanimated` for more details., js engine: hermes

平台

• [x] 安卓
• [ ] iOS
• [ ] 网页
• [ ] Windows
• [ ] MacOS

套餐

• []@react-navigation/bottom-tabs
• [x] @react-navigation/抽屉
• []@react-navigation/material-top-tabs
• [x] @react-navigation/stack
• []@react-navigation/native-stack
• [ ] 反应本机选项卡视图

环境

• [x]我删除了不使用的软件包

包装	版本
@react-navigation/native	^18.6.1
@react-navigation/底部选项卡	未使用
@react-navigation/抽屉	^6.7.2
@react-navigation/material-top-tabs	未使用
@react-navigation/堆栈	^6.4.1
@react-navigation/native-stack	未使用
反应本机安全区域上下文	^4.14.0
反应本机屏幕	^3.35.0
反应本机手势处理程序	^2.20.2
react-native-reanimated	^3.16.1
react-native-tab-view	未使用
react-native-pager-view	未使用
反应原生	0.74.5
博览会	~51.0.28
节点	v20.18.0
npm 或纱线	10.8.2

通过运行来执行应用程序

npx expo start --tunnel

电话：

• 红米Note 11 Pro 5G
• 操作系统版本：

  1.0.5.0 TKCEUOR

• 安卓版本：

  13 TKQ1.221114.001

预期行为

只是想让抽屉按照以下方式工作：https://reactnavigation.org/docs/drawer-based-navigation/

我拥有的一个解决方法是通过安装最新的博览会并修复依赖关系来降级某些组件：

• npm i expo@latest

• npx expo install --fix

但是这并不理想，因为这意味着我没有每个软件包的最新版本。

复制

这是我可以制作的最小示例：github.com/nicolas-goyon/reanimated_drawer_issue

重现步骤：

-

npm i

-

npx start expo --tunnel

- 用带有 expo 的手机扫描二维码（最好是最接近我所描述的）

相关文件及代码

菜单.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>
    );
}

将反应导航/抽屉更改为反应导航/堆栈时不会出现任何问题。

包.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
}

Answer 1

遇到同样的问题，正在运行：

npx expo start -c

帮我解决了。

来源： https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting/#mismatch- Between-javascript-code-version-and-reanimated-babel-plugin-version