注销后禁用返回导航答案

【问题标题】：disable back navigation after logout注销后禁用返回导航
【发布时间】：2018-04-20 14:04:02
【问题描述】：

我有一个使用基本 StackNavigator 的应用程序，它有一个路由是 TabNavigator，其中一个选项卡是 StackNavigator。

const profileStack = StackNavigator({
  Profile: { screen: ProfileScreen },
  Settings: { screen: SettingsScreen },      
  ...
})

const Tabs = TabNavigator({
  Trending: { screen: TrendingScreen },
  Notifications: { screen: NotificationsScreen },
  ProfileTab: { screen: profileStack }
})

const NavigatedApp = StackNavigator({
  Login: { screen: Login },
  ...,
  Tabs: { screen: Tabs },
})

我想要完成的是从 profileStack 中注销，它导航到 Login 并且不允许返回到 profileStack 中的返回操作。

我找到的大多数答案都是以一种或另一种方式使用重置操作。我发现最相关的是重置 profileStack，然后导航到主堆栈。

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [ NavigationActions.navigate({ routeName: 'Settings' })]
})

this.props.navigation.dispatch(resetAction)
this.props.navigation.navigate({ routeName: 'Login' })

但是，如果我重置 profileStack，然后导航到主堆栈（登录），后退操作仍会将我带回 profileStack，但我需要后退操作来退出应用程序，而不是让用户回到重置状态profileStack。

【问题讨论】：

你应该使用SwitchNavigator。

标签： react-native react-navigation

【解决方案1】：

您可能正在寻找this。

在可能的LoginScreen 组件中，您将需要类似地调整两个生命周期挂钩：

import { BackHandler } from 'react-native'

class LoginScreen extends React.Component {
  // ...

  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', function() {
      BackHandler.exitApp()
      return true
    }.bind(this))
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress')
  }

  // ...
}

【讨论】：