在 v5 中有条件地呈现 Navigator

Question

有什么理由不在 react-navigation v5 中有条件地渲染一些 Navigator 吗？

在查看 Auth 流程的文档时，一切都是为了确保始终呈现导航器。 mount/unmount 导航员是个坏主意吗？

例如，这样可以吗：

<>
      {isLoading ? (
        <SplashScreen/>
      ) : (
        <NavigationNativeContainer>
          {userToken ? <HomeStackNavigator/> : <SignInStackNavigator/>}
        </NavigationNativeContainer>
      )}
</>

而不是这个：

<NavigationNativeContainer>
  <Stack.Navigator>
          {isLoading ? (
            <Stack.Screen name="Splash" component={SplashScreen}/>
          ) : state.userToken === null ? (
            <Stack.Screen name="SignIn" component={SignInScreen}/>
          ) : (
            <Stack.Screen name="Home" component={HomeScreen}/>
          )}
  </Stack.Navigator>
</NavigationNativeContainer>

Answer 1

这样做没问题，但保持相同的导航器会为任何状态变化设置动画，例如当用户登录时，Home 屏幕将以动画形式出现。更改导航器意味着摆脱以前导航器的状态并使用新的导航器。

您也可以将初始屏幕保留在导航器之外，只在堆栈导航器中保留 SignIn 和 Home 屏幕。取决于您希望动画的外观。

在 v5 中有条件地呈现 Navigator

Conditionally rendering Navigator in v5

react-navigation

react-navigation-stack