React Native抽屉导航报错：undefined is not a function 求助

Hey Abdul, let's break down what's going wrong and fix your drawer navigation setup step by step:

What's Causing the Error? #

The core issue here is two-fold:

1. Wrong Import Path: createDrawerNavigator doesn't live in the react-navigation-stack package — it's part of the separate react-navigation-drawer module (this is how React Navigation 4.x structures its navigation components).
2. Tiny Syntax Bug: Your Main class component has an extra pair of parentheses that's invalid.

Step-by-Step Fixes #

1. Install the Missing Dependency #

First, you need to install the react-navigation-drawer package since it's required for drawer functionality:

npm install react-navigation-drawer
# Or if you use Yarn:
yarn add react-navigation-drawer

2. Correct the Import Statements #

Update your imports in MainComponent.js to pull createDrawerNavigator from the right package:

// Replace this line:
import { createStackNavigator, createDrawerNavigator } from 'react-navigation-stack';

// With these two lines:
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';

3. Fix the Class Component Syntax #

Your Main class has an unnecessary pair of parentheses after Component — remove them, and also add flex: 1 to the wrapping View to ensure the navigation fills the screen:

// Wrong:
class Main extends Component() {

// Correct:
class Main extends Component {
  render() {
    return( 
      <View style={{ flex: 1 }}> 
        <MainNavigator /> 
      </View> 
    );
  }
}

4. Verify createAppContainer Wrapping #

Your current wrapping of Main with createAppContainer is actually correct! The main problem was the import and syntax issues, not the container setup.

Full Corrected MainComponent Code #

Here's the complete fixed version for reference:

import React, {Component} from 'react';
import { View, Platform } from 'react-native';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import DishDetail from './DishDetailComponent';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';

const MenuNavigator = createStackNavigator({
 Menu: { screen: Menu },
 DishDetail: { screen: DishDetail }
}, {
 initialRouteName: 'Menu',
 navigationOptions: {
 headerStyle: { backgroundColor: "#512DA8" },
 headerTintColor: '#fff',
 headerTitleStyle: { color: "#fff" }
 }
} );

const HomeNavigator = createStackNavigator({
 Home: { screen: Home }
}, {
 navigationOptions: ({ navigation }) => ({
 headerStyle: { backgroundColor: "#512DA8" },
 headerTitleStyle: { color: "#fff" },
 headerTintColor: "#fff"
 })
});

const MainNavigator = createDrawerNavigator({
 Home: { screen: HomeNavigator, navigationOptions: { title: 'Home', drawerLabel: 'Home' } },
 Menu: { screen: MenuNavigator, navigationOptions: { title: 'Menu', drawerLabel: 'Menu' } }
}, { drawerBackgroundColor: '#D1C4E9' });

class Main extends Component {
 render() {
 return( 
  <View style={{ flex: 1 }}> 
    <MainNavigator /> 
  </View> 
 );
 }
}

export default createAppContainer(Main);

After making these changes, your drawer navigation should work as expected, with both Home and Menu screens accessible via the drawer.

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