Реагируйте на встроенную навигацию между Nested StackNavigator

Question

У меня есть три навигатора ниже, я перехожу на экран DashBoard после завершения входа в систему, но у меня возникает проблема, когда я хочу выйти из экрана DashBoard, 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);

Ошибка: для ключа входа не определен маршрут, должен быть один из DashBoard

Answer 1

Я предлагаю вам использовать SwitchNavigator, как предлагается в следующей официальной документации: https://reactnavigation.org/docs/en/auth-flow.html

В вашем случае просто замените последний StackNavigator на SwitchNavigator:

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

Он автоматически сбросит стек при переключении между стеком bottomTabNavigator и стеком входа в систему, блокируя все обратные действия между ними.

Answer 2

Попробуйте это

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