I have a Navigation Drawer
which should appear in all my screen(Except for the Splash
screen).
I've got it that way:
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="EstateDetails" component={Screens.EstateDetails} />
<Stack.Screen name="Tour" component={Screens.Tour} />
<Stack.Screen name="Comparison" component={Screens.Comparison} />
<Stack.Screen name="Blog" component={Screens.Blog} />
<Stack.Screen name="Auth" component={Screens.Auth} />
</Stack.Navigator>
);
};
const DrawerNavigator = () => {
return (
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
<Drawer.Screen name="HomeScreen" component={Screens.Home} />
<Drawer.Screen name="stack" component={StackNavigator} />
<Drawer.Screen name="RegisterEstate" component={Screens.RegisterEstate} />
<Drawer.Screen name="Filter" component={Screens.Filter} />
<Drawer.Screen name="Conditions" component={Screens.Conditions} />
<Drawer.Screen name="Judicial" component={Screens.Judicial} />
<Drawer.Screen name="ContactUs" component={Screens.ContactUs} />
<Drawer.Screen name="ReportBugs" component={Screens.ReportBugs} />
</Drawer.Navigator>
)
};
export const AppNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen name="Splash" component={Screens.Splash}/>
<Stack.Screen name="Home" component={DrawerNavigator}/>
</Stack.Navigator>
</NavigationContainer>
);
};
In this case, all the okay only stack screens act as drawer screen. (The screen only loads once and shows the initial load next time, like blog screens).
I need to have the cursor on all pages except splash and to stack some of my pages (like dynamic pages that don't have the same content)
If you want to display same drawer in all other screens just pass {DrawerNavigator} to all other screens where you want to show the Drawer.So in your example if you want to show Drawer in Tour and Blog screen just add
<Stack.Screen name="Blog " component={DrawerNavigator} />
<Stack.Screen name="Tour" component={DrawerNavigator} />
Now you can access in Blog and Tour screen.
If you want to show a different Drawer in other screens then Create a new function.