React Native: создание Switch Navigator с использованием React Navigation v5

Мой рабочий процесс аутентификации работал с использованием Switch Navigator, а затем я использовал «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')"

Проблема возникает, когда я пытаюсь сделать то же самое, используя React Navigation v5. Кажется, они удалили навигатор Switch, и в своей документации они показывают только один пример использования состояния «isLoggedIn» для переключения между двумя разными навигаторами.

Любые идеи или предложения? Спасибо


react-native react-navigation react-navigation-v5
person Alvaro Bataller    schedule 02.06.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

React Navigation v5 поддерживает уровень совместимости, который предоставляет Switch Navigator.

npm установить @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/

person Alex    schedule 03.06.2020
comment
Спасибо, я обнаружил, что если я просто использую навигатор стека и использую метод replace() вместо навигации(), он работает так же, поскольку не позволяет пользователю вернуться. - person Alvaro Bataller; 03.06.2020