未定义不是函数（评估'（0，_reactnavigationstack.creactDrawernavigation）'）

Question

我要创建包含菜单和主屏幕的抽屉导航。我尝试了很多，但是我无法解决此问题，并且根据react native的更新，我们必须将导航包装在CreateAppContainer中，如您所见，我包装了它，但是没有解决。

"MainComponent"

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, createDrawerNavigator } from 'react-navigation-stack';   

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"  
  })
});

//-----------Main---------//

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>
            <MainNavigator />
        </View>
        );
    }
}
export default createAppContainer(Main);


////////////////////App.js/////////////////

import React from 'react';
import Main from './components/MainComponent';


export default class App extends React.Component {
  render() {
    return (
      <Main />
    );
  }
}

我认为问题是我没有正确包装appContainer。

Answer 1

您输入的错误。使用像

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

代替

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

Answer 2

尝试这种方式

const LoginNavigator = createStackNavigator({
    Login: {
        screen: Login,
        navigationOptions: {
          header: null,
        }
    },
    SignUp: {
        screen: SignUp,
        navigationOptions: {
          header: null,
        }
    }
});

class NavigationDrawerStructure extends Component {

  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          <Image
            source={require('../Img/hamburger.png')}
            style={{ width: 25, height: 25, marginLeft: 20, tintColor: '#ffffff' }}
         />
        </TouchableOpacity>
      </View>
    );
  }
}

const HomeActivity_StackNavigator = createStackNavigator({

  Home: {
    screen: Main,
    navigationOptions: ({ navigation }) => ({
      title: 'Dashboard',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff'
    }),
  },
}, {headerLayoutPreset: 'center'});

const DrawerNavigators = createDrawerNavigator({
  //Drawer Optons and indexing
  Main: {
    screen: HomeActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Dashboard',
    }
  }
});

const NonDrawerNavigators = createStackNavigator({
    TaskView: {
        screen: TaskView,
        navigationOptions: {
            title: 'Task',
            headerStyle: {
                backgroundColor: '#FF9800',
            },
            headerTintColor: '#fff'
        }
    },
    TeamView: {
        screen: TeamView,
        navigationOptions: {
            title: 'Team',
            headerStyle: {
                backgroundColor: '#FF9800',
            },
            headerTintColor: '#fff'
        }
    }
}, {headerLayoutPreset: 'center'});

const AppNavigator = createStackNavigator({
    drawerStack: {
        screen: DrawerNavigators,
        navigationOptions: {
            header: null
        }
    },
    nonDrawerStack: {
        screen: NonDrawerNavigators,
        navigationOptions: {
            header: null
        }
    }
});

export default createAppContainer(createSwitchNavigator({
    SplashScreen: SplashScreen,
    loginStack: LoginNavigator,
    homeStack: AppNavigator
    }, {
       initialRouteName: 'SplashScreen'
   })
);

Answer 3

I had modified your code as under. I hope this will help you.

"MainComponent"

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, createDrawerNavigator } from 'react-navigation-stack';   

const MenuNavigator = createAppContainer(createDrawerNavigator(
{
    Menu: { screen: Menu },
    DishDetail: { screen: DishDetail }
}, 
{
    contentComponent: SideMenu,
        drawerWidth: normalize(280),
        initialRouteName: "Menu"

}
));

const HomeNavigator = createAppContainer(createStackNavigator(
{
  Home: { screen: Home }
},
{
        // Default config for all screens

        headerMode: 'none',
        initialRouteName: 'Home',

        // transitionConfig: noTransitionConfig,
    },
));

class Main extends Component() {

    render() { 
        return(
        <View>
            <MainNavigator />
        </View>
        );
    }
}
export default createAppContainer(Main);


////////////////////App.js/////////////////

import React from 'react';
import Main from './components/MainComponent';


export default class App extends React.Component {
  render() {
    return (
      <Main />
    );
  }
}