Android 仅在特定屏幕中，在物理后退按钮上执行减速器操作

我的应用程序中有一个底部选项卡导航器。第一个底部选项卡是由主主屏幕和siteDetail屏幕组成的堆栈导航器。用户可以从主主屏幕导航到SiteDetail屏幕。同样，底部选项卡中还有其他元素

当用户在SiteDetail屏幕中按下backbutton时，他会被引导回主主页，这是显而易见的。但在此之前，我需要更新减速器。因此，我实现了一个BackHandler侦听器，如下所示：

constructor(props){
super(props);
//.........
   this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}       

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

handleBackButtonClick() {
   
    if (this.props.isRestroDetailPage) {// doesn't  work of course
        this.props.unselectSite();
    }
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress');
}

回执者的话很好。但，当我移动到其他底部选项卡并按下后退按钮时，它也会起作用。我很容易地定制了“软后退”按钮，但对于“硬后退”按钮，听者会听到底部选项卡上所有按钮的按下

我确实理解这种行为，但如何使程序仅在我处于SiteDetail屏幕时按下Back按钮时应用this.props.unselectSite。

---

我使用的是react navigation v5，如果有帮助的话。

您可以在执行操作之前使用一个条件，react本机有一个道具来验证屏幕是否处于选中状态。 例如：

handleBackButtonPressAndroid = () => {
    let { navigation } = this.props;
    if (navigation.isFocused()) {
      //execute what you want.
    };
}

就你而言：

handleBackButtonClick() {
    let { navigation } = this.props;
    if(navigation.isFocused()) {
      if (this.props.isRestroDetailPage) {// doesn't  work of course
          this.props.unselectSite();
      }
    }
}

---

文档：

您可以在执行操作之前使用条件，react native有一个道具来验证屏幕是否处于选中状态。 例如：

handleBackButtonPressAndroid = () => {
    let { navigation } = this.props;
    if (navigation.isFocused()) {
      //execute what you want.
    };
}

就你而言：

handleBackButtonClick() {
    let { navigation } = this.props;
    if(navigation.isFocused()) {
      if (this.props.isRestroDetailPage) {// doesn't  work of course
          this.props.unselectSite();
      }
    }
}

---

文档：

React Navigation刚刚添加了一个新方法，应该可以帮助您解决此问题

大概是这样的：

React.useEffect(
    () =>
      navigation.addListener('beforeRemove', (e) => {
        if (!props.isRestroDetailPage) {
          // If we don't have unsaved changes, then we don't need to do anything
          return;
        }

        // Prevent default behavior of leaving the screen
        e.preventDefault();

        this.props.unselectSite();
        navigation.dispatch(e.data.action)
      }),
    [navigation, props.isRestroDetailPage]
  );

---

React Navigation刚刚添加了一个新方法，可以帮助您解决此问题

大概是这样的：

React.useEffect(
    () =>
      navigation.addListener('beforeRemove', (e) => {
        if (!props.isRestroDetailPage) {
          // If we don't have unsaved changes, then we don't need to do anything
          return;
        }

        // Prevent default behavior of leaving the screen
        e.preventDefault();

        this.props.unselectSite();
        navigation.dispatch(e.data.action)
      }),
    [navigation, props.isRestroDetailPage]
  );

---

简单，就像我想要的那样。谢谢你，我想要的。谢谢