意外地回到嵌套导航的反应导航

Question

我面临React-Native 0.66.4和React-Navigation 4.4.4的导航问题。 我有一个看起来像这样的标签导航设置。

• 标签导航

  • 主页

    • 屏幕a（intial）
    • 屏幕B

  • 交易

    • 屏幕1（Intial）
    • 屏幕2
    • 屏幕3

屏幕1引导到2或3

我试图从Home Tab（屏幕A）到交易选项卡（屏幕2和屏幕3）使用单独的按钮，我能够通过执行navigation.navigate（'trade'，{屏幕：'screen2'，params：{...}}） and navigation.navigate（'trade'，{屏幕：'screet 3' ，params：{...}}）

我现在面临的问题是

1. 当我导航到Trade（Screen2）并使用返回按钮时，它会导航到Home（ScreenA）

2. 导航到交易（screen3），然后使用“返回”按钮go 这种方式交易（screen3）=＆gt;贸易（屏幕2）=＆gt;家（Screena），和 像这样的交易（screen2）=＆gt;贸易（屏幕3）=＆gt; Home（Screena）如果 我首先访问了屏幕3，要实现此目标，我必须点击返回 两次。

3. 最后，如果我在单击之前访问了屏幕2或3 “交易”选项卡，它显示屏幕而不是屏幕1（初始）。 这不是我正在寻找的行为。

我该怎么做，以使每当我从交易（屏幕2或屏幕3）返回时，它会导航到交易（屏幕1），并且在访问这些屏幕中的任何一个（2和3）之后，也单击“交易”选项卡（2和3）导航到屏幕1（初始）？

我怎么能

Answer 1

当您使用嵌套堆栈从一个选项卡导航到另一个选项卡时，您将需要传递初始参数：false参数，以防止首页被视为初始参数。

navigation.navigate('TradeStack', { screen: 'Screen2', initial: false, params: { param_1: 'foo' } })

然后，当您在Screen2上按GOBACK（）时 - 它将上堆栈到屏幕1（初始）

Answer 2

访问了这两个屏幕之后，还单击“交易”选项卡
（2和3）导航到屏幕1（初始）？

为了实现这一目标，我认为您可以使用官方文档中指定的 InitialRoutename 支柱（检查 stacknavigatorConfig ）。请尝试一下，让我知道情况如何。

https://reaectnavigation.org/docs/4.x/stack-navigator

我该怎么做，以便每当我从任何一项交易中回去时（屏幕）
2或屏幕3），它导航到交易（Screen1）

您可以为这些屏幕进行测试吗？创建一个按钮， OnPress 做

navigation.goBack()

，请让我知道一切正常。我没有我的开发环境，所以我只是从参考中写这篇文章。

Answer 3

我设法使用'avaigation-state' https://reactnavigation.org/docs/navigation. -State/

“状态”中给定项目的任何列表，您只需要粘贴到当前的前一个，然后重定向到它。

const handleGoBack = async () => {
    const routesState = navigation.getState().routes
    const registerRoutesState = routesState[routesState.length - 1]

    const nestedRegisterRoutesState = registerRoutesState.state?.routes || []
    const backNestedRegisterRoutesState = nestedRegisterRoutesState[nestedRegisterRoutesState.length - 2]

    // para voltar à rota pai
    if (registerRoutesState.state?.routes.length === 1) {
        if (navigation.canGoBack()) {
            navigation.goBack()
        }

        return
    }

    navigation.navigate({ key: backNestedRegisterRoutesState.key! })
}