React-Native Navigation

React-Native에서 Route역활을 해주는 react-navigation에 관하여 알아 보려고 합니다.

react-navigation의 공식 사이트는 아래의 URL로 접속 하시면 됩니다.

• react-navigation 공식 홈페이지 => https://reactnavigation.org/

react-navigation V5 설치

---

아래의 명령어로 라이브러리를 설치 해줍니다.

1 npm install @react-navigation/native

Expo, React-native-cli를 각각 자신에게 맞는 버전을 설치 해줍니다.

• Expo를 사용 하시는 분은 아래의 코드로 의존성을 설치 해줍니다.

1 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

• React-Native-cli를 사용 하시는 분은 아래의 코드로 의존성을 설치 합니다.

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

1. 기본 구성

1.1 App.js

NavigationContainer으로 전체 앱을 포장 해야 합니다.

일반 적으로는 index.js 또는 App.js에서 파일을 수행 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 import 'react-native-gesture-handler'; import * as React from 'react'; import { NavigationContainer } from "@react-navigation/native"; const App = () => { return ( <> <NavigationContainer>{/* Rest of your app code */}</NavigationContainer> </> ); };

2. 추가 적인 Navigation

React-navigation을 사용 하기 위해서는 필요한 Navigation을 따로 라이브러리들을 설치를 해줘야 합니다

아래의 주소에 가시면 여러가지의 라이브러리 들을 확인 할 수 있습니다.

• https://reactnavigation.org/docs/stack-navigator

2.1 Stack Navigation

한 화면 위에 다른 화면을 쌓아 올리듯 화면 전환을 하는 navigation을 말합니다.

[그림1: reactnavigation.org 공식 홈페이지]

1 npm install --save @react-navigation/stack

2.2 Stack Navigation

메뉴에 사용되는 navigation 입니다.

[그림2: reactnavigation.org 공식 홈페이지]

npm install @react-navigation/drawer

2.3 Bottom Tab Navigation

화면 하단에서 Tab을 하여 전환 하는 Navigation입니다.

[그림3: reactnavigation.org 공식 홈페이지]

npm install --save @react-navigation/bottom-tabs

2.4 Material Bottom Tab Navigation

Bottom Tab Navigation과 기능은 같지만 여기에 Google의 Material 디자인이 적용된 Navigation 입니다.

[그림4: reactnavigation.org 공식 홈페이지]

npm install --save @react-navigation/material-top-tabs react-native-tab-view