跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.70

BackHandler

BackHandler API 用于监听设备上的后退按钮事件,可以调用你自己的函数来处理后退行为。此 API 仅能在 Android 上使用。

回调函数是倒序执行的(即后添加的函数先执行)。

  • 如果某一个函数返回 true,则后续的函数都不会被调用。
  • 如果没有添加任何监听函数,或者所有的监听函数都返回 false,则会执行默认行为,退出应用。

注意:如果 app 当前打开了一个Modal窗口,则 BackHandler 不会触发事件。(查看Modal的文档).

用法

BackHandler.addEventListener('hardwareBackPress', function () {
/**
* this.onMainScreen()和this.goBack()两个方法都只是伪方法,需要你自己去实现
* 一般来说都要配合导航器组件使用
*/

if (!this.onMainScreen()) {
this.goBack();
/**
* 返回true时会阻止事件冒泡传递,因而不会执行默认的后退行为
*/
return true;
}
/**
* 返回false时会使事件继续传递,触发其他注册的监听函数,或是系统默认的后退行为
*/
return false;
});

示例

The following example implements a scenario where you confirm if the user wants to exit the app:

BackHandler.addEventListener creates an event listener & returns a NativeEventSubscription object which should be cleared using NativeEventSubscription.remove method.

Additionally BackHandler.removeEventListener can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the addEventListener call as shown the following example ﹣

Usage with React Navigation

If you are using React Navigation to navigate across different screens, you can follow their guide on Custom Android back button behaviour

Backhandler hook

React Native Hooks has a nice useBackHandler hook which will simplify the process of setting up event listeners.


文档

方法

addEventListener()

static addEventListener(eventName, handler)

exitApp()

static exitApp()

removeEventListener()

static removeEventListener(eventName, handler)