TL; DR:我需要这个结果(下面列出了DrawerNavigator和StackNavigator导航):
我有这种屏幕结构:
在根页面(由“•”表示)中,我需要使用DrawerNavigator完成导航,子页面(由“| _”表示)我需要使用StackNavigator进行导航。
这是我想要的行为:
• Account
|_ Create Account
|_ Login
|_ Forget Password
• Products
|_ Product detail
|_ Ingredients
• Configuration
• About
• Cart
|_ Checkout
|_ Finish Checkout
抽屉:MainDrawer with => createDrawerNavigator()
• Account
• Products
• Configuration
• About
• Cart
SwitchNavigator:
Start: StartCheck, // Screen component
App: MainDrawer, // Drawer
Welcome: WelcomeScreen, // Screen component
组件:StartCheck和WelcomeScreen是一个<Component />
StartCheck:这只是检查是否有关于AsyncStorage的数据,比如“isFirstRun”,并根据result [like this documentation]打开WelcomeScreen或MainDrawer。
屏幕:
const Screens = {
account: {
screen: AccountScreen,
path: 'account'
},
products: {
screen: ProductsScrren,
path: 'products'
},
configuration: {
screen: ConfigurationScrren,
path: 'configuration'
},
about: {
screen: AboutScrren,
path: 'about'
},
cart: {
screen: CartScrren,
path: 'cart'
},
};
Mandravir:
const MainDrawer = createDrawerNavigator({
...Screens
}, {
contentComponent: Sidebar,
initialRouteName: 'products',
});
带SwitchNavigator的App容器:
const AppContainer = createAppContainer(createSwitchNavigator(
{
StartCheck: StartCheck, // Component
App: MainDrawer, // Drawer
Welcome: WelcomeScreen, // Component
},
{
initialRouteName: 'StartCheck',
}
));
export default AppContainer;
使用此代码,Header不会出现,所以我将DrawerNavigator放在StackNavigator中:
MainStack:
const MainStack = createStackNavigator({
MainDrawer
});
我用SwitchNavigator修改了App Container:
const AppContainer = createAppContainer(createSwitchNavigator(
{
StartCheck: StartCheck, // Component
App: MainStack, // Stack
Welcome: WelcomeScreen, // Component
},
{
initialRouteName: 'StartCheck',
}
));
export default AppContainer;
但是通过这种方式,标题与侧边栏重叠,如果我使用headerMode: 'none'
,我的标题也会从其他屏幕上消失(不仅仅是容器)。
我需要这个结果(使用上面的DrawerNavigator和StackNavigator导航列表):
而且我也不知道在哪里可以放置辅助屏幕(使用StackNavigator的导航方法打开)。
对不起,这个帖子很大,我尽量详细说明,因为我一直在寻找解决方案,但我还没找到...
我将首先以文本形式描述我的想法:
在“开始”屏幕完成它的工作后,您将进入抽屉导航器,这是您的根节点
一直显示标题
或“从我的观点不推荐”
const MainDrawer = createDrawerNavigator({
Account: AccountStack,
Product: ProductsStack,
Configuration: ConfigScreen, // Pure Component
About: AboutScreen, // Pure Component
Cart: CartStack
});
// Ex stack:
const AccountStack = createStackNavigator({
CreateAcount: SignUpScreen,
Login: LoginScreen,
ForgotPassword: ForgotPasswordScreen
});
像这样定义你的createSwitchNavigator
const AppContainer = createAppContainer(createSwitchNavigator(
{
StartCheck: StartCheck, // Component
App: MainStack, // Stack
Welcome: WelcomeScreen, // Component
},
{
initialRouteName: 'StartCheck',
headerMode: 'none',
}
));