这个问题困扰了我一个多小时,尴尬。
问题是这个样子的,每个界面都能打开侧边:
路由代码:
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 // 返回 <-------------------------------------------------------
修改结果:
都是自己对react-navigation不熟悉,造成的结果,算是收获了一些经验,也分享给大家。
总结一句话:react-navigation多注意嵌套关系。