移动到嵌套导航器中的屏幕React Navigation v5

Question

背景

我看到了很多类似的问题，但没有人能有效回答我的问题。 这是我的导航器结构：

MainNavigator (mode="modal", headerMode="none")
 - TabNavigator
   - StackHomeNavigator
     - HomeScreen
     - DeadlineScreen
   - ...other tabs
 - StackSettings
   - ScreenSettings
   - UserInfoScreen
   - ConfigureMFA

描述

通常，如果我想导航到ConfigureMFA，我需要单击设置图标来加载

StackSettings

并将其呈现为模式。然后我单击“帐户设置”，导航到

UserInfoScreen

，然后单击“配置 MFA”，导航到

ConfigureMFA

。 目标是从主屏幕导航到

ConfigureMFA

。但我也希望，一旦进入

ConfigureMFA

屏幕，我就能够返回到

UserInfoScreen

，然后从那里返回到

ScreenSettings

。 因此基本上导航历史记录必须与“手动”导航相同。

非常重要：

HomeScreen

需要始终可见，因为

StackSettings

显示为模态（想想 ModalPresentationIOS）。

我尝试了什么

我按照文档的建议尝试使用

CommonActions.reset

。但该应用程序有一些奇怪的行为和闪烁。而且我对“重置”我的路线不感兴趣，而是导航。

我想到了什么

经过一些研究，我想出了这段代码。 它有效！但文档并没有提及将

state

作为导航参数。

navigation.navigate(AppNavigatorName.SETTINGS, {
  screen: ScreenKeys.configureMfa,
  state: {
    routes: [
      { name: ScreenKeys.settingsScreen },
      { name: ScreenKeys.userInfoScreen },
      { name: ScreenKeys.configureMfa }
    ]
  }
});

问题

你们知道为什么这段代码有效吗？还有其他最佳实践吗？

Answer 1

这可能有效，这让我感到惊讶，因为您正在覆盖导航状态。我认为不推荐。解决这个问题的方法是使用 navigation.reset

navigation.reset({
    index: 2,
    routes: [
        { name: ScreenKeys.settingsScreen },
        { name: ScreenKeys.userInfoScreen },
        { name: ScreenKeys.configureMfa }
    ],
});

这样，反应导航将正确重置并重建它自己的状态，当您从“设置”屏幕返回时，您应该返回主页