React Native Android blur事件未成功移除hardwareBackPress监听问题
问题根因
BackHandler.removeEventListener要求传入和addEventListener完全一致的回调函数引用才能匹配并移除对应监听。你当前在blur回调中传入了新的匿名函数,和之前注册的backAction不是同一个引用,导致移除操作没有生效,原有的返回键监听始终留存,切换页面后仍然会触发。- 原有清理逻辑只清除了navigation的focus、blur监听,没有处理已经挂载的
hardwareBackPress监听,存在内存泄漏和异常触发风险。
修复方案
修改blur事件的移除逻辑,传入和注册时完全相同的backAction引用,同时补充卸载时的全局返回键监听清理,修复后的代码如下:
useEffect(() => { const backAction = () => { Alert.alert("Hold on!", "Are you sure you want to exit the app?", [ { text: "Cancel", onPress: () => null, style: "cancel" }, { text: "YES", onPress: () => BackHandler.exitApp() } ]); return true; }; const backHandler = navigation.addListener('focus', () => { BackHandler.addEventListener('hardwareBackPress', backAction); }); const unsubscribeblur = navigation.addListener('blur', () => { // 传入同一引用的backAction完成移除 BackHandler.removeEventListener('hardwareBackPress', backAction); }); return () => { backHandler.remove(); unsubscribeblur.remove(); // 兜底清除可能留存的返回键监听 BackHandler.removeEventListener('hardwareBackPress', backAction); } }, [navigation]);
内容的提问来源于stack exchange,提问作者Musab Gulfam
相关产品推荐
相关产品推荐

