Question

我使用Switch Navigator进行身份验证工作流程，然后使用“ props.navigation.navigate（）”切换到其他屏幕或导航器。

我正在使用“开关”导航器，因为我不希望用户能够在这些位置之间单击回来。

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')"

当我尝试使用React Navigation v5做同样的事情时，问题就来了。看来他们已删除了Switch导航器，并且在其文档中仅显示了一个使用 “ isLoggedIn”状态可在2个不同的导航器之间切换。

有什么想法或建议吗？谢谢

Answer 1

React Navigation v5 supports a compatibility layer，其中显示了Switch Navigator。

npm install @ react-navigation / compat

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.org/docs/compatibility/

React Native：使用React Navigation v5创建一个Switch Navigator

1 个答案: