React - Native Navigation Drawer Navigation Nested Navigation

user_8156872 0
Viewed 3192

Currently in the react-native app that I'm building, I have a Drawer Navigator that includes two screens. For navigation, I am using react-navigation. https://reactnavigation.org/docs/intro/

The code is the following,

import { DrawerNavigator } from 'react-navigation'
export  default drawernav = DrawerNavigator(
     {
        Login: {Screen: Login},
        Main : {Screen: Main }
     }
)

Although Login is inside a Drawer Navigator I want it so that the Login screen does not have the drawer navigation functionality but the main screen does with the login and main as the two options in the drawer navigator. However, right now the Login screen also has the drawer navigator. Is there a way to make the Login drawer navigation functionality disappear?

create-react-native-app react-navigation react-native
3 Answers

Please refer to the following post which is very helpful. https://github.com/react-navigation/react-navigation/issues/131. There are a number of approaches are suggested. A complete working example is provided by kyaroru as follow: https://github.com/kyaroru/ReactNavDrawer.

The following is a simpler example:

app.js

import React from 'react';
import { createStackNavigator , createDrawerNavigator } from 'react-navigation';
import LoginScreen from './LoginScreen';
import SignupScreen from './SignupScreen';
import HomeScreen from './HomeScreen';
import DrawerButton from './DrawerButton';
import SettingScreen from './SettingScreen';

const StackNavigator = createStackNavigator ({

  Login: {
    screen: LoginScreen,
  },

  Signup: {
    screen: SignupScreen,
  },  

  Home: {
    screen: HomeScreen,
  },

  Sitting: {
    screen: SettingScreen,
  },    

}, 
{
      navigationOptions: ({navigation}) => ({
        headerLeft: <DrawerButton navigation={navigation} />,
      }),
}
);

const DrawerNavigator = createDrawerNavigator({
  Menu: {
     screen: StackNavigator,
  },

  Signup: {
    screen: SignupScreen,
  },  

  Sitting: {
    screen: SettingScreen,
  },  

});

export default DrawerNavigator;

DrawerButton.js

import React from 'react';
import { TouchableOpacity, Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';


const DrawerButton = ({ navigation }) => (
  <TouchableOpacity
    onPress={() => navigation.openDrawer()}
  >
    <Ionicons name={Platform.OS === 'ios' ? 'ios-menu' : 'md-menu'} size={28}  />
  </TouchableOpacity>
);


DrawerButton.propTypes = {
  navigation: PropTypes.object.isRequired,
};

export default DrawerButton;
user_6803170

You'll want to change your navigation structure. At the root should be a StackNavigator which will contain the LoginScreen, and the DrawerNavigator. The screens in the DrawerNavigator will likely be StackNavigators. Those StackNavigators will contain screen components with your code.

user_20709420

As you don't want the drawer in the login screen then use this flow

import { DrawerNavigator, createStackNavigator } from 'react-navigation'
const drawernav = DrawerNavigator(
     {
        Main : {Screen: Main }
     }
);

const stack = createStackNavigator(
    {
      Login: {Screen: Login},
      drawer: {screen: drawernav},
    }
);

export default stack;

and in future you want to add the screens then if the screen required the drawer then that screen must be placed in drawer navigator and the screens which don't require the drawer it should be placed in stack navigator.

user_68255940
Related