I create Drawer Navigation and inside it there is stack navigation all I need when back from stack need the drawer to be opened
my code is like this and All I need is to keep the drawer opened after back from any stack screen
const Drawer = createDrawerNavigator();
function DrawerNav({ navigation }) {
// toggleDrawer = () => {
// this.props.navigation.dispatch(DrawerActions.toggleDrawer())
// }
return (
<Drawer.Navigator initialRouteName="Home"
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: brand,
},
headerTintColor: primary,
headerTransparent: false,
headerTitle: '',
headerLeftContainerStyle: {
paddingLeft: 20,
},
}}>
<Drawer.Screen name="Home" component={HomeScreen} options={horizontalAnimation}/>
<Drawer.Screen name="RootStack" component={RootStack} />
</Drawer.Navigator>
);
}
const Stack = createStackNavigator();
const RootStack = () => {
return (
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: brand,
},
headerTintColor: primary,
headerTransparent: true,
headerTitle: '',
headerLeftContainerStyle: {
paddingLeft: 20,
},
}}
>
{storedCredentials ? (
<Stack.Screen name="Home" component={DrawerNav} options={horizontalAnimation}/>
) : (
<>
<Stack.Screen name="Login" component={Login} options={horizontalAnimation}/>
<Stack.Screen name="Signup" component={Signup} options={horizontalAnimation}/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
);
};
these is the installed package
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen
name="RootStack"
component={RootStack}
/>
</Drawer.Navigator>
customDrawerContent: component that contains items to be listed on the side bar: check this link for that part https://stackoverflow.com/a/64173773/7689878 .
To achieve the drawer remaining after navigating back keep only the RootStack(should contain all stack screens) in the Drawer Navigator.
Use this way...
function MyDrawer() {
const dimensions = useWindowDimensions();
return (
<Drawer.Navigator
screenOptions={{
drawerType: 'permanent',
}}
>
{/* Screens */}
</Drawer.Navigator>
);
}
Refer this
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.