Navigation and Drawer Navigation React-Native-CodePudding

So I had a navigation system in place already, and wanted to add a Drawer menu for specific navigations starting on the main shopping page once the user had logged in. The issue I am having is after following some directions online on how to have multiple navigations of different types the drawer buttons just simply don't do anything when clicked on. any insight or help is much appreciated.

I have the NavigationContainer on the app.js file, containing the DrawerMenu file, through which I imported the main StackNavigator file.

Main StackNavigator file

    // Main Nav
    import PasswordVerify from '../screens/PasswordVerify';
    import HomeShopping from '../screens/HomeShopping';
    import StorePage from '../screens/StorePage';

    // Drawer Screens
    import ProfileScreen from '../screens/DrawerScreens/ProfileScreen';
    import MyListingsScreen from '../screens/DrawerScreens/MyListingsScreen';
    import SellerDashBoardScreen from '../screens/DrawerScreens/SellerDashBoardScreen';


    const Stack = createNativeStackNavigator();

    const Navigation = () => {
      return (
         <Stack.Navigator>
            <Stack.Screen name="PasswordVerify" component={PasswordVerify} />
            <Stack.Screen name="HomeShopping" component={HomeShopping} />
            <Stack.Screen name="StorePage" component={StorePage} />
            {/* Drawer Screens */}
            <Stack.Screen name="ProfileIndex" component={ProfileScreen} />
            <Stack.Screen name="MyListingsIndex" component={MyListingsScreen} />
            <Stack.Screen name="SellerDashboardIndex" component={SellerDashBoardScreen} />
         </Stack.Navigator>

DrawerMenu file

    import { createDrawerNavigator } from '@react-navigation/drawer';

    import Navigation from './StackNavigator';

    const Drawer = createDrawerNavigator();

    const DrawerMenu = () => {
      return (

          <Drawer.Navigator screenOptions={{headerShown: false}}>
          <Drawer.Screen name="Profile" component={Navigation} />
          <Drawer.Screen name="MyListings" component={Navigation} />
          <Drawer.Screen name="SellerDashboard" component={Navigation} />

This is just what I interpreted from the guide I read and followed the best I could, and they had working examples, everything matches up except for the fact that when I pull out the Drawer menu, clicking the names there does nothing.

Thank you again for your time and help.

Tried implementing drawer navigation to my react-native app while I had another main navigation in place already for all non-drawer links. the result was the links on the drawer not responding at all.

CodePudding user response：

I would understand your idea as follows:

You have 3 screens: PasswordVerify, HomeShopping, StorePage.
You have a Drawer with 3 screens: ProfileScreen, MyListingsScreen, SellerDashBoardScreen.
You want from PasswordVerify(or HomeShopping or StorePage) redirect to Drawer.
You want after redirect, you can see your drawer and can press(or slide) to display drawer menu.

And i have an idea for your case:

Define Drawer.
Use Drawer(defined) like a Stack.
Import Drawer in Stack.Navigator.

This is code:

const Drawer = createDrawerNavigator();

const DrawerNav = () => {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="ProfileScreen" component={ProfileScreen} />
      <Drawer.Screen name="MyListingsScreen" component={MyListingsScreen} />
      <Drawer.Screen name="SellerDashBoardScreen" component={SellerDashBoardScreen} />
    </Drawer.Navigator>
  );
};

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="PasswordVerify" component={PasswordVerify} />
        <Stack.Screen name="HomeShopping" component={HomeShopping} />
        <Stack.Screen name="StorePage" component={StorePage} />
        <Stack.Screen name="DrawerNav" component={DrawerNav} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}