[React Native] 리액트 내비게이션 - 설치 및 적용

의존 패키지 설치하기

1. 터미널에서 프로젝트 폴더로 이동

 

2. 다음 명령어를 실행하여 모듈 설치

yarn add @react-navigation/native

 

오류 안 뜨고 Done 뜨면 성공.

 

3. 다음 명령어를 실행하여 의존 라이브러리 설치

yarn add react-native-screens react-native-safe-area-context

react-navigation이 의존하는 라이브러리가 몇 가지 있다고 하니 설치한다.

마찬가지로 오류 안 뜨고 Done 뜨면 성공.

 

4. ios 디렉터리에서 Pod 설치 (Mac의 경우)

cd ios
pod install

맥 환경이 아니면 생략해도 된다.

 

이렇게 뜨면 성공

 

이렇게 하면 설치가 완료된다.

 

 

라이브러리 적용하기

1. App.js에 다음 코드 추가

import { NavigationContainer } from '@react-navigation/native';

 

이렇게 @react-navigation/native에서 NavigationContainer 컴포넌트를 불러와서 사용한다.

 

2. App 코드 전체를 NavigationContainer로 감싸기

// App.js

function App() {
  return <NavigationContainer>{/* 내비게이션 설정 */}</NavigationContainer>;
}

export default App;

예시

이런 식으로 앱 전체를 감싸준다.

 

 

설치 및 적용 완료!