javascript - 带有 React Navigation 的 Drawer Navigation 屏幕上的选项卡
问题描述
我得到了一个非常复杂的应用程序布局,而且我对 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,
});
}
解决方案
推荐阅读
- javascript - Express Server 无法从 React Native 应用程序获取请求
- mysql - 在 JDBC producer 中实现 SSL 连接
- c# - DtdProcessing 设置为 DtdProcessing.Parse 的 XML 文档 C# 异常中禁止 DTD
- format - 如何在 LaTex 中使用 spreadtab 打印括号内的负数
- chapel - 赋值右侧的“for”和“forall”之间的区别
- ios - SwiftUI 如何设置下划线与文字的间距?
- git - 如何创建拉取请求或合并 PR
- python - python - 如何在python中使用cartopy绘制多边形而不是跨越日期线?
- command-line - 为什么安装 nativescript 会导致 tns 不被识别为 cmdlet 的名称?
- html - 如何使用 css 在卡片上叠加图像?