2022. 1. 12. 14:08ㆍReact Native/Basic
1. React Navigation 소개
React Navigation은 화면 전환이라고 생각하면 된다.
화면 전환의 예시는 우리가 흔히 사용하는 화면 아래 탭 버튼을 눌렀을 때 보여지는 메인 화면이 바뀐다던지, 아이콘이나 그림이나 버튼을 클릭했을 때 다른 화면으로 이동한다던지 동작하도록 하는 기능들을 말한다.
stack navagation - Moving between screens. 버튼을 눌러 화면 전환.
drawer navigation - 화면 측면에서 오픈되는 새로운 창.
tab navigation - 화면 상단이나 하단의 탭을 만들어 터치를 통해 화면을 전환.
react navigation 에서 화면 전환을 다루기 위해서는 third-party library 가 꼭 필요하다.
다른 navigation을 쓰기도 했는데 ios에서는 잘 되고 android에서는 잘 안 되는 문제, native에서 지원하는 화면 전환 느낌이 나지 않는 문제들이 있어 react navigation 사용이 권장된다.
강의 상에서는 최신 버전이 버전 5이기 때문에 버전 5를 기준으로 진행할 예정이다.
+) 현재는 버전 6이 최신 버전!
https://reactnavigation.org/docs/tab-based-navigation
https://reactnavigation.org/docs/tab-based-navigation/
reactnavigation.org
https://reactnative.dev/docs/navigation
Navigating Between Screens · React Native
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
reactnative.dev
참고 자료
iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의
Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다
www.inflearn.com
'React Native > Basic' 카테고리의 다른 글
| [React Native] React Navigation - 3. [Stack] 화면 Linking (0) | 2022.01.13 |
|---|---|
| [React Native] React Navigation - 2. React Navigation 설치 (0) | 2022.01.12 |
| [React Native] React Native Component - 13. Modal (0) | 2022.01.12 |
| [React Native] React Native Component - 12. Image (0) | 2022.01.12 |
| [React Native] React Native Component - 11. ActivityIndicator (0) | 2022.01.12 |