hardwareBackPress

Tags

뒤로가기 물리버튼 커스텀

react-native의 BackHandler와 네비게이션의 useFocusEffect hook을 사용해서 커스텀 hardwareBackPress listener를 만들 수 있다.
 

hardwareBackPress 이벤트에 커스텀 핸들러 함수 등록.

  • true를 반환하면 커스텀 행위 수행 후 react-navigation의 리스너 함수는 호출되지 않는다.
  • false를 반환하면 커스텀 행위 수행 후 react-navigation의 리스터 함수도 호출된다.
 

예시

  • 탭 네비게이션의 탭은 바뀌지 않고, 웹뷰만 goBack() 시키도록 커스텀한 예시.
function ScreenWithCustomBackBehavior() {
  // ...

useFocusEffect(() => {
    const onBackPressed = () => {
        console.log("forum back");

        webref.goBack();
        return true;
    }
    BackHandler.addEventListener('hardwareBackPress', onBackPressed)

    return () => BackHandler.removeEventListener('hardwareBackPress', onBackPressed);
}, []);

  // ...
}