如何仅在特定屏幕（例如主屏幕）上启用抽屉导航 [react native] [react navigation]

Question

此问题的用例是抽屉菜单（如“设置”）仅在“主屏幕”中可用。在“主屏幕”中可能有许多按钮 link 到抽屉不可用的堆栈导航的其他屏幕。

主要问题是如何仅在 Stack Navigator 的特定屏幕上启用 Drawer Navigation？ 在下面的示例中，Drawer 在 Stack 的所有页面上都可用。我试过 gestureEnabled 但没有用：

  const StackHome = () => (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Example1" component={Example1} />
      <Stack.Screen name="Example2" component={Example2} />
    </Stack.Navigator>
  );
  <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={StackHome} />
      <Drawer.Screen name="Settings" component={Settings} />
  </Drawer.Navigator>

另一方面，如果我尝试将 Drawer 作为 Stack 屏幕之一，那么我总是有相同的 Header 栏（示例“Header”）

Answer 1

将抽屉导航器放在主屏幕内：

const DrawerHome = () => (
  <Drawer.Navigator screenOptions={{ headerShown: true }}>
    <Drawer.Screen name="Home" component={Home} />
    <Drawer.Screen name="Settings" component={Settings} />
  </Drawer.Navigator>
);

const StackHome = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="DrawerHome"
      component={DrawerHome}
      options={{ headerShown: false }}
    />
    <Stack.Screen name="Example1" component={Example1} />
    <Stack.Screen name="Example2" component={Example2} />
  </Stack.Navigator>
);