React Native 单屏禁用Android back button后全应用返回键失效问题

• BackHandler的清理移除函数被写在了async自执行函数内部，focus事件监听器无法捕获执行这个清理逻辑，页面离开时返回键监听没有被卸载，导致全局返回键持续被拦截。
• 仅注册了focus监听，没有配套的失焦（blur）监听逻辑来主动移除返回键拦截，也是问题诱因之一。
• 异步获取AsyncStorage的逻辑会导致返回键监听注册延迟，如果用户在异步操作完成前就离开页面，清理函数甚至还没被创建，完全没有机会被执行。

useEffect(() => {
  let backhandler = null;
  // 页面聚焦时注册返回键拦截
  const focusUnsubscribe = navigation.addListener('focus', async () => {
    const time = await AsyncStorage.getItem('@timer_set')
    setEndTime(time);
    // 注册前先清掉可能存在的旧监听，避免重复注册
    if(backhandler) backhandler.remove();
    backhandler = BackHandler.addEventListener('hardwareBackPress', () => {
      return true;
    });
  });
  // 页面失焦时移除返回键拦截
  const blurUnsubscribe = navigation.addListener('blur', () => {
    if(backhandler) {
      backhandler.remove();
      backhandler = null;
    }
  });
  // 组件卸载时统一清理所有监听
  return () => {
    focusUnsubscribe();
    blurUnsubscribe();
    if(backhandler) {
      backhandler.remove();
      backhandler = null;
    }
  };
}, [navigation]);

• 如果有特殊场景不需要全局拦截，可在hardwareBackPress的回调中增加业务判断逻辑，仅符合拦截条件时才返回true
• 若页面存在自定义返回按钮、跳转逻辑等其他离开路径，也可在对应逻辑中补充BackHandler的移除处理，进一步避免泄漏

内容的提问来源于stack exchange，提问作者Ryan Fonseka