выполнить действие редуктора при нажатии физической кнопки возврата в исходное состояние только на определенном экране

У меня есть случай, когда у меня в приложении есть нижний навигатор вкладок. Первая нижняя вкладка - это навигатор стека, состоящий из главного домашнего экрана и экрана 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');
}

Слова бэкхендлера соответствуют замыслу. Но это также работает, когда я перехожу к другим нижним вкладкам и нажимаю кнопку возврата. Я легко настроил мягкую кнопку возврата, но для жесткой слушатель слушает нажатия со всех нижних вкладок.

Я понимаю такое поведение, но как я могу заставить программу применять this.props.unselectSite() только тогда, когда я нажимаю кнопку возврата, когда я нахожусь на экране SiteDetail. Я использую реагирующую навигацию v5, если это хоть как-то полезно.


react-native android react-navigation react-navigation-v5 back
person Raavan    schedule 28.07.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать условное выражение перед выполнением действия, у response-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/

person Aroldo Goulart    schedule 28.07.2020
comment
Просто и так, как я и хотел. Спасибо - person Raavan; 28.07.2020

arrow_upward
1
arrow_downward

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]
  );
person Steven Bell    schedule 28.07.2020