[투두] ② 리액트 네이티브 탭 네비게이션 구현하기

리액트 네이티브 탭 네비게이션 구현하기

---

1. 필요한 라이브러리 설치하기

1) cmd에서 실습하고 있는 디렉토리로 이동한다. 

cd 디렉토리 경로

 

2) 네비게이션 사용을 위한 리액트 네비게이션 라이브러리를 설치한다.

npm install --save @react-navigation/native

 

리액트 네비게이션은 각 기능별로 모듈이 분리되어 있어, 이후에도 사용하는 네비게이션의 종류에 따라 개별적으로 추가 라이브러리를 설치해냐 한다. 아래는 대부분의 네비게이션에서 반드시 필요한 종속성을 설치하기 위한 코드이다.

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

 

그리고 탭 바의 아이콘을 넣기 위한 라이브러리를 설치한다.

npm install --save react-native-vector-icons

 

3) 탭 네비게이션을 사용하기 위한 추가 라이브러리를 설치한다.

npm install @react-navigation/bottom-tabs

 

 

2. 화면 구성

위와 같이 src 폴더 밑에 화면으로 사용하는 컴포넌트를 관리할 screens 폴더와 작성되는 네비게이션 코드를 관리할 navigations 폴더를 생성했다.

 

하단 탭에 2개의 버튼과 해당 버튼에 연결된 화면으로 구성된 탭 네비게이션을 만들어보겠다. 하단 탭에 좌측 버튼은 투두 아이템을 추가하는 화면으로 이동하는 버튼이고, 우측 탭은 캘린더 화면으로 이동하는 버튼이다. src 폴더 밑에 있는 screens 폴더 내에 CalendarScreen.js 파일을 만들고 화면으로 사용할 컴포넌트를 다음과 같이 작성한다.

 

먼저 styled-components 라이브러리를 설치해야 한다.

npm install --save styled-components

 

src/screens/CalendarScreen.js

import React from 'react';
import styled from 'styled-components/native';

const Container = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const StyledText = styled.Text`
    font-size: 30px;
`;

export const Add = () => {
    return (
        <Container>
            <StyledText>Add</StyledText>
        </Container>
    );
};

export const Calendar = () => {
    return (
        <Container>
            <StyledText>Calendar</StyledText>
        </Container>
    );
};

 

위에서 화면을 확인할 수 있는 텍스트가 나타나는 간단한 컴포넌트를 2개 만들었다. 이제 생성된 컴포넌트를 이용해서 탭 네비게이션을 만들어보겠다.

 

src/navigations/Tab.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MonthlyCalendar } from '../screens/CalendarScreen';
import { Add } from '../screens/AddTaskScreen';
import { Home } from '../screens/Home';
import {MaterialCommunityIcons} from '@expo/vector-icons';

const TabIcon = ({ name, size, color }) => {
    return <MaterialCommunityIcons name={name} size={size} color={color} />;
};

const Tab = createBottomTabNavigator();

const TabNavigation = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen name="TODO List" component={Home}
                        options={{
                            tabBarIcon: props => TabIcon({ ...props, name: 'home'}),
                        }}/>
            <Tab.Screen name="Add a task" component={Add}
                        options={{
                            tabBarIcon: props => TabIcon({ ...props, name: 'plus'}),
                        }}/>
            <Tab.Screen name="Calendar" component={MonthlyCalendar}
                        options={{
                            tabBarIcon: props => TabIcon({ ...props, name: 'calendar'}),
                        }}/>
        </Tab.Navigator>
    );
};

export default TabNavigation;

 

src/App.js

...
import TabNavigation from "./navigations/Tab";

export default function App() {

    return (
            <NavigationContainer>
                <TabNavigation />
            </NavigationContainer>
    );
};