본문 바로가기

프론트-엔드/리액트-네이티브(ReactNative)

[RN] React Navigation Docs(4) - App containers


React Navigation Docs시리즈에서는 React Navigation 공식 홈페이지(https://reactnavigation.org)에 있는 내용을 정리해 보고자 합니다. 자세한 내용은 링크를 참고해주세요.


[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(2) - params




컨테이너는 앱 상태를 관리하고 navigator 를 앱 환경에 연결하는 역할을 합니다. Android에서 애플리케이션 컨테이너는 Linking API를 사용하여 뒤로 버튼을 처리합니다. 또한 navigation 상태를 유지하기 위해 컨테이너가 구성 되기도 합니다. 그리고 웹에서는 React Native 와는 다른 컨테이너를 사용합니다.



Props of createAppContainer on React Native


1
2
3
4
<AppContainer
  onNavigationStateChange={handleNavigationChange}
  uriPrefix="/app"
/>
cs


onNavigationStateChange(prevState, newState, action)
네비게이터의 변화가 관리될 때마다의 네비게이션 상태를 get 하는 메소드입니다. prevState(이전 상태), newState(새 상태) 및 action을 매개변수로 받습니다. 그리고 디폴트로 상태 변경 내용은 콘솔에 찍습니다.

uriPrefix
앱에서 처리할 수 있는 URI의 prefix(접두사)입니다. 이는 router에 전달된 경로를 추출하기 위해 deep link를 처리할 때 사용됩니다.



App Containers on the web


웹에서는 createBrowserApp 및 handServerRequest를 사용하여 navigator 의 상태를 유지할 수 있습니다.



[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(2) - params