卸载所有先前安装的屏幕以在后按时退出应用程序

Question

我有一个要求，我需要在按下后退按钮时退出应用程序。基本上我尝试了BackHandler API，它可以工作但有一定的限制。所以就我而言，我觉得最好的方法是卸载所有以前安装的组件，这样当前屏幕就成为堆栈中的第一个屏幕。

我有以下屏幕：

登录
OtpVerification
名称
电子邮件
. . .还有更多

我需要的是，当我在 Name 屏幕上时，如果有人按下后退按钮，应用程序应该退出。但如果有人在 Email 屏幕上，用户应该只能返回到 Name 屏幕。

使用 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

解决方案是在导航到名称屏幕之前重置堆栈导航器。

使用 react-navigation 中的 reset 操作来执行此操作。 documentation

执行此操作的函数的一个简单示例是 -

react-navigation 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 屏幕并在导航到NameScreen 时调用reset('NameScreen')

相关答案-https://stackoverflow.com/a/43121263/3262983