2019-06-21

React-Navigation

리액트 네비게이션 공식문서 읽은 찌꺼기 (번역)

예전 4주 프로젝트 하면서 읽었던 거지만, 오늘 다시 읽어보았다.

• 리액트 네비게이션은 앱환경, 즉 RN에서도 브라우저처럼 global history를 제공하고, navigate할 수 있도록 하기 위해 만들어졌다.

• 앱이 스택 네비 하나만 사용한다면 웹브라우저와 비슷한 상태가 된다. 그러나 핵심적인 차이가 있는데, 브라우저와는 달리 제스쳐와 애니메이션을 제공한다. (네이티브 앱처럼)

• createStackNavigator()는 리액트 컴포넌트를 리턴한다. (따라서, 바로 export해서 App의 루트 컴포넌트에 사용하도록 할수있다) route configuration object를 인자로 받고, options object도 받을 수 있다.

• Screens 컴포넌트에 navigation props가 내려진다. (아마도 AppContainer 혹은 StackNavigator에서 내려줄거같다) 각 스크린에서는 this.props.navigation으로 접근가능하고, navigate() 메서드로 화면이동을 한다.

  • 이렇게 자동으로 내려주는건 screen 컴포넌트만 해당된다. screen 컴포넌트 하위의 Button같은 컴포넌트가 따로 props로 navigation을 내려받으려면 withNavigation() 이라는 Higher Order Component가 필요하다. (export할 때 한번 감싸주면 자동으로 props.navigation내려준다)

• navigate()와 push()의 차이는, navigate는 이미 목적 스크린에 있는 경우 아무일도 하지 않는다. 반면 push는 이미 그 스크린에 있어도 navigation stack에 push한다.

• goBack() 메서드는 뒤로가기 버튼 기능임. Stack Navigator의 경우 header의 왼쪽에 back버튼이 자동으로 들어가도록 디폴트가 잡혀있다. (안드로이드에서는 하드웨어 백버튼 누르면 goBack을 실행하게 해놨음. )

• 하단 탭 네비 이용해서 화면 전환시 띄워졌던/띄운 화면은 그대로 마운트되어있음. (탭 A(스택)에서 A-1을 띄우고, 하단 네비에서 B로 전환했다가, 다시 하단 네비에서 A 누르면 그대로 A-1이 띄워져있다)

• AppContainer 는 앱 state를 관리하고, top-level navigator를 app 환경과 연결한다. 안드로이드에서는, app container는 백버튼을 핸들링하기 위해 Linking API를 사용한다. 이 컨테이너는 navigation state를 지속시키도록(persist) 설정될 수 있다. 웹에서는, RN과는 다른 컨테이너를 사용해야한다(createBrowserApp) — 이건 아마 RN을 웹 환경 target으로 빌드하는 경우를 말하는 것 같다.

• onNavigationStateChange()메서드를 이용해, navigation state가 변할 떄 마다 액션을 취할 수 있다.

• SwitchNavigator의 목적은, 한번에 하나의 화면만 보여주는 것이다. 기본적으로, 뒤로가기 액션을 핸들링하지 않으며, 화면을 떠날 때 route를 default state로 리셋한다. 이것은 정확히 인증 플로우에 우리가 기대하는 행동이다. (유저가 로그인하면, 인증 플로우의 state를 날려버리고, 스크린을 unmount하게 되길 기대한다. 그리고 하드웨어 백 버튼을 눌렀을 때 다시 그 인증 플로우 화면에 접근할 수 없기를 기대하기 때문이다.)

** setParams() / getParam() 은 현 스크린에 이미 있는 param을 수정(새 key는 merge)하거나 가져오는데 사용한다. (다른 스크린으로부터 받아오거나 넘겨주는 메서드가 아님)