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

我希望能够通过单击Dish Detail屏幕中的按钮组件来导航到Menu屏幕。但我也希望能够使用抽屉在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>
  );
}

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

1 个答案: