8.1.1 내비게이션과 아이콘 설정하기

프로젝트를 생성했으면 프로젝트 디렉터리로 이동해 내비게이션 관련 라이브러리와 아이콘 라이브러리를 설치하세요.

$ cd PublicGallery<닉네임>
$ yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack @react-navigation/bottom-tabs react-native-vector-icons

설치 후에는 npx pod-install 명령어를 실행해주세요.

이제 라이브러리를 적용하겠습니다. 내비게이션부터 설정해볼까요? screens 디렉터리를 만들고, 그 안에 RootStack.js 파일을 생성해 다음과 같이 작성하세요.

screens/RootStack.js

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function RootStack() {
  return <Stack.Navigator>{/* 화면 추가 예정 */}</Stack.Navigator>;
}

export default RootStack;