這個問題困擾了我一個多小時,尷尬。
問題是這個樣子的倘潜,每個界面都能打開側(cè)邊:
問題.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往声。
我剛開始沒有反應(yīng)過來擂找,后來找不到解決方案,就想了會浩销,才想到這句話中的全局二字贯涎,然后就想著把它變成一個局部的不就行了。
解決如下:
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 // 返回 <-------------------------------------------------------
修改結(jié)果:
結(jié)果.gif
都是自己對react-navigation不熟悉慢洋,造成的結(jié)果塘雳,算是收獲了一些經(jīng)驗,也分享給大家普筹。
總結(jié)一句話:react-navigation多注意嵌套關(guān)系败明。