[RN]React Navigation 설치 및 사용법

React Navigation이란

 

*HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것)
애초에 HTML은 다른 페이지에 넘어가도록 도오주는 마크업 언어 입니다.

 

같은 하이브리드 언어인 Flutter의 경우는 페이지를 넘기기 위한
기능이 자체 내포한다고 합니다.

 

하지만 RN의 경우는...패키지로 다운받아야 합니다...
제일 중요한 기능인데 이걸 패키지로 해야 한다는게 처음에는 이해가 안되었네요

 

지금 제 RN은 2022-1 LTS 버전 입니다.

아마도 0.67버전 같습니다.

 

https://reactnavigation.org/docs/getting-started/

위는 React Navigation 홈페이지 입니다.

 

아래는 설치 방법이 설명된 블로그 입니다.

React Navigation (리액트 네비게이션) 설치 및 Stack 에제

 

기본적인 설치

다들 프로젝트 디렉토리로 가서 설치를 하라는데

제 생각은 그냥 vs code기준으로 그냥 프로젝트 파일 아무거나 열어서 터미널 열고

하면 되더라고요

 

많이 불안하면 cmd창 열어서도 했습니다.

인스톨 많이 하면 다 쌓이는건지 삭제를 해줘야 하는건지 내 용량은 괜찮은지 잘 모르겠네요 아마도 많은 학생들은 API나 패키지를 다운은 받아봐도 삭제는 안해봤겠죠? 저도 그렇네요 거기에 궁금증이 생깁니다... 곧 알아보도록 하죠

#설치

npm install @react-navigation/native

#Expo 기반 프로젝트에서 추가 설치

expo install react-n

#Bare React Native 기반 프로젝트에서 추가 설치

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-

Stack 네비게이션의 구성

npm install @react-navigation/stack

Expo와 Bare 둘 중 하나만 선택해서 인스톨 하고 위 아래 2개는 공통으로 인스톨 하면 됩니다.

 

React Navigation 이해 및 설치

버튼을 구현하여 페이지 간의 이동을 구현한다.

React Navigation 이란?

• react native 앱의 네비게이션 기능과 히스토리를 간단히 관리할 수 있는 라이브러리이다.
• 대규모 개발에 용이하고 Redux와도 상성이 좋으며 Material design과도 대응하고 있기 때문에 관련된 정보가 많다.
• 네비게이션 (스크린 간의 이동) 기능을 구현하기 위해선 네비게이터를 만들어야 한다.
• 네비게이터는 크게 세 종류의 기능이 있다.
  • Stack Navigator: 일반적인 스크린 이동
  • Tab Navigator: 탭으로 스크린 이동
  • Drawer Navigator: 드로어로 스크린 이동

Stack navigator

• 자료구조 중 stack 형식으로 구현되는 네비게이터이다.
• 이동할 때 screen이 하나 씩 stack(후입선출) 형태로 구현된다.
• 최초 스크린이 가장 맨 아래 스택에 쌓인다.

Tab navigator

• 병렬 구조로 구성되는 네비게이터이다.
• 각각의 탭은 고유한 스택을 가지고 있어 서로 독립적이다.
• 탭 구조는 화면 상/하단에 위치해있다.

Drawer navigator

• 탭 네비게이터와 마찬가지로 병렬 구조 이다.
• 드로어 구조는 화면 좌/우에 위치해있다.

아래 블로그에서 가져왔습니다.

설명이 너무 잘되어 있습니다.

 

 

자세한건 위에 블로그 가시면 너무 잘 설명되어 있습니다.

 

사용법은 블로그에도 나오고 정식 홈페이지 DOC로 보시면 됩니다.