愿所有的美好和期待都能如约而至

如何在Reaction导航6中分别处理两个抽屉?

发布时间:  来源:互联网  作者:匿名  标签:error how to handle two drawers separately in react navigation 6? exception IT资讯  热度:37.5℃

本文介绍了如何在Reaction导航6中分别处理两个抽屉?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经创建了两个抽屉导航器

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

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

现在如何将这两个抽屉包装在一个导航器中,以及如何分别打开这两个抽屉(单击第一个按钮打开一个抽屉,单击第二个按钮打开第二个抽屉)

如果需要任何其他详细信息,请在评论区询问。

推荐答案

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

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()打开子抽屉

这篇关于如何在Reaction导航6中分别处理两个抽屉?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP