В этом сообщении блога мы рассмотрим, как реализовать функцию двойного обратного нажатия в приложении React Native. Эта функция позволяет пользователям выйти из приложения, дважды нажав кнопку «Назад» на своем устройстве Android в течение определенного периода времени. Мы рассмотрим несколько методов достижения такого поведения, дополненные примерами кода и пояснениями.

Метод 1: использование API BackHandler
React Native предоставляет API BackHandler, который позволяет нам обрабатывать нажатия аппаратной кнопки «Назад». Мы можем использовать этот API для создания функции двойного обратного нажатия. Вот пример того, как это реализовать:

import { BackHandler, ToastAndroid } from 'react-native';
const DOUBLE_PRESS_DELAY = 300; // Adjust this value to set the desired delay between presses
let lastBackPressed = 0;
const handleBackPress = () => {
  const currentTime = new Date().getTime();
  if (currentTime - lastBackPressed < DOUBLE_PRESS_DELAY) {
    // Exit the app
    BackHandler.exitApp();
    return true;
  }
  lastBackPressed = currentTime;
  ToastAndroid.show('Press back again to exit', ToastAndroid.SHORT);
  return true;
};
const App = () => {
  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handleBackPress);
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
    };
  }, []);
  return (
    // App content
  );
};
export default App;

Объяснение:
В этом методе мы прослушиваем событие hardwareBackPressс помощью API BackHandler. Мы отслеживаем временную метку последнего нажатия кнопки «Назад» и сравниваем ее с текущей временной меткой. Если разница меньше указанной задержки (в данном случае 300 миллисекунд), мы выходим из приложения, используя BackHandler.exitApp(). В противном случае мы показываем всплывающее сообщение о том, что пользователю необходимо еще раз нажать кнопку «Назад», чтобы выйти.

Метод 2: использование React Navigation
Если ваше приложение React Native использует React Navigation для управления навигацией, вы можете использовать его функциональность для реализации функции двойного обратного нажатия. Вот пример:

import { BackHandler, ToastAndroid } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
const DOUBLE_PRESS_DELAY = 300;
let lastBackPressed = 0;
const handleBackPress = () => {
  const currentTime = new Date().getTime();
  if (currentTime - lastBackPressed < DOUBLE_PRESS_DELAY) {
    // Exit the app
    BackHandler.exitApp();
    return true;
  }
  lastBackPressed = currentTime;
  ToastAndroid.show('Press back again to exit', ToastAndroid.SHORT);
  return true;
};
const App = () => {
  const navigation = useNavigation();
  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
    return () => {
      backHandler.remove();
    };
  }, []);
  return (
    <NavigationContainer>
      {/* App content */}
    </NavigationContainer>
  );
};
export default App;

Объяснение:
В этом методе мы используем хук useNavigationиз React Navigation для доступа к объекту навигации. Затем мы прослушиваем событие hardwareBackPressс помощью API BackHandler, как и в предыдущем методе. Когда кнопка «Назад» нажимается дважды в течение указанной задержки, мы выходим из приложения. В противном случае мы показываем всплывающее сообщение.

Реализация двойного нажатия для выхода из приложения в React Native может улучшить взаимодействие с пользователем и обеспечить знакомое поведение для пользователей Android. В этой статье мы рассмотрели два метода достижения этой функциональности: с помощью API BackHandler и React Navigation. Не стесняйтесь выбирать метод, который лучше всего соответствует архитектуре и требованиям вашего приложения.

Не забудьте настроить значение задержки в соответствии с желаемым периодом времени.