反应本机在嵌套的堆叠器之间导航

Question

我有下面的三个导航器，登录完成后，我将导航到仪表板屏幕，但是当我想从仪表板屏幕上注销时，我有一个问题， this。props.navigation.navigate（'login'）工作正常，但我想在按下签名按钮时清除堆栈。

const DashBoardStackNavigator = createStackNavigator({
      DashBoard: DashBoard,
      Second:Second,
      Third:Third
    })

const BottomTabNavigator = createBottomTabNavigator({
  DashBoardStackNavigator,
  Account,
  Report,
  Members
}})
const AppStackNavigator = createStackNavigator({
  Login: Login,
  BottomTabNavigator: BottomTabNavigator
})

export default createAppContainer(AppStackNavigator)

我尝试了以下情况，没有运气

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Login' })],
});
this.props.navigation.dispatch(resetAction);

错误：没有为键登录定义的路由，必须是之一 仪表板

Answer 1

尝试此

 const navigateAction = StackActions.reset({
            index: 0,
            key: null,
            actions: [NavigationActions.navigate({ routeName: 'Login' })]
        })
        this.props.navigation.dispatch(navigateAction)

Answer 2

我建议您使用SwitchNavigator，如以下官方文档所建议：https：//reaectnavigation.org/docs/en/en/auth-flow.html

在您的情况下，只需用switchnavigator替换最后一个stacknavigator：

const DashBoardStackNavigator = createStackNavigator({
      DashBoard: DashBoard,
      Second:Second,
      Third:Third
    })

const BottomTabNavigator = createBottomTabNavigator({
  DashBoardStackNavigator,
  Account,
  Report,
  Members
}})
const AppStackNavigator = createSwitchNavigator({
  Login: Login,
  BottomTabNavigator: BottomTabNavigator
})

export default createAppContainer(AppStackNavigator) 

然后导航到登录：

this.props.navigation.navigate('Login')

当您在底部tabnavigator堆栈和登录堆栈之间切换时，它将自动重置堆栈，阻止两者之间的所有后背动作。