React Native抽屉导航引入报错求助：模块加载失败未注册main

针对你遇到的Exception in HostFunction和"main" has not been registered错误，按以下步骤排查修复：

1. 修复Reanimated Babel配置 #

Reanimated的插件必须放在Babel配置的首位，否则会触发Hermes引擎的参数错误：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // 必须是第一个插件
    // 其他插件（如react-native-paper等）放在后面
  ],
};

修改后执行缓存重置：

npx react-native start --reset-cache

随后重启项目。

2. 调整依赖版本兼容性 #

react-native-reanimated@3.7.0与部分版本的@react-navigation/drawer存在兼容问题，尝试降级Reanimated：

npm install react-native-reanimated@3.6.2
# 或使用yarn：yarn add react-native-reanimated@3.6.2

同时确保react-native-gesture-handler在项目入口文件（index.js或App.js）最顶部导入：

// 必须是第一行导入
import 'react-native-gesture-handler';

// 其他导入放在后面
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
// ...

3. 重置Metro服务器与项目结构 #

• 完全停止Metro服务器（按Ctrl+C），回到项目根目录重新启动：

  npx react-native start
  

• 检查index.js中的AppRegistry注册代码是否完整且未被错误中断：

  import { AppRegistry } from 'react-native';
  import App from './App';
  import { name as appName } from './app.json';
  
  AppRegistry.registerComponent(appName, () => App);
  

4. 验证Drawer导航代码结构 #

确保Drawer导航被正确包裹在NavigationContainer中，示例结构如下：

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

避免出现未包裹NavigationContainer或Drawer.Navigator使用错误的情况。

内容的提问来源于stack exchange，提问作者Baran Öden