리액트네이티브 네비게이션 설치

React Navigation이란?

페이지 이동을 구현하는 손쉬운 방법.

다 쓰는 방법이라고 한다.

https://reactnavigation.org/

React Navigation | React Navigation

 

 설치방법

설치방법은 위 링크에서 공식문서(Read Docs)에 적혀있고, 아래의 내용과 같다.

1. react-navigation 설치

터미널에서 아래 명령어를 입력한다. 프로젝트에 설치가 되는 것으로 프로젝트 폴더에서 설치해야 한다.

yarn add @react-navigation/native

맨 아래 Done 이 뜨면 문제없이 설치 완료

2. 스텍 네비게이션 설치

페이지를 컴포넌트화 시켜주는 스텍 네비게이션도 함께 설치한다.

yarn add @react-navigation/stack

아래와 같이 페이지 컴포넌트화를 손쉽게 해준다

스텍을 쌓는 형태로 페이지를 구성하여, 뒤로가기를 누르면 스텍을 벗겨내며 구현된다.

 

Stack.Screen 이라는 페이지로 컴포넌트를 감싼 후,

Stack.Navigator로 책갈피처럼 불러옴

 

 

3. 엑스포에서 네비게이션을 사용하기 위한 추가 라이브러리 설치

• react-native-screens 
• react-native-safe-area-context 
• react-native-gesture-handler

위 세가지를 함께 설치해줘야 네비게이션 구현이 용이하다고 한다.

엑스포 명령어로 설치 가능하며, 띄어쓰기로 한번에 설치가능하다.

expo install react-native-screens react-native-safe-area-context react-native-gesture-handler

맨 아래 Done 이 뜨면 문제없이 설치 완료