我第一次使用React Native Navigation v2,为一个简单的应用程序建模,该应用程序底部有3个选项卡,侧边栏有一个按钮,当按下时会导航到第四个屏幕,模仿“注销”。第四个选项卡将有一个按钮,通过返回到第一个屏幕(bottomTabs堆栈的一部分),模拟“登录”。
我的代码有效,但只有一次。注销(将新屏幕推到堆栈)后,我可以重新登录(将该屏幕弹出堆栈)。然而,当我再次尝试注销时,我无法做到这一点。推送到堆栈的功能似乎不再起作用。
handleLogOutPress = () => {
Navigation.push('CenterStack', {
component: {
name: 'navigationApp.FourthTabScreen',
passProps: {
text: 'Logged Out'
},
options: {
topBar: {
visible: false
}
}
}
})
Navigation.mergeOptions('CenterStack', {
sideMenu: {
left: {
visible: false
}
}
})
}
function handleLoginPress(){
Navigation.pop('CenterStack')
}
这是我的堆栈最初的设置方式:
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
id: 'SideMenu',
name: 'navigationApp.SideMenu'
}
},
center: {
stack: {
id: 'CenterStack',
children: [
{
bottomTabs: {
children: [
{
component: {
id: 'FirstTab',
name: 'navigationApp.FirstTabScreen',
passProps: {
text: 'Home',
id: 'FirstTab'
},
options: {
bottomTab: {
icon: images[0],
text: 'Home',
iconColor: 'darkblue',
selectedIconColor: 'lightblue'
},
topBar: {
visible: false
}
}
},
},
{
component: {
id: 'SecondTab',
name: 'navigationApp.SecondTabScreen',
passProps: {
text: 'Search',
id: 'SecondTab'
},
options: {
bottomTab: {
icon: images[1],
text: 'Search',
iconColor: 'darkblue',
selectedIconColor: 'lightblue'
},
topBar: {
visible: false
}
}
},
},
{
component: {
id: 'ThirdTab',
name: 'navigationApp.ThirdTabScreen',
passProps: {
text: 'Share',
id: 'ThirdTab'
},
options: {
bottomTab: {
icon: images[2],
text: 'Share',
iconColor: 'darkblue',
selectedIconColor: 'lightblue'
},
topBar: {
visible: false
}
}
}
},
],
}
}
],
},
}
}
}
})
我可能完全误解了推送/弹出的工作原理,非常感谢您的帮助和指导。