引入@react-navigation/drawer后react-native-reanimated初始化失败求助

DevOps 小满

2026-7-23

问题描述

引入@react-navigation/drawer后出现两个核心错误：

ERROR Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: ...

同时伴随：

Invariant Violation: 'main' has not been registered

移除import { createDrawerNavigator } from '@react-navigation/drawer';后错误消失，已尝试更换react-native-reanimated版本但无效。

项目核心代码：

import { StatusBar } from 'expo-status-bar';
import React, {useState, Component, useEffect} from "react";
import { StyleSheet, Text, View, Button, TouchableOpacity, TextInput, Image, SafeAreaView} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {createNativeStackNavigator } from "@react-navigation/native-stack";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Menu, MenuProvider, MenuTrigger, MenuOptions, MenuOption, renderers} from 'react-native-popup-menu';
import { createDrawerNavigator } from '@react-navigation/drawer';
import LoginPage from './LoginPage.js';
import HomePage from './HomePage.js';
import RegisterPage from './RegisterPage.js';
import UserInfoPage from './UserInfoPage.js';

const Drawer = createDrawerNavigator();

export default function App({navigation}) {
  let startscreen = 'LoginPage';
  console.disableYellowBox = true;
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName={startscreen}>
        <Drawer.Screen name="LoginPage" component={LoginPage} />
        <Drawer.Screen name="HomePage" component={HomePage} />
        <Drawer.Screen name="RegisterPage" component={RegisterPage} />
        <Drawer.Screen name="UserInfoPage" component={UserInfoPage} />
      </Drawer.Navigator>
    </NavigationContainer>
    );
  }

package.json配置：

{
  "name": "fitness",
  "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",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "expo": "^48.0.0",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.7",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-popup-menu": "^0.16.1",
    "react-native-reanimated": "^2.11.0",
    "react-native-web": "~0.18.11"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "metro-react-native-babel-preset": "^0.76.3"
  },
  "private": true
}

babel.config.js配置：

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

解决方案

匹配react-native-reanimated与Expo版本
Expo 48要求react-native-reanimated版本为~2.14.4，当前使用的2.11.0存在兼容性问题。执行命令安装适配版本：
```
expo install react-native-reanimated@~2.14.4
```
确保Babel插件顺序正确
react-native-reanimated/plugin必须放在babel.config.js的plugins数组最后一位（若有其他插件），当前配置已符合要求，但需确认无其他插件干扰。
清除Expo缓存并重启项目
缓存问题是这类错误的常见诱因，执行以下命令彻底清除缓存并重启：
```
expo r -c
```
重新安装导航依赖
确保@react-navigation/drawer及其依赖通过Expo官方命令安装，避免版本不兼容：
```
expo install @react-navigation/drawer
```
验证入口文件配置
确认package.json中main字段为node_modules/expo/AppEntry.js，当前配置正确，无需修改。

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