javascript - 如何在反应导航 6 中分别处理两个抽屉？

Question

我创建了两个抽屉导航器

const MenuDrawerRight = createDrawerNavigator();
const MenuDrawerLeft = createDrawerNavigator();

function RightDrawerScreens() {
  return (
    <MenuDrawerRight.Navigator
      drawerContent={props => <RightDrawerContent {...props} />}
      screenOptions={{
        headerShown: false,
        drawerType: 'back',
        drawerPosition: 'right',
      }}>
      <MenuDrawerRight.Screen name="Menu" component={Menu} />
      <MenuDrawerRight.Screen name="DashBoard" component={DashBoard} />
    </MenuDrawerRight.Navigator>
  );
}

function LeftDrawerScreens() {
  return (
    <MenuDrawerLeft.Navigator
      drawerContent={props => <LeftDrawerContent {...props} />}
      screenOptions={{headerShown: false}}>
      <MenuDrawerLeft.Screen name="Menu" component={Menu} />
      <MenuDrawerLeft.Screen name="DashBoard" component={DashBoard} />
    </MenuDrawerLeft.Navigator>
  );
}

创建了用于获取抽屉内容的单独组件。

现在如何将这两个抽屉包装在一个导航器中以及如何分别打开这些抽屉（在第一个按钮单击时打开一个抽屉，在第二个按钮单击时打开第二个抽屉）

如果您需要任何其他详细信息，请在评论部分询问。

Answer 1

我像这样把一个抽屉包在另一个抽屉里

function MenuDrawerScreen() {
  return (
    <MenuDrawerRight.Navigator
      drawerContent={props => <RightDrawerContent {...props} />}
      screenOptions={{
        headerShown: false,
        drawerType: 'back',
        drawerPosition: 'right',
      }}
      initialRouteName="MenuScreen">
      <MenuDrawerRight.Screen name="MenuScreen" component={Menu} />
      <MenuDrawerRight.Screen name="DashBoard" component={DashBoard} />
      <MenuDrawerRight.Screen name="LeftDrawer" component={LeftDrawerScreens} />
      <MenuDrawerRight.Screen name="Profile" component={Profile} />
      <MenuDrawerRight.Screen name="Logout" component={Logout} />
    </MenuDrawerRight.Navigator>
  );
}

function LeftDrawerScreens() {
  return (
    <MenuDrawerLeft.Navigator
      drawerContent={props => <LeftDrawerContent {...props} />}
      screenOptions={{headerShown: false}}>
      <MenuDrawerLeft.Screen name="Menu" component={MenuDrawerScreen} />
    </MenuDrawerLeft.Navigator>
  );
}

然后用于navigation.getParent().openDrawer()打开父抽屉和navigation.openDrawer()打开子抽屉