React-native navigation 에서 현재 페이지를 네비게이션 스택에 올리지 않기

제목이 좀 거창했는데 구글 애드몹 광고를 넣다가 중간 전면 광고를 보여줄 때 광고를 로딩하고 있다는 UI 를 어떻게 보여줘야 할 지 고민하다가 광고를 보여주는 페이지를 하나 만들어서 구현하는 게 깔끔하겠다는 생각이 들었다. 구글 애드몹 구현 가이드에서도 전면 광고는 아래와 같이 페이지 전환 중간에 넣어야 하는데 이전에는 현재 페이지에서 바로 광고를 불러와서 그런지 광고가 끝나도 바로 다음 페이지로 넘어가기 보다는 잠깐 머물러 있다가 다음 페이지로 넘어가고 있었다. 

 

다만, 전면 광고 페이지를 따로 만들어서 넣으려다보니 next page 에서 뒤로 가기 버튼을 누를 경우, 이전 컨텐츠 페이지가 아니라 전면 광고 페이지로 넘어가는 문제가 있었다. 이걸 어떻게 풀어야할까 고민하다가 navigation stack 에 전면 광고 페이지는 push 되지 않게 하는 방법을 찾아보게 되었는데 다행히 방법이 있었고 실제 테스트에서도 next page 에서 뒤로 가기 버튼을 누를 경우, 중간 전면 광고 페이지가 아닌 이전 페이지로 돌아가는 것을 확인할 수 있었다.

 

방법은 간단하다. navigation stack 에 종적을 남기지 않을 페이지에서 다음 페이지로 넘어갈 때 navigation 에서 제공해주는 replace 라는 method 를 사용하면 된다. 아래는 투두날씨에서 전면 광고 페이지에서 광고를 다 보여주고 날씨 페이지로 넘어갈 때 사용한 코드이다. 'Weather' 페이지로 넘어가는데 content 객체를 인자로 같이 넘겨주는 것.

 

  > navigation.replace('Weather', content)

 

이렇게 하면 전면 광고를 보고 넘어간 Weather page 에서 네비게이션 스택을 이용하는 뒤로 가기 버튼을 눌러도 전면 광고 페이지로 가지 않는다. 전면 광고는 replace 되었기 때문이다.