react-native硬件返回键无法在同一组件执行两个动作如何解决

问题根因 #

1. 逻辑优先级错误：现有代码中!this.state.otpScreen的判断优先级高于showLoginScreen的判断，首次按下返回键将showLoginScreen设为true后，第二次按下时只要页面处于聚焦状态且otpScreen为false，就会一直触发第一个判断分支，永远无法进入第二个分支处理二次返回的逻辑。
2. 监听事件处理错误：componentWillUnmount生命周期中错误调用了addEventListener新增返回监听，没有移除当前组件绑定的backAction监听，会导致内存泄漏和事件逻辑混乱。
3. 返回值逻辑不符合预期：第二个分支返回false会将返回事件交给系统默认处理，无法直接实现退出应用的需求。

修复方案 #

1. 调整backAction逻辑顺序 #

backAction = () => {
  // 优先判断是否已显示登录界面，处理二次返回逻辑
  if (this.state.showLoginScreen) {
    // 直接调用退出应用方法，也可保留原有的CommonActions.reset逻辑，自行适配业务需求
    BackHandler.exitApp()
    return true
  }
  // 再处理首次返回唤起登录界面的逻辑
  if (this.props.navigation.isFocused() && !this.state.otpScreen) {
    this.setState({ showLoginScreen: true });
    return true;
  }
  // 其他场景不消费事件，交给上层路由处理
  return false;
};

2. 修正生命周期的监听处理 #

componentDidMount() {
  this.focusListener = this.props.navigation.addListener('focus', () => {
    this.setState({
      mobile: '',
      // 初始值改为false，符合首次按下返回才显示登录界面的需求，可根据业务自行调整
      showLoginScreen: false,
    });
  });
  this.getDataFromStorage();
  AsyncStorage.setItem('countryCode', '+91');
  BackHandler.addEventListener(
    "hardwareBackPress",
    this.backAction
  );
}  
componentWillUnmount() {
  clearInterval(this.interval)
  // 移除当前组件绑定的返回监听，不要新增监听
  BackHandler.removeEventListener('hardwareBackPress', this.backAction)
  // 补充移除focus监听，避免内存泄漏
  this.focusListener?.remove()
}

补充说明 #

如果业务不需要二次按下直接退出，而是需要先跳转回Login页面再按返回退出，可将BackHandler.exitApp()替换为原有CommonActions.reset逻辑，只需保证Login页面的返回监听正常处理退出逻辑即可。

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