React Native 在嵌套 StackNavigator 之间导航

IT技术 reactjs react-native navigation react-navigation
2021-05-13 17:11:48

我有下面的三个导航器，登录完成后我导航到仪表板屏幕，但是当我想从仪表板屏幕注销时遇到问题，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);

错误：没有为 key Login 定义路由，必须是 DashBoard 之一

2个回答

试试这个 

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

我建议您SwitchNavigator按照以下官方文档的建议使用 a ：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堆栈和登录堆栈之间切换时，它会自动重置堆栈，阻止两者之间的所有返回操作。

其它你可能感兴趣的问题
上一篇propTypes isRequired 约束在react中误导行为 下一篇按指定顺序渲染 React 组件