[ React Native ] react-navigation을 이용한 리액트 네이티브 화면 이동(1) - 개요 및 설치

React Native Docs

 

Navigator?

• 모바일 앱은 대부분 단일 화면으로 구성되지 않는다.
• 웹에서는 화면이동을 <a> 태그를 사용하지만 리액트 네이티브에서는 navigation을 사용한다.
• Navigator를 이용해 여러 화면을 이동하는 작업을 관리한다.
• react-navigation 패키지를 이용해 쉽게 사용할 수 있다.

 

* 종류

• Stack : 새로운 화면이 기존 화면위에 겹겹이 쌓이는 화면
• Drawer : 화면에 우측으로 미는 제스쳐를 통해 좌측에 열리는 화면
• BottomTab : 화면 하단에 아이콘을 통해 경로를 전환
• MaterialBottomTab : 머티리얼 디자인을 사용한 BottomTab
• MaterialTopTab : 머티리얼 디자인을 사용한 상단 탭 바

=> 각각의 네비게이션은 추가적으로 라이브러리 설치를 해야한다.

 

 

설치

---

> npm install --save @react-navigation/native

> npm install --save react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

 

 

- iOS 사용할 경우 명령어 추가 실행

> cd ios

> pod install

 

 

* npm ERR! code ELIFECYCLE 오류 발생하는 경우!

> npm cache clean --force