react-native 中的 BackHandler 是一个用于处理 Android 设备上的硬件返回按钮(back button)和 iOS 设备上的手势返回(swipe back gesture)的模块。在 React Native 应用中,当用户按下返回按钮或执行返回手势时,默认情况下,应用会导航回前一个屏幕或者如果已经在栈底则退出应用。但是,有时候你可能需要自定义这些行为,例如弹出一个确认对话框或者执行一些清理操作。
使用 BackHandler 来处理返回按钮的按下事件代码栗子:
import React, { useEffect } from 'react';
import { BackHandler, Alert } from 'react-native';
function MyComponent() {
useEffect(() => {
const handleBackPress = () => {
Alert.alert(
'确认退出',
'你真的要退出应用吗?',
[
{
text: '取消',
onPress: () => null,
style: 'cancel',
},
{ text: '确定', onPress: () => BackHandler.exitApp() },
],
{ cancelable: false }
);
return true; // 阻止默认的返回行为
};
// 注册返回按钮的监听器
const backHandler = BackHandler.addEventListener(
'hardwareBackPress',
handleBackPress
);
// 组件卸载时移除监听器 ,防止内存泄漏
return () => backHandler.remove();
}, []);
// ... 组件的其他部分
return (
// ... 组件的 JSX
);
}
export default MyComponent;