Отключить переход обратно к экрану входа / регистрации в реакции навигации 5.x - PullRequest
Новая
       19

Отключить переход обратно к экрану входа / регистрации в реакции навигации 5.x

0 голосов
/ 22 марта 2020

Я использую React Navigation 5

Моя структура выглядит следующим образом: 

ROOT (STACK)
  |-- LoginStack (STACK)
  |   |-- Login (SCREEN) -> when successful navigate to "Mainapp_stack"
  |   +-- Register (SCREEN) -> after registration, navigate to "Mainapp_stack"
  |
  +-- Mainapp_stack (STACK)
      |-- Dashboard (SCREEN)
      |-- MyProfile (SCREEN)

Это нормально, проверяя usertoken, я могу перейти к основному пакету приложений, но,

В самый первый раз в процессе входа в систему / регистрации, как предотвратить переход пользователя после успешного входа в систему / регистрации в реакции-навигации 5.x

Приложение. js

    <NavigationContainer>
      <Stack.Navigator>
          {this.state.token_available ? 
            <Stack.Screen 
              name="Mainapp_stack" 
              component={Mainapp_stack}
              options={{headerShown: false}}
            />
          :
          <>
            <Stack.Screen 
              name="TeacherLogin" 
              component={TeacherLogin}
            />
            <Stack.Screen 
              name="Info" 
              component={Info}
            />
            <Stack.Screen 
              name="Mainapp_stack" 
              component={Mainapp_stack}
            />
          </>
          }
        </Stack.Navigator>
    </NavigationContainer>

Mainapp_stack. js

     <Stack.Navigator initialRouteName='Dashboard'>
        <Stack.Screen 
          name="Dashboard" 
          component={Dashboard}
          // options={{headerShown: true}}
        />
      </Stack.Navigator>

Теперь, когда я завершаю вход в систему / Регистрация, я не хочу переходить назад, если я нажимаю кнопку аппаратного возврата. Моя переменная token_available находится в приложении. js, и я не использую приставку.

Итак, как я могу ее решить?

1 Ответ

0 голосов
/ 24 марта 2020

на главном экране используйте этот код: 

import { useFocusEffect } from "@react-navigation/native";
useFocusEffect(
React.useCallback(() => {
  const onBackPress = () => {
    Alert.alert("Hold on!", "Are you sure you want to Exit?", [
      {
        text: "Cancel",
        onPress: () => null,
        style: "cancel"
      },
      { text: "YES", onPress: () => BackHandler.exitApp() }
    ]);
    return true;
  };

  BackHandler.addEventListener("hardwareBackPress", onBackPress);

  return () =>
    BackHandler.removeEventListener("hardwareBackPress", onBackPress);

}, []));

Подробнее читайте здесь: Реагируйте с навигационными документами

...