如何在特定屏幕隐藏Drawer Navigator的汉堡图标

我有一个嵌套了Stack Screen的Drawer Navigator，代码如下：

<PaperProvider theme={theme}>
  <NavigationContainer>
    <Drawer.Navigator
      screenOptions={({ }) => ({
        // headerShown: false,
        // title:"",
        headerTransparent: true,
        headerTitle: "",
      })}>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Groups" component={GroupsScreen} />
      <Drawer.Screen name="Rides" component={RidesScreen} />
    </Drawer.Navigator>
  </NavigationContainer>
</PaperProvider>

当前问题是：Drawer Navigator头部的汉堡图标会在HomeScreen及其所有内部子屏幕上显示。我希望仅在第一个屏幕HomeHelper上显示该图标，导航到其他屏幕（比如ListOfRides）时隐藏它。

HomeScreen的代码如下：

<Stack.Navigator
  screenOptions={() => ({
    headerTitle: "",
    headerTransparent: true,
    //headerShown:false
  })}>
  {rideBooked == true ? (
    <Stack.Screen name="Screen1" component={Screen} 
    options={{
      headerRight: () => (
        <Button
          onPress={() => alert('This is a button!')}
        >Cancel</Button>
      ),
    }}/>

  ) : (
    <>
    {/* headertransparent for these */}
      <Stack.Screen name="HomeHelper" component={HomeHelperScreen} />
      <Stack.Screen name="ListOfRides" component={ListOfRidesScreen} />
    </>
  )}
</Stack.Navigator>

有两种常用方法可以实现需求：

方法一：通过Drawer Navigator动态控制汉堡图标显示 #

利用Drawer Navigator的screenOptions，根据当前嵌套Stack的路由名称判断是否显示汉堡图标：

<Drawer.Navigator
  screenOptions={({ navigation, route }) => {
    // 获取当前Home Stack里的活跃路由名称
    const activeNestedRoute = route.state?.routes[route.state.index]?.name;
    return {
      headerTransparent: true,
      headerTitle: "",
      // 仅在HomeHelper页面显示汉堡按钮
      headerLeft: activeNestedRoute === "HomeHelper" ? () => (
        <IconButton
          icon="menu"
          onPress={() => navigation.openDrawer()}
          color="#fff" // 根据主题调整颜色
        />
      ) : () => null,
    };
  }}
>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Groups" component={GroupsScreen} />
  <Drawer.Screen name="Rides" component={RidesScreen} />
</Drawer.Navigator>

方法二：隐藏Drawer默认Header，在Stack内自定义Header #

这种方式更灵活，完全掌控每个子页面的Header：

1. 先隐藏Drawer Navigator的默认Header：

<Drawer.Navigator
  screenOptions={() => ({
    headerShown: false, // 关闭Drawer的全局Header
  })}>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Groups" component={GroupsScreen} />
  <Drawer.Screen name="Rides" component={RidesScreen} />
</Drawer.Navigator>

2. 在HomeScreen的Stack中，给需要显示汉堡图标的页面添加自定义Header，其他页面隐藏左侧按钮：

<Stack.Navigator
  screenOptions={() => ({
    headerTitle: "",
    headerTransparent: true,
  })}>
  {rideBooked == true ? (
    <Stack.Screen name="Screen1" component={Screen} 
    options={{
      headerRight: () => (
        <Button
          onPress={() => alert('This is a button!')}
        >Cancel</Button>
      ),
    }}/>

  ) : (
    <>
      <Stack.Screen 
        name="HomeHelper" 
        component={HomeHelperScreen}
        options={({ navigation }) => ({
          headerLeft: () => (
            <IconButton
              icon="menu"
              onPress={() => navigation.openDrawer()}
              color="#fff"
            />
          ),
        })}
      />
      <Stack.Screen 
        name="ListOfRides" 
        component={ListOfRidesScreen}
        options={{
          headerLeft: () => null, // 隐藏左侧按钮
        }}
      />
    </>
  )}
</Stack.Navigator>

两种方法都能实现需求，方法一更简洁，方法二适合需要对不同页面Header做更多自定义的场景。

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