react-navigation 嵌套 出现每个页面都能打开侧边

这个问题困扰了我一个多小时,尴尬。

问题是这个样子的,每个界面都能打开侧边:

问题.gif

路由代码:

const NavHome = StackNavigator({
    welcome: {
        screen: WelcomeScreen,
        navigationOptions: {
            header: null
        }

    },
    home: {
        screen: HomeScreen,
        navigationOptions: {
            header: null
        }
    },
    login: {
        screen: LoginScreen,
        navigationOptions: {
            header: null
        }
    },
    system_datail: {
        screen: SystemDetailScreen,
        navigationOptions: {
            header: null
        }
    },
    article_detail: {
        screen: ArticleDetailSceen,
        navigationOptions: {
            header: null
        }
    },
    search: {
        screen: SearchScreen,
        navigationOptions: {
            header: null
        }
    },
    search_result: {
        screen: SearchResultScreen,
        navigationOptions: {
            header: null
        }
    },
    theme: {
        screen: ThemeScreen,
        navigationOptions: {
            header: null
        }
    },
    about: {
        screen: AboutScreen,
        navigationOptions: {
            header: null
        }
    }
},{
    initialRouteName: 'welcome',
    navigationOptions: ({navigation, screenProps}) => ({
        gesturesEnabled: true,
    }),
}
)


const RootNavigator = DrawerNavigator(
    {
        home: {
            screen: NavHome,
        }
       
    },
    {
        drawerWidth: 260,
        drawerPosition: 'left',
        contentComponent: UserDrawer,
        contentOptions:{
            initialRouteName:'home'
        }
    }
)

export default RootNavigator 

百度搜索了下,没有搜索到解决方案,倒是搜到了和我一样的问题,估计是我的搜索姿势不对。
不过在一个问题的评论当中,有一个评论大概意思是说:DrawerNavigator嵌套StackNavigator是一个全局的drawer
我刚开始没有反应过来,后来找不到解决方案,就想了会,才想到这句话中的全局二字,然后就想着把它变成一个局部的不就行了。

解决如下:


const homeDrawer = DrawerNavigator(
    {
        home: {
            screen: HomeScreen, // 重点这里<--------------------------------------------------
        }
       
    },
    {
        drawerWidth: 260,
        drawerPosition: 'left',
        contentComponent: UserDrawer,
        contentOptions:{
            initialRouteName:'home'
        }
    }
)


const NavHome = StackNavigator({
    welcome: {
        screen: WelcomeScreen,
        navigationOptions: {
            header: null
        }

    },
    home: {
        screen: homeDrawer, // 还有这里 <-----------------------------------------------------------
        navigationOptions: {
            header: null
        }
    },
    login: {
        screen: LoginScreen,
        navigationOptions: {
            header: null
        }
    },
    system_datail: {
        screen: SystemDetailScreen,
        navigationOptions: {
            header: null
        }
    },
    article_detail: {
        screen: ArticleDetailSceen,
        navigationOptions: {
            header: null
        }
    },
    search: {
        screen: SearchScreen,
        navigationOptions: {
            header: null
        }
    },
    search_result: {
        screen: SearchResultScreen,
        navigationOptions: {
            header: null
        }
    },
    theme: {
        screen: ThemeScreen,
        navigationOptions: {
            header: null
        }
    },
    about: {
        screen: AboutScreen,
        navigationOptions: {
            header: null
        }
    }
},{
    initialRouteName: 'welcome',
    navigationOptions: ({navigation, screenProps}) => ({
        gesturesEnabled: true,
    }),
}
)


export default NavHome  // 返回  <-------------------------------------------------------

修改结果:

结果.gif

都是自己对react-navigation不熟悉,造成的结果,算是收获了一些经验,也分享给大家。
总结一句话:react-navigation多注意嵌套关系

你可能感兴趣的:(react-navigation 嵌套 出现每个页面都能打开侧边)