React Navigation Docs시리즈에서는 React Navigation 공식 홈페이지(https://reactnavigation.org)에 있는 내용을 정리해 보고자 합니다. 자세한 내용은 링크를 참고해주세요.
[RN] React Navigation Docs(1) - navigate
[RN] React Navigation Docs(2) - params
Stack Navigator, Switch Navigator, Drawer Navigator, Tab Navigator
react-navigation 에서 제공하는 navigator는 크게 위의 4가지가 있습니다. 그 중 Switch Navigator를 소개하고자 합니다.
Switch Navigator
CreateSwitchNavigator(RouteConfigs, SwitchNavigatorConfig)
Switch Navigator는 CreateSwitchNavigator 메소드로 생성할 수 있습니다.
그럼 먼저, 해당 Navigation의 로직을 수정할 때 옵션을 줄 수 있는 SwitchNavigatorConfig 의 몇몇 옵션을 보겠습니다.
initialRouteName - 처음 로드할 때 초기 탭 경로에 대한 routeName
path- routeConfigs에 설정된 경로를 재정의하는 경로 구성에 대한 routeName 매핑을 제공
backBehavior - 뒤로가기 버튼을 눌렀을 때, 탭 스위치가 초기 경로로 전활될지의 여부. 'initialRoute'인 경우 스위치의 초기 경로로 돌아간다. 'none' 으로 설정하면, 전 route로 가거나 전 route가 없을 시 앱이 종료된다. 디폴트는 none.
Switch Navigator가 앞서 소개한 Stack Navigator와 다른 점은 path 와 backBehavior 에서도 알 수 있습니다.
Stack Navigator는 navigate로 스크린 간 이동을 했을 때 스크린들이 해당 Route의 Stack에 쌓인다고 볼 수 있는데, Switch Navigator는 로그가 남지 않고 이동한 스크린이 초기 경로처럼 작동하게 됩니다. 따라서, Switch Navigator는 Login과 같은 기능을 구현할 때 적합합니다.
추가적으로 제가 경험하면서 느낀 또 다른 차이점은 animation 입니다.
Switch Navigator에는 제공되는 애니메이션 기능이 없을 뿐더러, 이동할 때 어떠한 애니메이션 효과도 발생하지 않습니다.
[RN] React Navigation Docs(1) - navigate
[RN] React Navigation Docs(2) - params
'프론트-엔드 > 리액트-네이티브(ReactNative)' 카테고리의 다른 글
| [RN] React Navigation Docs(7) - Tab Navigator (0) | 2019.01.31 |
|---|---|
| [RN] React Navigation Docs(6) - Drawer Navigator (0) | 2019.01.31 |
| [RN] React Navigation Docs(4) - App containers (0) | 2019.01.31 |
| [RN] React Navigation Docs(3) - navigationOptions (0) | 2019.01.31 |
| [RN] React Navigation Docs(2) - params (1) | 2019.01.31 |
