Завершить текущий компонент при переходе к следующему компоненту, используя React Native Navigation?

Question

Я хотел полностью закрыть текущий компонент при переходе к следующему компоненту в act-native .

Я использую реагировать-навигацию для навигации между экранами.

Сценарий: у меня два проекта в моем проекте, Login.js и Home.js. Когда пользователь входит в приложение, он сохраняет учетные данные в AsyncStorage . Каждый раз, когда пользователь заходит на экран входа в систему, он проверяет, вошел ли пользователь в систему или нет. Если пользователь вошел в систему, приложение перейдет на домашнюю страницу напрямую, на этом действии я хочу полностью закрыть экран входа в систему.

В настоящее время в моей реализации экран входа остается в стеке навигации. Когда я нажимаю обратно с домашней страницы, приложение должно быть полностью закрыто и не должно повторно запускаться с экраном входа в систему.

Вот мой код StackNavigator:

const navigationStack = createStackNavigator(
  {
    Login: {
      screen: LoginScreen
    },
    Home: {
      screen: HomeScreen
    },
  },
); 

Для навигации:

this.props.navigation.navigate('Home');

Пожалуйста, дайте мне знать, что я делаю не так с моим существующим кодом?

Answer 1

Вы можете реализовать это несколькими способами.Например, использовать действие замены или сброса в стековом навигаторе или использовать переключатель навигатора вместо стекового навигатора.

Использование сброса: (очистить стек и перейти к указанному экрану)

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
 index: 0,
 actions: [NavigationActions.navigate({  routeName: 'Home' })],
});


this.props.navigation.dispatch(resetAction);

Использование замены: (заменить текущий экран указанным экраном)

this.props.navigation.replace("Home");

Использование переключателяНавигатор: (рекомендуется)

const navigationStack = createSwitchNavigator(
  {
    Login: {
      screen: LoginScreen
    },
    Home: {
     screen: HomeScreen
    },
  },
); 

// Navigate to screen
this.props.navigation.navigate("Home");

Answer 2

Этого можно достичь, не добавляя код обратной обработки к каждому экрану, изменив метод getStateForAction конкретного маршрутизатора StackNavigator.

const navigationStack = createStackNavigator(
  {
    Login: {
      screen: LoginScreen
    },
    Home: {
      screen: HomeScreen
    },
  },
); 

Для достижения этого * 1004 можно изменить метод getStateForAction*

const defaultStackGetStateForAction =
  navigationStack.router.getStateForAction;

navigationStack.router.getStateForAction = (action, state) => {
  if(state.index === 0 && action.type === NavigationActions.BACK){
    BackHandler.exitApp();
    return null;
  }

  return defaultStackGetStateForAction(action, state);
};

state.index становится 0, только когда в стеке один экран.

Вы можете проверить с помощью этого Back Handling