React Native Android BackHandler 退出应用程序答案

【问题标题】：React Native Android BackHandler Exit AppReact Native Android BackHandler 退出应用程序
【发布时间】：2018-09-10 10:35:21
【问题描述】：

我想实现 BackHandler 以在一个组件上运行，并在我的应用程序的其余部分保持硬件后退按钮“转到上一个屏幕”的默认行为，我想要一个名为“cases.js”的组件如果用户在此组件在屏幕中时单击后退按钮退出应用程序，如果用户在任何其他组件上时导航返回，则案例屏幕覆盖登录屏幕。

这是我在“cases.js”文件中尝试过的：

  componentDidMount = async () => {

    await BackHandler.addEventListener('hardwareBackPress', this._closeApp())

  }

  componentWillUnmount = async () => {

    await BackHandler.removeEventListener('hardwareBackPress', this_closeApp());

  }

  _closeApp = async () => {

    BackHandler.exitApp();

  }

但它会立即关闭应用程序。

我怎样才能做到这一点？

【问题讨论】：

启动应用程序时是否会挂载此屏幕？还是还没入栈？
我在显示初始屏幕时检查用户是否有令牌并将他重定向到此组件或登录组件
所以当您登录时，例如，它会关闭应用程序并返回到上一个屏幕，对吧？
不，当我登录时我不想返回登录屏幕我想退出应用程序.. 否则我希望后退按钮重定向到上一页
你是如何安装屏幕的？只需根据您使用的导航库文档进行替换/重置，以便设置根屏幕。比您不需要对后处理程序进行任何更改

标签： android reactjs react-native react-native-android

【解决方案1】：

由于我还不能添加 cmets - 添加到 Mahdi Bashirpour 的答案中，这是正确的：

componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}

handleBackButton = () => {
    //add your code

    return true;
};

此代码将起作用，但正如您所注意到的，一旦您在登录屏幕上添加 EventListener，它将影响堆栈中所有其他不会覆盖 BackHandler EventListener 的屏幕。

解决此问题的最佳方法是添加另一个条件来检查您是否在登录屏幕中：

handleBackButton = () => {
    if (screen == 'Login') {
    BackHandler.exitApp();
    return true;
    }
};

如何检查您在哪个屏幕上？假设您正在使用 React-Navigation，请查看 here。如果您在跟踪当前屏幕时遇到问题，我建议您打开一个新线程。

【讨论】：

【解决方案2】：

将return true; 添加到_closeApp 方法

_closeApp = async () => {

    // BackHandler.exitApp();

    return true;
}

这个链接可以帮到你很多： React Native: Double back press to Exit App

【讨论】：

它给了我错误“对象不是函数（评估'subscriptions[i]()'）！

【解决方案3】：

componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}

handleBackButton = () => {
    //add your code

    return true;
};

【讨论】：

现在它正在从任何组件退出应用程序！我添加了BackHandler.exitApp()，它在我访问的每个组件上运行