[TIL] React Navigation 라이브러리 설치

🧭 다시 한번 리액트 네비게이션

리액트 네비게이션이란 ?

리액트 웹 앱에서 react-route-dom과 비슷한 역할을 하는 리액트 네이비트의 리액트 네비게이션!
리액트 네이티브 앱의 네비게이션과 히스토리를 쉽게 관리할 수 있는 라이브러리중 하나이다.

네비게이션 navigation 을 쓰기위해서는 네비게이터 navigator 가 필요하다!
아주 이름들이 사람 헷갈리게 만듦 😠

---

⌨️ Getting Started!

1. 설치

npm install @react-navigation/native

또는

yarn add @react-navigation/native

2. expo로 관리하는 프로젝트에 디펜던시 추가 설치하기

expo install +

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

이렇게 하면 호환되는 라이브러리들의 버전이 설치된다!

2-1. React Native로 관리하는 프로젝트에 디펜던시 추가 설치하기

npm install +

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

3. pods 설치

Mac으로 ios 개발을 한다면 pods라는 것도 설치해야한다

npx pod-install ios

4. 설치 마무리

react-native-gesture-handler 설치를 끝내려면 (App.js나 index.js 같은) entry file 최상단 에 import 해야한다.

예시

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
//
export default function App(){
  return (
    <NavigationContainer>
      {/* 나머지 코드*/}
    </NavigationContainer>
  )
};