[React] React Navigation

React native의 기본 컴포넌트인 Navigator 컴포넌트가 이미 존재하지만 별도로 설치해야 사용할 수 있는 React Navigation으로 무리하게 교체하게 되었다.
Navigator를 순수하게 쓰기에는 손이 너무 많이가기도 하고 컨트롤 해줘야하는 부분들도 많고, 통합적인 네비게이션 시스템이 필요해 보였다. 무엇보다 탭과 카드형식으로 다르게 동작하는 네이게이션을 통합적으로 관리할 수 있는 도구를 쓰는것이 아무래도 나아 보였다.

현재 기준으로 아직 1.0.0-beta.3으로 정식으로 나온 버전은 아니라서 그런지 심각하지는 않지만 몇몇 문제점들은 보인다. 그래도 기능이 충분히 좋아서 괜찮은 대안 중 하나다.

StackNavigator과 TabNavigator 조합사용

stack과 tab을 조합해서 사용할 일이 종종 있을것이다.

StackNavigator({
	TabNavigation: {
		screen: TabNavigator()
	},
});

대략적으로 Stack에 Tab을 집어넣거나 반대로 Tab에 Stack을 넣는 형태로 사용할 수 있었다.
컴포넌트에서 state을 확인해보니 자식 네비게이션의 routes 값으로 들어가 있는것을 확인할 수 있었다. 현재 index값도 같이 들어있으니 활용하면 현재 route값을 가져올 수 있다.

페이지 이동 시 페이지 트래킹하기

탭이나 페이지를 이동하면 Storage에 위치정보를 저장하려고 하는데 아무리 찾아봐도 이동했을때 이벤트 함수를 찾지 못했다. 매뉴얼을 계속 보다가 https://reactnavigation.org/docs/guides/screen-tracking 글을 보게 되었다.
예제에 적힌 소스는 페이지가 이동하면 Google analytics에 기록하는 액션 예제다. 이걸로 페이지가 이동할때마다 무언가 액션을 넣을 수 있다는 확신을 얻었다. (하루종일 방법을 찾아다녔는데.. ㅠㅠ)

const nav = StackNavigator({});

nav.prototype.componentDidUpdate = function(prevProps, prevState)
{
	console.log('prev page state', prevState);
	console.log('current page state', this.state);
};

다만 최초의 페이지는 호출되지 않는다. componentDidUpdate의 특성이라고 볼 수 있기때문에 다른 방법으로 해결해야할 것이다.