我第一次使用 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
}
}
}
},
],
}
}
],
},
}
}
}
})
我可能完全误解了 push/pop 的工作原理，感谢任何帮助和指导。