[리액트네이티브] 특정 페이지 로딩된 후 뒤로가기 막기 (navigation ,useFocusEffect, reset)

 

구현하고 싶었던 로직은

처음 splash처럼 만들어놓은 splash 스크린을 3초정도 띄워주고, 바로 로그인 페이지로 이동을 시키는 거였당

(splash 자체에 넣지 않은 이유는 이미지가 아니라 명언 api를 통해 실시간으로 명언이 계속 보이게 하려고 만들어성)

 

그렇게 완성된 아래 코드!!

 useFocusEffect(() => {
    setTimeout(() => {
      reset({ routes: [{ name: 'Stacks', params: { screen: 'Login' } }] });
    }, 3000);
  });

코드 분석을 해보면

 

1. useFocusEffect의 콜백함수에 setTimeout 넣어주기

* useFocusEffect ? 스크린이 포커싱이 되는 그 순간!!  단 한번을 주목하여 필요한 로직(리랜더링마다 실행x)을 실행

2. setTimeout 을 통해 3초가 지나면 네비게이터의 기능을 리셋시켜주기(reset을 안하면 스와이프로 다시 스플래쉬 화면으로 뒤로갈 수 있어져버림) , 네비게이션을 리셋시켜주면서 Stacks 네비게이터 안에 있는 screen으로 가세유 하는 것