React Native BackHandler 不删除事件监听器答案

【问题标题】：React Native BackHandler not removing event ListenerReact Native BackHandler 不删除事件监听器
【发布时间】：2017-09-24 16:14:26
【问题描述】：

我正在使用 React Navigation，当按下后退按钮时我需要一些自定义功能。这是我的代码：

class AddEditIngredient extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editStarted: false
    };
    this.goBack = () => {
      if (this.state.editStarted === true) {
        Alert.alert(
          "Ingredient Not Saved",
          "Do you want to navigate away without saving ingredient?",
          [
            { text: "Cancel", onPress: () => null, style: "cancel" },
            { text: "Yes", onPress: () => this.props.navigation.goBack() }
          ],
          { cancelable: true }
        );
      } else {
        this.props.navigation.goBack();
      }
    };
}

componentWillMount() {
    BackHandler.addEventListener("hardwareBackPress", this.goBack);
}

componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.goBack);
}

我的 goBack 功能适用于屏幕上的后退按钮，但是当我尝试按下物理后退按钮时，它会弹出所有屏幕并最小化应用程序。从我通过阅读有关该问题的先前帖子收集的信息来看，removeEventListener 所指的函数与 addEventListener 不同。所以我尝试了这个：

constructor(props) {
    super(props);
    this.state = {
      editStarted: false
    };
    this.goBack = this.goBack.bind(this);
}
goBack = () => {
      if (this.state.editStarted === true) {
        Alert.alert(
          "Ingredient Not Saved",
          "Do you want to navigate away without saving ingredient?",
          [
            { text: "Cancel", onPress: () => null, style: "cancel" },
            { text: "Yes", onPress: () => this.props.navigation.goBack() }
          ],
          { cancelable: true }
        );
      } else {
        this.props.navigation.goBack();
      }
    };

但它没有用。谁能指出我的错误？

谢谢

【问题讨论】：

标签： android react-native react-navigation

【解决方案1】：

终于在this post找到了答案。我需要在我的 goBack 函数结束时返回 true 以指示返回行为已被处理。

【讨论】：

【解决方案2】：

您需要将return true 附加到您的自定义后台侦听器或return false 以跟随您的父处理程序

【讨论】：