React Native Stack Navigation中BackHandler返回键监听异常问题求助

问题根源 #

• Stack导航为页面压栈逻辑，从Home跳转到Demo时，Home页面不会触发卸载，因此Home注册的hardwareBackPress监听会一直保留
• React Native的BackHandler事件遵循后注册先执行的规则，若回调没有返回true，事件会继续向下冒泡，触发更早注册的监听函数。你写的Demo页返回处理函数没有返回值，默认返回undefined等效于false，因此执行完Demo的跳转逻辑后，还会继续触发Home的退出逻辑。
• 额外小问题：Demo页返回上一页用navigate('Home')是错误用法，会在栈中新增一个Home页面实例，正确应该用goBack()弹出当前Demo页。

修复方案 #

1. 修改Demo.js的返回监听逻辑 #

给返回回调添加return true截断事件冒泡，同时替换为正确的返回方法：

handleBackButton = () => {
    this.props.navigation.goBack();
    return true;
};

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}

2. 给Home.js的返回逻辑添加聚焦判断（双重保险） #

增加页面聚焦判断，只有当前处于Home页时才触发退出逻辑，避免其他场景误触发：

handleBackButton = () => {
  // 仅当前Home页处于激活状态时执行退出逻辑
  if (!this.props.navigation.isFocused()) {
    return false;
  }
  Alert.alert(
    'Exit App',
    'Exiting the application?',
    [
      {
        text: 'Cancel',
        onPress: () => console.log('Cancel Pressed'),
        style: 'cancel',
      },
      {
        text: 'OK',
        onPress: () => BackHandler.exitApp(),
      },
    ],
    {
      cancelable: false,
    },
  );
  return true;
};

componentDidMount() {
  BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
  BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}

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