Размонтируйте все ранее смонтированные экраны, чтобы выйти из приложения при повторном нажатии.

Question

У меня есть требование, при котором мне нужно выходить из приложения при нажатии кнопки «Назад». В основном я пытался с BackHandler API, который работал, но с некоторыми ограничениями. Поэтому в моем случае я считаю, что лучше всего размонтировать все ранее смонтированные компоненты, чтобы текущий экран стал первым экраном в стеке.

У меня есть следующие экраны:

Логин
OtpVerification
Имя
Электронная почта
. , , и еще

Что мне нужно, так это то, что когда я нахожусь на экране Имя , если кто-то нажимает кнопку «Назад», приложение должно выйти. Но если кто-то находится на экране Email , пользователь должен иметь возможность go вернуться на экран Имя .

Фрагменты с использованием BackHandler

constructor(props) {
    super(props);
    .
    .
    BackHandler.addEventListener("hardwareBackPress", this._handleBackPress);
}
.
.
.
.
_handleBackPress = () => {
    BackHandler.exitApp();
};
.
.
.
.
_onPress = () => {
    BackHandler.removeEventListener("hardwareBackPress", this._handleBackPress);
    this.props.navigation.navigate("Email", { name: this.state.name });
};

Answer 1

Решением этой проблемы было бы сбросить навигатор стека перед переходом к экрану имени.

Для этого используйте действие reset в реагирующей навигации. документация

Быстрый пример функции, которая делает это: -

реакции-навигация 5 - используйте CommonActions

    import { CommonActions } from '@react-navigation/native';


    reset = (routeName) => {
        return navigation.dispatch(CommonActions.reset(
                     {
                        index: 0,
                        routes: [{ name: routeName }]
                     }
                  ));
      }

реагировать на навигацию v4.x

reset = (routeName) => {
    return this.props
               .navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [
                      NavigationActions.navigate({ routeName })
                    ]
                  }));
  }

поставить это на экране OtpVerification и вызвать reset('NameScreen') при переходе к NameScreen

связанный ответ - { ссылка }