清除被导航到 React-Navigation 的堆栈 [英] Clear stack being navigated to React-Navigation

问题描述

我的 react-native 应用程序由一个 DrawerNavigator 组成，该 DrawerNavigator 包含多个 StackNavigator.我的结构的简化示例如下所示

My react-native application consists of a DrawerNavigator that contains several StackNavigators. A simplified example of my structure looks like this

- Drawer
  - Stack 1
    - Screen 1
    - Screen 2
  - Stack 2
    - Screen 1
    - Screen 2

我的问题如下:我在堆栈 1 的屏幕 1 上.我使用抽屉导航到堆栈 2 的屏幕 1.从 Stack 2 的 Screen 1 中，我按下按钮导航到 Stack 2 的 Screen 2.然后我使用 Drawer 导航回 Stack 1.我再次使用抽屉返回堆栈 2.我现在在堆栈 2 的屏幕 1 上，但标题中有一个后退按钮，看起来我当前的屏幕刚刚放置在旧堆栈的顶部.按下它会将我导航到 Stack 2 的 Screen 2，再次按下它会将我导航到 Stack 2 的 Screen 1.

My problem is the following: I am on Screen 1 of Stack 1. I navigate to screen 1 of Stack 2 using the Drawer. From Screen 1 of Stack 2 I navigate to Screen 2 of Stack 2 on the press of a button. I then navigate back to Stack 1 using the Drawer. I again return to Stack 2 using the Drawer. I am now on Screen 1 of Stack 2, but there is a back button in the header, and it appears that my current screen has just been placed on top of the old stack. Pressing it navigates me to Screen 2 of Stack 2, and pressing it again navigates me to Screen 1 of Stack 2.

当导航回抽屉中的堆栈时，我希望它返回到带有新堆栈的堆栈中的第一项 - 即没有后退按钮.

When navigating back to a stack in the drawer I would expect it to return me to the first item in the stack with a fresh stack - that is, with no back button.

这种行为是预期的吗?如果是这样，当我从抽屉导航到堆栈时，我可以做些什么来清除"堆栈?

Is this behavior expected? If so, is there anything I can do to 'clear' the stack when I navigate to it from the drawer?

这是一个 Expo 示例，使用最少的代码来重现我的结构和问题:https://小吃.expo.io/rk2HV-HNf

Here is an Expo example with bare minimum code to reproduce my structure and the issue: https://snack.expo.io/rk2HV-HNf

推荐答案

在 react-navigation 中，如果你想返回，而不是创建一个新的屏幕，你需要使用 this.props.navigation.goBack().如果您使用 navigate 方法，它会创建一个新屏幕，从而创建后退按钮.

In react-navigation, if you want to go back, instead of creating a new screen, you need to use this.props.navigation.goBack(). If you use navigate method, it creates a new screen, hence back button.

不过，还有另外一种方式.在您的情况下，您不需要它，但是您也可以使用 NavigationActions 从头开始​​定义堆栈并将其调度以重置导航堆栈.

However, there is also another way. In your case you do not need this, however you can also define a stack from scratch using NavigationActions and dispatch it to reset navigation stack.

这篇关于清除被导航到 React-Navigation 的堆栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！