如何将导航添加到屏幕而不显示在抽屉中答案

【问题标题】：How to add navigation to a screen without it showing up in the drawer如何将导航添加到屏幕而不显示在抽屉中
【发布时间】：2020-07-27 17:10:52
【问题描述】：

我有这段代码，我在其中设置了一个抽屉导航器

const Drawer = createDrawerNavigator();

const MyDrawer = () => {
  return(
    <Drawer.Navigator initialRouteName="Test">
      <Drawer.Screen name="Test" component={Test}/>
      <Drawer.Screen name="Menu" component={Menu}/>
      <Drawer.Screen name="Dish Detail" component={DishDetail} />
    </Drawer.Navigator>
  );
}

我希望能够通过单击Menu 屏幕中的按钮组件导航到Dish Detail 屏幕。但我也希望能够使用抽屉在Test 和Menu 屏幕之间导航。因此，当我向Dish Detail 屏幕添加导航时，它会显示在抽屉中，这并不好，因为我需要根据单击的按钮向它传递不同的道具。

【问题讨论】：

如果您不打算从测试屏幕导航到 Dish Detail，最好使用 Stack Navigator 获取 Menu 和 Dish details 并将该堆栈添加到抽屉中，因为无法将抽屉中的项目隐藏为现在

标签： javascript android reactjs react-native react-native-navigation

【解决方案1】：

docs 也有类似的情况，当你想要一个没有显示在底部标签栏中的屏幕时。

解决方案是创建一个堆栈导航器，其中MyDrawer 是一个屏幕：

const Drawer = createDrawerNavigator();

const MyDrawer = () => {
  return(
    <Drawer.Navigator initialRouteName="Test">
      <Drawer.Screen name="Test" component={Test}/>
      <Drawer.Screen name="Menu" component={Menu}/>
    </Drawer.Navigator>
  );
}

const AppStack = createStackNavigator();

const MyStack = () => {
  return(
    <AppStack.Navigator initialRouteName="Drawer">
      <AppStack.Screen name="Drawer" component={MyDrawer}/>
      <AppStack.Screen name="Dish Detail" component={DishDetail} />
    </AppStack.Navigator>
  );
}

【讨论】：