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

Я использую 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, и я могу перейти к основному стеку приложений, но,

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

App.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 находится в App.js, и я не использую redux.

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


react-native react-navigation-v5
person Mayuresh Patil    schedule 22.03.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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);

}, []));

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

person Saeed Ameri    schedule 24.03.2020
comment
Большое тебе спасибо :)))) - person Oliver D; 08.09.2020
comment
если я не хочу отображать какие-либо предупреждения, просто остановите пользователя, чтобы вернуться, что мне делать в этом случае? Я пытаюсь добавить навигацию, goBack (null); вместо onBackPress alert но не работает! - person Oliver D; 08.09.2020
comment
как мы можем обработать приведенный ниже сценарий Routerflux в React Navigation 5 с самим корневым стеком для глобального использования. if (Actions.currentscene === главная || панель управления) === предупреждение о выходе из приложения, иначе Actions.pop () - person Lucifer_Latif; 03.10.2020