如何在嵌套Stack的子屏幕中隐藏Drawer导航菜单？

我在Drawer Navigator中嵌套了一个Stack Navigator，该Stack包含DataScreen、AircraftScreen、AirportScreen三个屏幕。DataScreen是抽屉菜单可访问的主屏幕，需要从DataScreen能打开AircraftScreen和AirportScreen，但这两个屏幕要完全禁用抽屉菜单（隐藏汉堡按钮、锁定抽屉无法打开），用户必须返回DataScreen才能切换其他抽屉项。目前用drawerLockMode: 'locked-closed'没生效，核心需求是从抽屉进入独立屏幕调整AppContext变量，确保能返回原抽屉屏幕。

解决方案 #

1. 正确配置Stack屏幕的导航选项 #

抽屉导航的控制权限在父级Drawer Navigator，直接在Stack屏幕设置drawerLockMode不会生效，需要结合导航实例动态配置：

修改DataStack代码，为AircraftScreen和AirportScreen自定义头部按钮，并通过导航父级锁定抽屉：

export const DataStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name='Data Screen' 
        component={DataScreen} 
        options={{headerShown: false}}
      />
      <Stack.Screen 
        name='Aircraft Data' 
        component={AircraftScreen} 
        options={({ navigation }) => ({
          // 替换汉堡按钮为返回键
          headerLeft: () => (
            <TouchableOpacity onPress={() => navigation.goBack()}>
              <Text style={{marginLeft: 16}}>返回</Text>
            </TouchableOpacity>
          ),
          // 锁定抽屉，禁止滑动或点击打开
          drawerLockMode: 'locked-closed',
          // 设置当前屏幕的标题，避免显示抽屉的"Input Data"标题
          title: 'Aircraft Data'
        })}
      />
      <Stack.Screen 
        name='Airport Data' 
        component={AirportScreen} 
        options={({ navigation }) => ({
          headerLeft: () => (
            <TouchableOpacity onPress={() => navigation.goBack()}>
              <Text style={{marginLeft: 16}}>返回</Text>
            </TouchableOpacity>
          ),
          drawerLockMode: 'locked-closed',
          title: 'Airport Data'
        })}
      />
    </Stack.Navigator>
  );
}

2. 父级Drawer Navigator全局控制 #

也可以在Drawer Navigator的全局配置中，根据当前路由动态锁定抽屉：

const App = () => {
  return (
    <AppProvider>
      <NavigationContainer>
        <Drawer.Navigator
          screenOptions={({ route }) => {
            // 检测当前是否处于受限的Stack子屏幕
            const isRestricted = route.state?.routes.some(
              r => r.name === 'Aircraft Data' || r.name === 'Airport Data'
            );
            return {
              // 锁定/解锁抽屉
              drawerLockMode: isRestricted ? 'locked-closed' : 'unlocked',
              // 隐藏汉堡按钮（如果是受限屏幕）
              headerLeft: isRestricted ? () => null : undefined
            };
          }}
        >
          <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>
  )
}

3. 替代方案：使用Modal实现隔离 #

如果不需要Stack的导航历史，用Modal打开AircraftScreen和AirportScreen是更简单的方式，天然和抽屉导航隔离：

// DataScreen.js
import { Modal, Button, View, TouchableOpacity, Text } from 'react-native';
import { useState } from 'react';

const DataScreen = () => {
  const [showAircraft, setShowAircraft] = useState(false);
  const [showAirport, setShowAirport] = useState(false);

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Button title="打开飞机数据" onPress={() => setShowAircraft(true)} />
      <Button title="打开机场数据" onPress={() => setShowAirport(true)} style={{marginTop: 16}} />

      <Modal visible={showAircraft} animationType="slide">
        <View style={{flex: 1, paddingTop: 40}}>
          <TouchableOpacity onPress={() => setShowAircraft(false)} style={{paddingLeft: 16}}>
            <Text>返回</Text>
          </TouchableOpacity>
          <AircraftScreen />
        </View>
      </Modal>

      <Modal visible={showAirport} animationType="slide">
        <View style={{flex: 1, paddingTop: 40}}>
          <TouchableOpacity onPress={() => setShowAirport(false)} style={{paddingLeft: 16}}>
            <Text>返回</Text>
          </TouchableOpacity>
          <AirportScreen />
        </View>
      </Modal>
    </View>
  );
}

这种方式下，用户关闭Modal直接回到DataScreen，抽屉菜单完全无法访问，完美满足需求。

内容的提问来源于stack exchange，提问作者ave8tor