본문 바로가기
Frontend/React Native

[React Native] 안드로이드 뒤로가기 버튼으로 앱 종료 Toast 메시지 처리

by couque 2023. 10. 16.
반응형

리액트 네이티브로 안드로이드를 개발하다보면

ios와는 다르게 물리버튼으로 뒤로가기나 앱을 종료 시킬 수 있기 때문에

이에 따른 처리를 해줄 필요가 있다.

 

alert으로 사용자에게 알림을 줄 수도 있지만, 이번에는 안드로이드의 Toast 메시지를 이용하여

좀 더 자연스럽게 처리하는 방법으로 구현해 보았다.


# 뒤로가기 물리버튼과 Toast 메시지를 사용하기 위해 필요한 라이브러리를 import 해준다

import {BackHandler, ToastAndroid} from 'react-native';

# 2초안에 뒤로가기 버튼을 두번 누르게 되면 앱을 종료하는 로직

let isExitApp = false;
let timeout;

useEffect(() => {
      // 안드로이드 기기 뒤로가기 버튼
      const backAction = () => {
          if (!isExitApp) {
            isExitApp = true;
            ToastAndroid.show('뒤로 버튼을 한번 더 누르시면 종료됩니다.', ToastAndroid.SHORT);
            
            timeout = setTimeout(() => {isExitApp = false;}, 2000);
          } else {
              clearTimeout(timeout);
              BackHandler.exitApp();  // 앱 종료
          }
          return true;
          
        }
      }
  
      const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        backAction
      );
  
      return () => backHandler.remove();

    }, []);

 

반응형

댓글