React Native: 使用React Navigation v5创建一个开关导航器

Question

我的身份验证工作流使用了一个Switch导航器，然后我会使用 "props.navigation.navigate() "来切换到不同的屏幕或导航器。

我使用Switch导航器是因为我不希望用户能够在这些地方之间点击回去。

MainNavigator(Switch Navigator)
    - Splash (Screen) 

    - Auth (Stack Navigator)
        -Login (Screen)
        -Register (Screen)

    - Tutorial (Stack Navigator)
        -Tutorial Page 1 (Screen)
        -Tutorial Page 2 (Screen)
        -Tutorial Page 3 (Screen)

    - App (Drawer Navigator)
        -All screens for app

1-First Splash screen loads everything and check if there is an auth token inside the local storage.
2-If token found then "navigate('App')" if token not found then "navigate('Auth')"
3-If user register successfully then "navigate('Tutorial')"
4-At the end of the tutorial "navigate('App')"

似乎他们已经删除了Switch导航器，在他们的文档中，他们只展示了一个使用 "isLoggedIn "状态在两个不同导航器之间切换的例子。

有什么想法或建议吗？

Answer 1

React Navigation v5支持兼容层 暴露了一个Switch导航器。

npm install @react-navigationcompat

import { createSwitchNavigator } from "@react-navigation/compat";

const AppNavigator = createSwitchNavigator({
    "splash": { screen: SplashScreen, },
    "home": HomeNavigator,
    "login": AuthNavigator,
},
{
    initialRouteName: "splash",
});

function App() {
    return (
        <NavigationContainer>
            <AppNavigator />
        </NavigationContainer>   
    );
}

export default App;

https:/reactnavigation.orgdocscompatibility。