До изменений у меня работала навигация по стеку, однако при попытке реализовать ящики вместо просто стека у меня возникла следующая ошибка:
Код: Выделить всё
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
< /code>
платформа < /h3>
[list]
[*] [x] Android < /li>
[] ios < / li>
[] web < /li>
[] Windows < /li>
[] macos < /li>
< / ul>
пакеты < /h3>
[] @React-navigation /bottom-tabs < /li>
[ x] @React-navigation/ящик
[*] [] @React-navigation/material-top-tabs
[*] [x] @React-navigation/ Stack
[*] [] @React-navigation/Native-Stack
[*] [] react-cnative-tab-view
< /ul>
среда < /h3>
[*] [x] Я удалил пакеты, которые я не использую < /li> < /ul>
Пакет < /th>
версия < /th>
< /tr>
< /thead>
@React-navigation /Native < /td>
функциональный /> @React-Navigation /Bottom-Tabs < /td>
не используется < /td>
< /tr>
@React-navigation /Chaneer < /td>
^6.7.2
< /tr>
@React-navigation /material-top-tabs < /td>
не используется < /td>
< /tr>
@React-navigation /стек < /td>
^^6.4.1
< /tr>
@React- Navigation /Native-Stack < /td>
не используется < /td>
< /tr>
react-can-safe -AREA-context < /td>
^^4.14.0> < /td>
^^3.35.0
< /tr>
react-inative-gesture-handler < / td>
^2.20.2
< /tr>
React-national-reanimated < /td>
^^3.16.1
< /tr>
react-cnative-tab-view < /td>
не используется < /td>
< /tr>
react-cnative-pager-view < /td>
Не используется < /td>
< /tr>
react-cnative < /td>
0,74,5 < /td>
< /tr>
expo < /td>
~51.0.28
< /tr>
node < /td>
функциональный /> npm или пряжа
td>10.8.2
< /div>
выполнение приложения с помощью запуска NPX Expo Start -tunnel < /code>
Телефон: < /p>
Redmi Note 11 Pro 5g
[*] Версия ОС: 1.0.5.0 tkceuor
[*] Версия Android: 13 TKQ1.221114.001 < /li>
[/list]
ожидаемое поведение
Просто пытаясь заставить ящики работать следующим образом: https://reactnavigation.org/docs/ На основе на основе ящика Navigation /< /p>
Один обходной путь, который у меня есть,-это понизить некоторые компоненты, установив новейшую выставку и исправляя зависимости: < /p>
[list]
npm i expo@latest
[/list]
Однако это не идеально, поскольку означает, что у меня нет последних версий каждого пакета.
Воспроизведение
Вот самый маленький пример, который я могу сделать: github.com/nicolas-goyon/reanimated_drawer_issue
Шаги воспроизвести :
- npm i
- npx start expo --tunnel
- отсканировать qr-код телефоном с экспо (желательно наиболее близким к тому, что я описал)
Соответствующие файлы и код
Menu.js
Файл, вызывающий проблема заключается в src/comComponents/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 (
);
}
При изменении реакции-навигации/ящика на реакцию-навигации/стека проблем не возникает.
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
}
Подробнее здесь: https://stackoverflow.com/questions/791 ... -vs-3-10-0