React Native集成Drawer导航时出现TypeError: Cannot read property 'prototype' of undefined

问题描述 #

在VS Code中学习React Native开发，集成Drawer导航前功能正常，添加后出现TypeError: Cannot read property 'prototype' of undefined错误，错误指向Drawer组件。曾尝试删除readme中的import e from 'express'语句，但问题未解决。

相关代码 #

index.js #

import React, { useState } from 'react';
import Navigator from '../routes/drawer'  

export default function App() {
  return (
    <Navigator />
  );
}

Drawer导航代码（routes/drawer.js） #

import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';

import HomeStack from '../routes/homeStack'  
import AboutStack from '../routes/aboutStack'  

const RootDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeStack,
  },
  About: {
    screen: AboutStack,
  },
});

export default createAppContainer(RootDrawerNavigator);

HomeStack代码（routes/homeStack.js） #

import { createStackNavigator } from 'react-navigation-stack';

import Home from '../Screens/home';
import ReviewDetails from '../Screens/reviewDetails'; 

const screens = {
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Game Zone',
    }
  },
  ReviewDetails: {
    screen: ReviewDetails,
    navigationOptions: {
      title: 'Review Details',
    }
  },
};

const HomeStack = createStackNavigator(screens, {
  defaultNavigationOptions: {
    headerTintColor: '#444',
    headerStyle: { backgroundColor: '#eee', height: 60 }
  }
});

export default HomeStack;

原因分析 #

这个错误主要源于react-navigation相关包的版本不兼容，或是缺少Drawer导航依赖的原生组件（如react-native-reanimated、react-native-gesture-handler），导致Drawer组件初始化时无法找到所需的原型对象。旧版react-navigation（v4及以下）对各子包版本有严格要求，版本不匹配会引发此类运行时错误。

解决方案 #

1. 统一导航包版本 #

卸载现有不兼容的导航包，安装指定兼容版本：

# npm 方式
npm uninstall react-navigation react-navigation-drawer react-navigation-stack
npm install react-navigation@4.4.4 react-navigation-drawer@2.7.0 react-navigation-stack@2.10.4

# yarn 方式
yarn remove react-navigation react-navigation-drawer react-navigation-stack
yarn add react-navigation@4.4.4 react-navigation-drawer@2.7.0 react-navigation-stack@2.10.4

2. 安装必要原生依赖 #

Drawer导航依赖手势处理和动画组件，需安装并链接：

# npm 方式
npm install react-native-gesture-handler react-native-reanimated

# yarn 方式
yarn add react-native-gesture-handler react-native-reanimated

• 若你的React Native版本低于0.60，需手动链接：

react-native link react-native-gesture-handler react-native-reanimated

• RN 0.60+版本会自动完成链接，无需手动操作。

3. 配置手势处理组件 #

在项目根目录的index.js最顶部添加导入（确保在其他导入之前）：

import 'react-native-gesture-handler';

4. 清除缓存并重启项目 #

清除Metro缓存，避免旧缓存干扰：

npm start -- --reset-cache

之后重新运行项目：

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

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