[React Native -18] 뒤로가기 했을 때 앱 종료하기

 

❗  Stack안에 Tab이 있는 구조여서

Home페이지(Tab)에서 뒤로가기 했을 경우 로그인페이지(Stack)가 보이는 문제가 있었다 

 

따라서 Home페이지에서 뒤로가기를 했을 경우 , Alert이 뜨고 앱을 종료하는 것을 해보겠다

 

 

https://reactnative.dev/docs/backhandler

BackHandler · React Native

react-native에 내장되어 있는 BackHandler라는 컴포넌트가 있는데, 공식문서를 보면서 간단하게 구현할 수 있었다 

Backhandler API는 하드웨어의 뒤로가기 버튼을 감지하고 시스템의 뒤로가기 동작에 대한 이벤트 리스너를 등록하며, 애플리케이션이 응답하는 방식을 제어할 수 있다. (안드로이드 전용임)

 

 

먼저, BackHandler를 import해준다

import { BackHandler } from 'react-native';

 

다음으로, 뒤로가기버튼을 적용하고자 하는 페이지의 componentDidMount(), componentWillMount()에 아래와 같은 코드를 추가한다  

//이벤트 호출
componentDidMount() {
        BackHandler.addEventListener("hardwareBackPress", this.backPressed);
}
//이벤트 삭제
componentWillUnmount(){
    BackHandler.removeEventListener("hardwareBackPress", this.backPressed);
}

//뒤로가기 했을 때 앱 종료
backPressed=()=>{
    Alert.alert("", "앱을 종료하시겠습니까?", [
        {
            text: "취소",
            onPress: () => null,
            style: "cancel"
        },
        { text: "확인", onPress: () => BackHandler.exitApp() }
        ]);
        return true;
}

 

hardwareBackPress의 이벤트 함수에는 boolean리턴값을 주어야한다

(return이 true일 경우, 기존의 뒤로가기 명령을 무시한다)