在嵌套StackNavigator之间进行本机导航

时间:2019-02-15 07:52:19

标签: reactjs react-native navigation react-navigation

我下面有三个导航器,登录完成后我正在导航到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);
  

错误:没有为键登录定义任何路由,必须是以下之一   仪表板

2 个答案:

答案 0 :(得分:3)

尝试

cp

答案 1 :(得分:1)

我建议您按照以下官方文档的建议使用SwitchNavigatorhttps://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堆栈和登录堆栈之间切换时,它将自动重置堆栈,从而阻止两者之间的所有后退操作。