React Native BackHandler返回监听事件在所有页面触发如何解决？

问题根因 #

你当前的实现存在两个核心问题导致监听全局生效：

• BackHandler的硬件返回监听是APP全局级别的，你现有代码仅在挂载该逻辑的组件卸载时才移除监听，如果该组件未被卸载（比如写在根路由、首页这类常驻页面），监听会在APP全生命周期生效
• 你在backAction中直接返回true，代表该监听已经消费了返回事件，系统不会再执行默认的返回逻辑，所有页面的返回操作都会被拦截

可行解决方案 #

方案1：仅当前页面聚焦时处理返回事件

如果这个退出确认逻辑只需要在挂载该代码的页面生效，直接加页面聚焦判断即可，非聚焦状态下将返回事件交回系统处理：

useEffect(() => {
  const backAction = () => {
    // 新增判断：仅当前页面处于激活状态时执行自定义逻辑
    if (!navigation.isFocused()) {
      return false;
    }
    Alert.alert('Hold on!', 'Are you sure you want to Logout?', [
      {
        text: 'Cancel',
        onPress: () => null,
        style: 'cancel',
      },
      { text: 'YES', onPress: logout },
    ]);
    return true;
  };

  const backHandler = BackHandler.addEventListener(
    'hardwareBackPress',
    backAction
  );

  return () => backHandler.remove();
// 记得把navigation加入依赖数组
}, [navigation]);

方案2：仅导航栈到栈底时触发退出确认

如果这个逻辑是要做APP退出前的确认，仅在没有可回退的页面时触发，可以加导航栈可回退判断：

useEffect(() => {
  const backAction = () => {
    // 还有可回退的页面时执行默认返回逻辑
    if (navigation.canGoBack()) {
      navigation.goBack();
      return true;
    }
    // 已到栈底触发退出确认
    Alert.alert('Hold on!', 'Are you sure you want to Logout?', [
      {
        text: 'Cancel',
        onPress: () => null,
        style: 'cancel',
      },
      { text: 'YES', onPress: logout },
    ]);
    return true;
  };

  const backHandler = BackHandler.addEventListener(
    'hardwareBackPress',
    backAction
  );

  return () => backHandler.remove();
}, [navigation]);

额外优化提示 #

你当前logout函数中的{loginState ? <Loader /> : console.log('None');这段代码不会生效，函数内部直接写JSX不会触发渲染，需要把Loader组件放到页面的render返回值中才会正常展示。

内容的提问来源于stack exchange，提问作者Anony dev