我有一个 TabNavigator
里面StackNavigator
(在 StackNavigator
我有 login
View 和 TabNavigator
,其中包含其他屏幕)。
问题是我必须制作类似' Logout
的东西' 选项卡上的按钮只是重定向到 Login
看法。
如果我尝试简单地重定向到 LoginView
, TabBar
仍然出现在屏幕底部,这不是我想要的。
有什么办法可以点击TabBar
按钮并返回初始StackNavigator
? (比如 OnPress
属性或类似的东西)。
这是我的路由器
const tab_bar = TabNavigator({
Home: {
screen: HomeScreen
},
Logout: {
screen: LoginView // this just show the view but the tabBar still appearing
},
});
const Login = StackNavigator({
login: {
screen: LoginView,
},
List: {
screen: tab_bar
,navigationOptions: {header:null}
}
},
{
initialRouteName: 'login'
});
最佳答案
完毕!使用 tabBarOnPress属性(property)和Navigation Actions .
const tab_bar = TabNavigator({ // This tabNavigator is inside a stackNavigator, wich contains the 'login' view
Home: {
screen: Home
},
Logout: {
screen: Logout // Empty screen, useless in this specific case
,navigationOptions: ({navigation}) => ({
tabBarOnPress: (scene, jumpToIndex) => {
return Alert.alert( // Shows up the alert without redirecting anywhere
'Confirmation required'
,'Do you really want to logout?'
,[
{text: 'Accept', onPress: () => { navigation.dispatch(NavigationActions.navigate({ routeName: 'login' }))}},
{text: 'Cancel'}
]
);
},
})
},
});
当用户点击
logout
tabBar 上的按钮显示警报以确认操作,然后如果用户接受重定向到登录 View 。注意 (22/09/2017):要使用 tabBarOnPress 属性,请下载 master branch version (还不是 NPM 的版本)。
关于react-native - TabNavigator 上的 React Navigation 注销按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46285399/