TabNavigator 上的 React Navigation 注销按钮答案

【问题标题】：React Navigation logout button on TabNavigatorTabNavigator 上的 React Navigation 注销按钮
【发布时间】：2017-09-18 17:50:11
【问题描述】：

我在StackNavigator 中有一个TabNavigator（在StackNavigator 中，我有login 视图和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'
});

【问题讨论】：

您可以使用tabBarVisible 属性来显示您不希望标签栏显示的屏幕。
更好的方法是有一个注销的路由堆栈，然后登录一个。在您的顶级应用程序中，如果loggedIn = true，则显示该路线。传递一个 screenprop，如果你想注销，它将设置 loggedIn:false，它将呈现另一个堆栈
如果我使用tabBarVisible，我可以在其他屏幕上滑动，我需要的是第一个StackNavigator中的goBack（从TabNavigator到loginView）

标签： react-native react-navigation tabnavigator

【解决方案1】：

完成！使用tabBarOnPress 属性和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'}
                    ]
               );
           },
       })
    },
});

当用户单击 tabBar 上的logout 按钮时，会显示一个 Alert 以确认操作，然后如果用户接受重定向到登录视图。

注意 (22/09/2017)： 要使用 tabBarOnPress 属性，请下载 master branch version（还不是 NPM 的版本）。

【讨论】：

几年后，这对我来说是一件幸事。