Question

我想实现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();

  }

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

我该如何实现？

Answer 1

由于我还不能添加评论-添加到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。如果您在跟踪当前屏幕时遇到问题，建议您打开一个新线程。

Answer 2

将return true;添加到_closeApp方法

_closeApp = async () => {

    // BackHandler.exitApp();

    return true;
}

此链接可以为您提供很多帮助： React Native: Double back press to Exit App

Answer 3

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

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

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

    return true;
};

React Native Android BackHandler Exit App

3 个答案: