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

Posted 2023-02-21

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

【英文标题】：How to enable Drawer Navigation only on specific screen (e.g. Home Screen) [react native] [react navigation]

【发布时间】：2021-10-15 21:07:49

【问题描述】：

此问题的用例是让抽屉菜单（如“设置”）仅在“主屏幕”中可用。在“主屏幕”上可能有许多按钮，这些按钮链接到没有抽屉可用的堆栈导航的其他屏幕。

主要问题是如何仅在 Stack Navigator 的特定屏幕上启用抽屉导航？ 在下面的示例中，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 屏幕之一，那么我总是有相同的标题栏（例如“标题”）

【参考方案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>
);

【讨论】：

你是对的。剩下要做的就是在这个屏幕上隐藏 Stack Header 并在 Drawer 上显示标题。