Как отследить нажатие кнопки назад?

Question

[Umar Egamberdiev]

Как отследить нажатие этой кнопки?

useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        console.log("onbackpress & closed websocket");
        client.disconnect();
      };
      BackHandler.addEventListener("hardwareBackPress", onBackPress);
      return () =>
        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
    })
  );

Этот код отслеживает только нажатие на смартфоне

Answer 1

[rPman]

anchor навигация?

Непрерывно опрашивай на setInterval значение location.href, и при его изменении вызывай свой метод, это сработает с гарантией где угодно но с лагом, т.е. если интервал будет недостаточно маленьким, и в его пределах пользователь нажмет дважды 'назад', то этот метод укажет только на одно событие... чтобы понять что произошло больше переходов, смотреть в history.length, само собой если пользователь успеет нажать не назад а вперед, или туда-сюда несколько раз, это так же не даст верную информацию, но мне кажется на столько отслеживать перемещение по истории пользователя обычно не требуется.

Comments

[Umar Egamberdiev]

нет это stack navigation

[rPman]

ну оно хранит информацию о странице в history браузера? смотри hostory.length при изменении считай что нажали back

Вообще правильный ответ я не знаю, гугл выдает вполне нормальные способы средствами браузера

window.addEventListener('beforeunload', function(e) {
  // Your logic here
});
window.addEventListener('popstate', function(e) {
  // Your logic here
});

или react native

import { BackHandler } from 'react-native';

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

componentWillUnmount(){
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}

handleBackButton(){
    // Your custom code...
    return true; // This will prevent the regular handling of the back button
}

или так

React.useEffect(
  () =>
    navigation.addListener('beforeRemove', (e) => {
      if (!someCondition) {
        // If we don't need to handle the back button, then return
        return;
      }

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

      // Prompt the user before leaving the screen
      Alert.alert('Modal title', 'Modal message', [
        { text: "Don't leave", style: 'cancel', onPress: () => {} },
        {
          text: 'Leave',
          style: 'destructive',
          onPress: () => navigation.dispatch(e.data.action),
        },
      ]);
    }),
  [navigation, someCondition]
);

upd. меня вообще раздражает современная тенденция все усложнять якобы ради упрощения, задачи, которые нативно с помощью html и javascript решаются с пол пинка, с фреймворками нужно извращаться и выворачиваться, ну в упор не вижу ничего удобного и понятного

[Umar Egamberdiev]

не очень подходяший вариант. нет ли обработчик этой кнопки?

[rPman]

Umar Egamberdiev, не понимаю что значит 'обработчик этой кнопки', это не твоя кнопка а кнопка браузера. Ее ловить - через листенер, или же средствами фреймворка, если он это позволяет

[KrisTeylor]

rPman, вопрос по React Native, а вы почему-то рассуждаете с точки зрения браузера.

Answer 2

[KrisTeylor]

BackHandler это про кнопку назад на Android, в вашем случае нужно разбирать с либой навигации.
Возможно в addListener в https://reactnavigation.org/docs/navigation-prop