뭘 배우나요?

• Stack Navigation: 새 스크린이 기존 스크린 위로 올라오는 것처럼 보이는 기능
• Tab Navigator: 우리가 흔히 아는 그 내비게이터
• 스택과 탭을 같이 사용

설치

https://reactnavigation.org/docs/getting-started/

1. React Native - react-navigation 설치

npm install @react-navigation/native

2. Expo가 포함된 패키지에 필요한 설치 진행

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

3. Mac - ios 개발 중인 경우

npx pod-install ios

Tab Navigator

설치

npm install @react-navigation/bottom-tabs

폴더 생성

위와 같이 폴더 생성 node_modules 제외

Navs.js

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Movies from "../screens/Movies";
import Search from "../screens/Search";
import Tv from "../screens/Tv";

const Nav = createBottomTabNavigator();

const Navs = () => (
  <Nav.Navigator>
    <Nav.Screen name="Movies" component={Movies} />
    <Nav.Screen name="TV" component={Tv} />
    <Nav.Screen name="Search" component={Search} />
  </Nav.Navigator>
);

export default Navs;