如何在不显示在抽屉中的情况下将导航添加到屏幕

Question

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

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 屏幕时，它会出现在抽屉中，这并不好，因为我需要根据单击的按钮向它传递不同的道具。

Answer 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>
  );
}

如何在不显示在抽屉中的情况下将导航添加到屏幕

How to add navigation to a screen without it showing up in the drawer

javascript

android

reactjs

react-native

react-native-navigation