如何替换 React Navigation 5 中的切换导航器？

Question

我之前使用 React Navigation 4.x 在屏幕之间导航。对于新项目，我使用 UI Kitten 主题和 React 导航 5。我有 3 个主屏幕；启动画面、登录、仪表板（底部选项卡导航）。

在这个新项目中，如果我在仪表板上单击返回，它将转到登录。再次单击后退，它将转到启动画面。不应该是这样的。在每个主屏幕上，按返回应关闭应用程序。

主要流程是当用户已经成功登录时，一个token会被保存到AsyncStorage，然后在Splash上，它会检查token是否存在。如果有token，直接进入Dashboard，无需重新登录。

我之前的项目运行使用组件 Class 并且可以正常使用 switchnavigator。由于 react navigation 5 没有开关，我不确定如何从 navigationContainer 元素处理它。我见过有人使用条件运算符，但我是否需要在 navigationContainer.js 中组合启动功能和登录功能？

App.js

import { StackNavigator } from './src/navigator/navigationContainer';
export default () => {
  const [theme, setTheme] = React.useState('light');
  const toggleTheme = () => {
    const nextTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(nextTheme);
  };
  return (
    <>
      <IconRegistry icons={EvaIconsPack} />
      <ThemeContext.Provider value={{ theme, toggleTheme }}>
        <ApplicationProvider {...eva} theme={{ ...eva[theme], ...evatheme }}>
          <StackNavigator />
        </ApplicationProvider>
      </ThemeContext.Provider>
    </>
  );
};

navigationContainer.js

export const StackNavigator = () => {
  return (
    <NavigationContainer>
      <StackApp.Navigator initialRouteName='Splash' headerMode='none'>
        <StackApp.Screen name='SplashScreen' component={SplashScreen} options={{ headerShown: false }} />
        <StackApp.Screen name='Login' component={Login} options={{ headerShown: false }} />
        <StackApp.Screen name='Dashboard' component={Dashboard} />
      </StackApp.Navigator>
    </NavigationContainer>
  )
}

Answer 1

在react navigation 5中，根据文档，现在的认证流程是这样实现的

isSignedIn ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </>
) : (
  <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </>
)

您可以在这里查看详细信息：https://reactnavigation.org/docs/auth-flow/

对于你的情况，我认为你需要在 navigationContainer.js 中结合我的启动功能和登录功能，并使用条件运算符根据需要导航屏幕

如何替换 React Navigation 5 中的切换导航器？

How to replace switch navigator in react navigation 5?

javascript

react-native

react-navigation-v5