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:
- 函数式组件
- Class 组件
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 ﹣
- 函数式组件
- Class 组件
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)