在嵌套堆栈之间导航后将“返回”操作设置到上一个屏幕答案

【问题标题】：Set 'back' action to the previous screen after navigating between nested stacks在嵌套堆栈之间导航后将“返回”操作设置到上一个屏幕
【发布时间】：2020-07-03 04:28:08
【问题描述】：

给定两个堆栈：

Parent Stack
 - Stack A
       First
       Second
 - Stack B
       One
       Two

我需要从 First 导航到 One。 This question 和 this documentation 让我这样做：

 navigation.navigate('Stack B', {
        screen: 'One'
     }
)

现在我在One，我希望“返回”按钮让我回到上一个屏幕 (First)。但是，后退按钮会将我带到当前堆栈的顶部 (Stack B)，而不是前一个屏幕。

我可以通过在navigate 调用中传递当前屏幕和一些数据作为参数来解决此问题，然后对One 中的header 执行某些操作，例如：

// Navigate from First --> One
 navigation.navigate('Stack B', {
        screen: 'One',
        params: {
             screenToGoBackTo: {
                 name: 'First', 
                 parent: 'Stack A'
             }
        }}
);

然后通过构造向后导航路径在One中设置header后退按钮：

// Call this from the header back button. 
// Also set the header back button title from props.screenToGoBackTo.name. 

navigation.navigate(props.screenToGoBackTo.parent, { props.screenToGoBackTo.name });

但这既复杂又脆弱（屏幕不能在以后的堆栈中移动）。

在通过嵌套导航器导航后，是否有一种简单的方法来设置“返回”行为（和标题！）？

编辑：我正在使用"@react-navigation/native": "^5.6.0"

【问题讨论】：

您使用哪个版本的react-navigation？
@HagaiHarari 我正在使用 5.6。
React 导航建议不要将导航视为“组织”代码的一种方式。如果我是你，我会“问自己”我需要 2 个堆栈吗？也许我实际上只需要一个堆栈。我真的不知道你的应用程序的全部细节，但在你描述的问题中只使用一个堆栈实际上是最简单的解决方案。
我也遇到了同样的问题，并像您一样通过在 navigate() 中传递反向链接参数来修复它。这不是最佳实践，但设法修复了它在此过程中产生的错误，并且客户对结果感到满意。

标签： react-native react-navigation

【解决方案1】：

我认为就像@Andris Ladizans 所说，首先您可能需要检查您是否真的需要两个堆栈。如果是，那么其中一种解决方案可能是在多个堆栈中添加所需的屏幕（具有不同的名称）。我不确定这是否是正确（最佳）的事情，但是是的，我一直在我的一个项目（使用 react-navigation v3.x）中这样做并且它有效。因此，在您的情况下，您的堆栈看起来像这样：

Parent Stack
 - Stack A
       First
       Second
       OneA
 - Stack B
       OneB
       Two

【讨论】：