从内部导航器导航到外部导航器生成额外的屏幕幻灯片答案

【问题标题】：Navigate from inner navigator to outer navigator generate extra screen slide从内部导航器导航到外部导航器生成额外的屏幕幻灯片
【发布时间】：2022-08-24 16:56:46
【问题描述】：

在我的反应原生应用程序中注销期间出现问题。我设置了许多导航器来处理多个导航流，但是当我尝试从应用程序中注销时，登录屏幕会出现两次。

我尝试在下面解释我如何组织我的导航器：

如果用户登录，我创建了一个 TabNavigator 来处理应用程序的主导航，否则我将显示处理登录、注册和密码忘记屏幕的 LoginNavigator。我使用存储在 redux 上的状态来处理登录状态 (isLoggedIn)。

<NavigationContainer>
  {isLoggedIn ? <TabNavigator/> : <LoginNavigator/>}
</NavigationContainer>

在TabNavigator 中，我设置了其他导航器来处理每个部分中的页面流，如下例所示：

TabNavigator
  Screen X
  Navigator1
     Screen A
     Screen B
  Navigator2
     Screen C
     Screen D
  Screen Y

进入Screen C 我想从应用程序中注销，所以我调用了一个将isLoggedIn 状态设置为的操作错误的. 发生的情况是登录屏幕（LoginNavigator 的初始屏幕）出现，但它突然滑落并出现另一个登录屏幕。

它只发生在嵌套屏幕上，而不是如果我尝试从Screen X 或Screen Y 注销它工作得很好。

有人遇到这个问题吗？我该如何解决这种行为？

标签： react-native react-redux react-navigation

【解决方案1】：

我解决了这种行为！我没有使用基于 redux 状态的三元操作显示正确的导航器，而是使用 WaitingScreen 将 TabNavigator 和 LoginNavigator 包装在自定义堆栈导航器中。我将WaitingScreen 设置为初始路由，并移动了关于MainNavigator 和LoginNavigator 之间的哪条路由必须显示在WaitingScreen 中的逻辑，在useLayouEffect 和isLoggedIn 中作为依赖项。

<NavigationContainer>
      <Stack.Navigator
        initialRouteName={NavConst.LOADING}
        screenOptions={{
          headerShown: false,
          contentStyle: {
            backgroundColor: Color.primary600,
          },
          animation: "none",
        }}
      >
        <Stack.Screen name={NavConst.LOADING} component={WaitingScreen} />
        <Stack.Screen name={NavConst.LOGIN_NAV} component={LoginNavigator} />
        <Stack.Screen name={NavConst.MAIN_NAV} component={MainNavigator} />
      </Stack.Navigator>
</NavigationContainer>

在 WaitingScreen 内部：

  useLayoutEffect(() => {
    isLoggedIn
      ? navigation.navigate(NavConst.MAIN_NAV);
      : navigation.navigate(NavConst.LOGIN_NAV);
  }, [isLoggedIn]);

【讨论】：