Expo环境React Native降级遇依赖冲突及导航组件报错求助

一、初始报错场景 #

使用Expo + VS Code学习React Native，安装@react-navigation/drawer后，执行以下导入代码时触发报错：

import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

初始错误提示为react-native-reanimated库初始化失败，要求配置babel插件并重置缓存：

Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache
   ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
   A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

二、按提示操作后的新报错 #

按照提示配置babel插件并重置缓存后，出现新的类型错误：

TypeError: undefined is not an object (evaluating 'cppVersion.match')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:237:40 in guardedLoadModule
at node_modules/metro-runtime/src/polyfills/require.js:775:16 in runUpdatedModule
at node_modules/metro-runtime/src/polyfills/require.js:603:39 in metroHotUpdateModule
at node_modules/metro-runtime/src/polyfills/require.js:53:23 in define
at node_modules/metro-runtime/src/modules/HMRClient.js:21:8 in inject
at node_modules/metro-runtime/src/modules/HMRClient.js:27:25 in injectUpdate
at node_modules/metro-runtime/src/modules/HMRClient.js:92:20 in on$argument_1
at node_modules/metro-runtime/src/modules/vendor/eventemitter3.js:229:30 in emit
at node_modules/metro-runtime/src/modules/HMRClient.js:71:19 in _ws.onmessage
at node_modules/react-native/Libraries/WebSocket/WebSocket.js:243:26 in _eventEmitter.addListener$argument_1
at node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:105:35 in emit

三、版本降级时的依赖冲突 #

怀疑是React Native与导航组件版本不兼容，尝试将React降级至17.0.2、React Native降级至0.67，执行命令npm install react-native@0.67时出现依赖冲突：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: foodapp@1.0.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.2" from react-native@0.67.5
npm ERR! node_modules/react-native
npm ERR!   react-native@"0.67" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/grace/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/grace/.npm/_logs/2023-01-18T06_39_58_870Z-debug-0.log

四、当前项目配置 #

package.json内容 #

{
  "name": "foodapp",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/drawer": "^6.5.7",
    "@react-navigation/native": "^6.1.2",
    "@react-navigation/native-stack": "^6.9.8",
    "expo": "~47.0.12",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-reanimated": "^2.14.1",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

babel.config.js内容 #

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin'
    ]
  };
};

五、求助需求 #

寻求以下两个问题的解决方法：

• 解决@react-navigation/drawer导入后的报错问题（包括reanimated初始化失败和后续的cppVersion.match类型错误）
• 解决React Native降级时的npm依赖冲突问题

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