我创建了两个抽屉导航器
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()
打开儿童抽屉
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)