Question

我有一个使用基础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然后导航到主堆栈（Login），后退操作仍然会将我带回profileStack，但是我需要后退操作才能退出应用程序，而不是让用户重新进入重置状态profileStack。

Answer 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')
  }

  // ...
}

注销后禁用后退导航

1 个答案: