React Native - 设备后退按钮处理

Question

我想检查按下设备后退按钮时是否有多个屏幕在堆栈上。如果是，我想显示上一个屏幕，如果不是，我想退出应用程序。

我检查了示例的数量，但那些使用 BackAndroid 和 Navigator 。但是这两个都被弃用了。 BackHandler 是 BackAndroid 的替代品。我可以使用 props.navigation.goBack(null) 显示上一个屏幕。

但我找不到在堆栈中查找屏幕计数的代码。我不想使用已弃用的 Navigator ！

原文由 Virat18 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此示例将向您展示大多数流程中通常预期的后退导航。您必须根据预期行为将以下代码添加到每个屏幕。有两种情况： 1. 如果堆栈上的屏幕超过 1 个，设备返回按钮将显示上一个屏幕。 2.如果堆栈上只有1个屏幕，设备返回按钮将退出应用程序。

案例 1：显示上一个屏幕

import { BackHandler } from 'react-native';

constructor(props) {
    super(props)
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}

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

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

handleBackButtonClick() {
    this.props.navigation.goBack(null);
    return true;
}

重要提示： 不要忘记在构造函数中绑定方法并在 componentWillUnmount 中删除侦听器。

案例 2：退出 App

在这种情况下，无需处理要退出应用程序的屏幕上的任何内容。

重要提示： 这应该只是堆栈上的屏幕。

原文由 Virat18 发布，翻译遵循 CC BY-SA 3.0 许可协议