简体   繁体   中英

is there any way to keep drawer opened after back from stack navigation in react native expo

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM