仅在特定屏幕中对物理后退按钮按下执行减速器操作以响应本机

Posted 2023-04-13

【中文标题】仅在特定屏幕中对物理后退按钮按下执行减速器操作以响应本机

【英文标题】：perform a reducer action on physical back button press in react native only in a specific screen

【发布时间】：2020-11-17 21:15:16

【问题描述】：

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

每当用户在 SiteDetail 屏幕中按下后退按钮时，他都会被引导回到主主页（这很明显）。但在此之前我需要更新减速器。所以我实现了一个 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');

backhandler的话和预期的一样。但是，当我遍历其他底部选项卡并按下后退按钮时，它也可以工作。我轻松自定义了软后退按钮，但对于硬后退按钮，听众会听到来自所有底部标签的按下。

我确实理解这种行为，但是当我在 SiteDetail 屏幕上按下后退按钮时，如何让程序应用this.props.unselectSite()。 我正在使用 React Navigation v5，如果这有帮助的话。

【参考方案1】：

您可以在执行操作之前使用条件，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();
      
    

文档：https://reactnavigation.org/docs/navigation-prop/

【讨论】：

简单，如我所愿。谢谢

【参考方案2】：

React-Navigation 刚刚添加了一个可以帮助您的新方法，beforeRemove。

类似这样的：

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]
  );