第16章 React Native BackHandler 硬件返回键处理指南

版本：0.77BackHandler

BackHandler API 用于检测硬件返回键的按下，允许你为系统的返回操作注册事件监听器，从而控制应用的响应方式。该 API 仅支持 Android。

事件订阅按注册的相反顺序调用（即最后注册的订阅最先被调用）：

- 如果某个订阅返回 true，则之前注册的订阅不会再被调用。 - 如果没有订阅返回 true，或者根本没有注册订阅，则会以编程方式触发默认的返回键行为，退出应用。

警告（使用 Modal 的用户请注意）：如果你的应用展示了一个已打开的 Modal，BackHandler 将不会发布任何事件（参见 Modal 文档）。

Pattern​ React TSX

```tsx const subscription = BackHandler.addEventListener( 'hardwareBackPress', function () { / * this.onMainScreen 和 this.goBack 仅为示例， * 你需要替换为自己的实现。 * * 通常你会在这里使用导航器返回上一个状态。 */

if (!this.onMainScreen()) { this.goBack(); / * 返回 true 时，事件不会继续向上冒泡， * 也不会执行其他返回操作 */ return true; } / * 返回 false 会让事件继续冒泡， * 由其他事件监听器或系统默认的返回行为来处理。 */ return false; }, );

// 组件卸载时取消监听 subscription.remove(); ```

Example​

下面的示例实现了一个场景：询问用户是否确认退出应用。

BackHandler.addEventListener 会创建一个事件监听器，并返回一个 EventSubscription 对象，你需要通过 EventSubscription.remove 方法将其清除。

Usage with React Navigation​

如果你使用 React Navigation 在不同页面之间导航，可以参考它们的指南 Custom Android back button behaviour。

Backhandler hook​

React Native Hooks 提供了一个很好用的 useBackHandler hook，可以简化事件监听的设置过程。

Reference

Methods​

addEventListener()​ React TSX

```tsx static addEventListener( eventName: BackPressEventName, handler: () => boolean | null | undefined, ): EventSubscription; ```

exitApp()​ React TSX

```tsx static exitApp(); ```