给我一个非常复杂的应用程序布局,我还是React Native的新手,所以我很卡住。
目前,我在App.js中有一个正在调用的路由器文件。
基本上,每个页面的布局都必须是“标签”和“抽屉”,但有些页面只能通过DrawerNavigator进行引用,因此这些页面上没有“标签”。 基本上在下面的代码中,我需要“ UserCreate”堆栈可从抽屉式导航栏中访问,但页面上也具有选项卡。
我尝试将Drawer和Tabs嵌套到另一个StackNavigator中,但这似乎不起作用。有人有什么想法吗?
export const Checkout = createStackNavigator ({
Cart: {screen: Cart},
ThankYou: {screen: ThankYou}
},{
navigationOptions: {
header: null,
}
}
);
export const MenuNav = createStackNavigator ({
Location: {screen: Location},
Menu: {screen: Menu},
CategoryDetails: {screen: CategoryDetails},
ItemDetails: {screen: ItemDetails},
},
{
navigationOptions: {
header: null,
}
},
);
export const UserCreate = createStackNavigator ({
Login: {screen: Login},
SignUp: {screen: SignUp},
Profile: {screen: Profile},
}, {
navigationOptions: {
header: null,
}
})
export const Tabs = createBottomTabNavigator({
'Home': {
screen: Home,
},
'Items': {
screen: MenuNav,
},
},
'Cart': {
screen: Checkout,
},
'Info': {
screen: Info,
},
},
{
tabBarPosition: 'bottom',
},
);
export const createRootNavigator = () => {
return createDrawerNavigator ({
Home: {
screen: Tabs
},
Profiles: {
screen: UserCreate
}
}, {
initialRouteName: 'Home',
contentComponent: SideNav,
drawerWidth: 200,
});
}