react native - Hide drawer navigation from nested individual stack screen screens - Stack Overflow

admin管理员组

文章数量:1125789

I'm trying to hide/disable the ability to use the drawer navigation menu when viewing a nested stack screen.

I have three separate screens (DataScreen, AircraftScreen, AirportScreen) in a Stack Navigator that is nested inside a Drawer Navigator. DataScreen is the main screen that will be loaded from the drawer menu. I want the ability to open the individual Aircraft and Airport screens from the Data screen, but prevent them from being able to access the drawer menu. The individual Aircraft and Airport screens should be only accessible from the Data screen in the stack and I want the user to return back to the Data screen before changing to a different drawer item.

Main App:

const App = () => {
  return (
    <AppProvider>
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name='Power Settings' component={PowerScreen} />
          <Drawer.Screen name='Takeoff Performance' component={TakeoffScreen} />
          <Drawer.Screen name='Climb Performance' component={ClimbScreen} />
          <Drawer.Screen name='Landing Performance' component={LandingScreen}/>
          <Drawer.Screen name='Input Data' component={DataStack} />
        </Drawer.Navigator>
      </NavigationContainer>
    </AppProvider>
  )
}

Stack:

export const DataStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name='Data Screen' component={DataScreen} options={{headerShown: false}}/>
      <Stack.Screen name='Aircraft Data' component={AircraftScreen} options={{drawerLockMode: 'locked-closed'}}/>
      <Stack.Screen name='Airport Data' component={AirportScreen} options={{drawerLockMode: 'locked-closed'}}/>
    </Stack.Navigator>
  );
}

const AppStack = () => {
  return (
    <AppProvider>
      <NavigationContainer>
        <DataStack/>
      </NavigationContainer>
    </AppProvider>
  )
}

So far, navigation tree works exactly how I want it to. I just need to remove the burger menu and drawer title from the Aircraft and Airport screens. I've looked all over and the only thing that I saw that looked like what I was trying to do was call the 'drawerLockMode' option, but that doesn't seem to work.

Ultimately, I just want to be able to access an individual screen from a drawer screen to adjust AppContext variables. It doesn't necessarily need to be in a Stack, but I want the user to return to the original drawer screen.

Thanks in advance!

I'm trying to hide/disable the ability to use the drawer navigation menu when viewing a nested stack screen.

I have three separate screens (DataScreen, AircraftScreen, AirportScreen) in a Stack Navigator that is nested inside a Drawer Navigator. DataScreen is the main screen that will be loaded from the drawer menu. I want the ability to open the individual Aircraft and Airport screens from the Data screen, but prevent them from being able to access the drawer menu. The individual Aircraft and Airport screens should be only accessible from the Data screen in the stack and I want the user to return back to the Data screen before changing to a different drawer item.

Main App:

const App = () => {
  return (
    <AppProvider>
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name='Power Settings' component={PowerScreen} />
          <Drawer.Screen name='Takeoff Performance' component={TakeoffScreen} />
          <Drawer.Screen name='Climb Performance' component={ClimbScreen} />
          <Drawer.Screen name='Landing Performance' component={LandingScreen}/>
          <Drawer.Screen name='Input Data' component={DataStack} />
        </Drawer.Navigator>
      </NavigationContainer>
    </AppProvider>
  )
}

Stack:

export const DataStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name='Data Screen' component={DataScreen} options={{headerShown: false}}/>
      <Stack.Screen name='Aircraft Data' component={AircraftScreen} options={{drawerLockMode: 'locked-closed'}}/>
      <Stack.Screen name='Airport Data' component={AirportScreen} options={{drawerLockMode: 'locked-closed'}}/>
    </Stack.Navigator>
  );
}

const AppStack = () => {
  return (
    <AppProvider>
      <NavigationContainer>
        <DataStack/>
      </NavigationContainer>
    </AppProvider>
  )
}

So far, navigation tree works exactly how I want it to. I just need to remove the burger menu and drawer title from the Aircraft and Airport screens. I've looked all over and the only thing that I saw that looked like what I was trying to do was call the 'drawerLockMode' option, but that doesn't seem to work.

Ultimately, I just want to be able to access an individual screen from a drawer screen to adjust AppContext variables. It doesn't necessarily need to be in a Stack, but I want the user to return to the original drawer screen.

Thanks in advance!

• react-native
• nested
• react-navigation-stack
• react-navigation-drawer

Share Improve this question Follow asked Jan 9 at 4:48 ave8torave8tor 322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can try the following solution, It might work for you.

<Stack.Screen name='Aircraft Data' component={AircraftScreen} options={{headerLeft: null}}/>
<Stack.Screen name='Airport Data' component={AirportScreen} options={{headerLeft: null}}/>

本文标签： react nativeHide drawer navigation from nested individual stack screen screensStack Overflow