React Native CLI中React Navigation reanimated报错修复方法

非Expo管理的React Native CLI项目，接入React Navigation的createDrawerNavigator实现抽屉导航时出现两类异常：

1. 打包阶段控制台抛出Babel解析错误，核心报错信息：

BUNDLE  ./index.js

error: node_modules\react-native-reanimated\src\index.ts: C:\Work\WordHunt\node_modules\react-native-reanimated\src\index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
    |        ^^^^^^^^^^^^
  8 |

2. 手机端App运行异常，异常效果：
   

相关业务代码参考：

• 抽屉导航组件实现代码：

import React, { Component } from 'react'
import { createDrawerNavigator } from '@react-navigation/drawer';
import Main from './Screens/Main';

const Drawer = createDrawerNavigator();

export default function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Main" component={Main} />
    </Drawer.Navigator>
  );
}

• 项目入口App.js代码：

import React from 'react';
import Main from './src/Components/Screens/Main';
import MyDrawer from './src/Components/SideMenu';

function App() {
  return (
    <MyDrawer />
  )
}

export default App;

该错误由@react-navigation/drawer的强制依赖react-native-reanimated缺少对应Babel转换配置导致，打包阶段无法解析export * as default的ES模块语法。

• 安装缺失的Babel依赖
  在项目根目录执行对应包管理命令安装开发依赖：

  # npm 环境
  npm i @babel/plugin-proposal-export-namespace-from -D
  
  # yarn 环境
  yarn add @babel/plugin-proposal-export-namespace-from -D
  

• 修改Babel配置
  打开项目根目录下的babel.config.js，在plugins数组中添加配置项，注意react-native-reanimated/plugin必须放在数组的最后一位，配置参考如下：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      '@babel/plugin-proposal-export-namespace-from',
      'react-native-reanimated/plugin' // 必须放在plugins数组末尾
    ]
  };
  

• 清除Metro缓存重启服务
  终止当前正在运行的Metro打包进程，执行带缓存清除参数的启动命令：

  npm start -- --reset-cache
  # 或
  yarn start --reset-cache
  

• 校验原生端配置
  • 安卓：打开android/app/src/main/java/[你的项目包名]/MainApplication.java，添加Reanimated的JSI模块配置：

    // 文件顶部添加导入
    import com.swmansion.reanimated.ReanimatedJSIModulePackage;
    import com.facebook.react.bridge.JSIModulePackage;
    
    // 在MainApplication类中重写以下方法
    @Override
    protected JSIModulePackage getJSIModulePackage() {
      return new ReanimatedJSIModulePackage();
    }
    

  • iOS：进入ios目录执行pod install，同步原生依赖
• 重新编译安装App
  不要使用热更新加载修改后的配置，执行原生编译命令重新将App安装到测试设备：

  # 安卓
  npx react-native run-android
  # iOS
  npx react-native run-ios
  

• 若执行完以上步骤仍报错，检查react-native-reanimated版本是否>=2.0.0，React Navigation Drawer v6不支持1.x版本的reanimated
• 每次修改Babel配置后必须清除Metro缓存再重启，否则旧缓存会导致配置不生效

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