Перейти к содержанию

Пользовательское поведение кнопки "назад" в Android

По умолчанию, когда пользователь нажимает аппаратную кнопку Android "Назад", react-navigation открывает экран или выходит из приложения, если экранов нет. Это разумное поведение по умолчанию, но бывают ситуации, когда необходимо реализовать пользовательскую обработку.

В качестве примера рассмотрим экран, на котором пользователь выбирает элементы в списке, и активен "режим выбора". При нажатии кнопки "назад" сначала нужно отключить "режим выбора", а экран должен открываться только при втором нажатии кнопки "назад". Ниже приведен фрагмент кода, демонстрирующий эту ситуацию. Мы используем BackHandler, поставляемый с react-native, вместе с хуком useFocusEffect для добавления нашего собственного слушателя hardwareBackPress.

Возврат true из onBackPress означает, что мы обработали событие, и слушатель react-navigation не будет вызван, а значит, экран не появится. Возврат false приведет к тому, что событие будет пропущено и слушатель react-navigation выведет экран на экран.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function ScreenWithCustomBackBehavior() {
    // ...

    useFocusEffect(
        React.useCallback(() => {
            const onBackPress = () => {
                if (isSelectionModeEnabled()) {
                    disableSelectionMode();
                    return true;
                } else {
                    return false;
                }
            };

            const subscription = BackHandler.addEventListener(
                'hardwareBackPress',
                onBackPress
            );

            return () => subscription.remove();
        }, [isSelectionModeEnabled, disableSelectionMode])
    );

    // ...
}

Представленный подход хорошо работает для экранов, отображаемых в StackNavigator. Пользовательская обработка нажатия кнопки "назад" в других ситуациях в настоящее время может не поддерживаться (например, известен случай, когда это не работает, если вы хотите обрабатывать нажатие кнопки "назад" в открытом ящике. PR для таких случаев приветствуются!).

Если вместо переопределения системной кнопки "Назад" вы хотите предотвратить возврат назад с экрана, смотрите документацию по предотвращению возврата назад.

Почему не стоит использовать методы жизненного цикла компонентов

Поначалу вы можете склониться к тому, чтобы использовать componentDidMount для подписки на событие нажатия кнопки "назад" и componentWillUnmount для отмены подписки, или использовать useEffect для добавления слушателя. Такой подход не сработает - подробнее об этом в жизненный цикл навигации.

Ссылки

Комментарии