React Native报错：undefined is not an object (evaluating 'RootComponent.prototype')

我来帮你搞定这个报错！这个undefined is not an object (evaluating 'RootComponent.prototype')的错误在React Native搭配旧版react-navigation时特别常见，结合你的代码来看，主要是组件导出方式或版本兼容的问题，给你几个可行的修复方案：

你的现有代码 #

先把你的代码整理出来方便对照：

index.js

import { AppRegistry } from 'react-native';
import Navigate from './Navigate';
AppRegistry.registerComponent('form1', () => Navigate);

Navigate.js

import React from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import TabsList from './TabsList';

export const StackTab1 = StackNavigator({
  TabList: { screen: TabsList},
});

export const Navigate = DrawerNavigator( {
  Tab1: { screen : StackTab1 },
  Tab2: { screen : StackTab1 },
  Tab3: { screen : StackTab1 }
});

修复方案 #

方案1：调整组件导出方式（优先尝试）

AppRegistry.registerComponent默认期望导入的是默认导出的组件，而你现在用的是命名导出，这很可能导致React无法正确识别组件原型。修改如下：

修改Navigate.js，把Navigate改成默认导出：

import React from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import TabsList from './TabsList';

// 去掉export，改成局部变量
const StackTab1 = StackNavigator({
  TabList: { screen: TabsList},
});

// 改成默认导出
export default DrawerNavigator( {
  Tab1: { screen : StackTab1 },
  Tab2: { screen : StackTab1 },
  Tab3: { screen : StackTab1 }
});

index.js的导入不需要改，保持原样即可。

方案2：升级react-navigation到新版（彻底解决兼容问题）

如果你用的是React Native 0.60+，旧版的react-navigation（v1/v2）已经停止维护，和新版RN的兼容性极差，建议直接升级到v5+：

1. 先卸载旧版依赖：

npm uninstall react-navigation

2. 安装新版导航的核心依赖：

npm install @react-navigation/native @react-navigation/stack @react-navigation/drawer
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. 重构你的导航代码（新版用函数式组件写法）：
   修改Navigate.js为：

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import TabsList from './TabsList';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

// 定义栈导航组件
function StackTab1() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="TabList" component={TabsList} />
    </Stack.Navigator>
  );
}

// 导出默认的抽屉导航组件
export default function Navigate() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Tab1" component={StackTab1} />
        <Drawer.Screen name="Tab2" component={StackTab1} />
        <Drawer.Screen name="Tab3" component={StackTab1} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

方案3：清理缓存（解决玄学缓存问题）

有时候旧缓存会导致奇怪的报错，执行以下命令彻底清理：

# 清理npm缓存
npm cache clean --force
# 重置React Native缓存并重启服务
npx react-native start --reset-cache
# 清理Android构建缓存并重新运行
cd android && ./gradlew clean && cd .. && npx react-native run-android

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