React Navigation DrawerNavigator跟StackNavigator嵌套问题



  • const Drawer = DrawerNavigator({
            Home: {screen: HomeScreen},
            HomeDrawer: {screen: HomeDrawerScreen},
        },
        {
            initialRouteName: 'Home',
            drawerWidth: 0.8 * width,
            drawerPosition: 'left',
            contentOptions: {
                labelStyle: {
                    height: 20,
                },
            },
            contentComponent: props => <ScrollView><DrawerContent {...props} /></ScrollView>
        });
    
    const Navigation = StackNavigator({
        Drawer: {screen: Drawer},
        NewsDetail: {screen: NewsDetail},
        Comment: {screen: CommentScreen},
    }, {
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#00A2ED'
            }
        },
        headerMode: 'screen'
    });
    

    这样嵌套的话,会使抽屉也带有导航栏,就像这样
    alt text

    const Navigation = StackNavigator({
        Home: {screen: HomeScreen},
        NewsDetail: {screen: NewsDetail},
        Comment: {screen: CommentScreen},
    }, {
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#00A2ED'
            }
        },
        headerMode: 'screen'
    });
    
    
    const Drawer = DrawerNavigator({
            Home: {screen: Navigation},
            HomeDrawer: {screen: HomeDrawerScreen},
        },
        {
            initialRouteName: 'Home',
            drawerWidth: 0.8 * width,
            drawerPosition: 'left',
            contentOptions: {
                labelStyle: {
                    height: 20,
                },
            },
            contentComponent: props => <ScrollView><DrawerContent {...props} /></ScrollView>
        });
    

    这样嵌套的话,抽屉里的跳转都变成stack方式,新建一个子页面;而且在子页面中也能拖出抽屉
    所以怎么嵌套才是正确的,或者有什么办法让第一种方式的抽屉headerMode设置为none
    alt text
    alt text


登录后回复