跳到主要内容
版本:0.80

BackHandler

BackHandler API 会检测用于返回导航的硬件按钮按下事件,允许你为系统返回操作注册事件监听器,并让你控制应用程序的响应方式。它仅适用于 Android。

事件订阅会按相反顺序调用(即,最后注册的订阅会最先被调用)。

  • **如果某个订阅返回 true,**则更早注册的订阅将不会被调用。
  • **如果没有订阅返回 true,或者没有注册任何订阅,**则会以编程方式调用默认的返回按钮功能以退出应用。

**使用 Modal 时的警告:**如果你的应用显示了已打开的 ModalBackHandler 将不会发布任何事件(请参见 Modal 文档)。

Pattern

React TSX
const subscription = BackHandler.addEventListener(
'hardwareBackPress',
function () {
/**
* this.onMainScreen 和 this.goBack 只是示例,
* 你需要在这里使用自己的实现。
*
* 通常你会在这里使用 navigator 跳转到上一个状态。
*/

if (!this.onMainScreen()) {
this.goBack();
/**
* 当返回 true 时,事件不会继续向上冒泡
* 且不会执行其他返回操作
*/
return true;
}
/**
* 返回 false 将允许事件继续向上冒泡,并让其他事件监听器
* 或系统默认的返回操作被执行。
*/
return false;
},
);

// 在卸载时取消订阅监听器
subscription.remove();

Example

以下示例实现了一个场景:当用户想退出应用时进行确认:

BackHandler.addEventListener 会创建一个事件监听器,并返回一个 NativeEventSubscription 对象,应使用 NativeEventSubscription.remove 方法将其清除。

Usage with React Navigation

如果你正在使用 React Navigation 在不同屏幕之间导航,可以参考他们关于 自定义 Android 返回按钮行为 的指南。

Backhandler hook

React Native Hooks 提供了一个很不错的 useBackHandler hook,可以简化设置事件监听器的过程。


Reference

Methods

addEventListener()

React TSX
static addEventListener(
eventName: BackPressEventName,
handler: () => boolean | null | undefined,
): NativeEventSubscription;

exitApp()

React TSX
static exitApp();