[투두] ③ react-native-calendars 사용해서 간단한 캘린더 만들기

리액트 네이티브 라이브러리 사용해서 캘린더 만들기

 

---

리액트 네이티브로 캘린더 구현한 것들을 서치한 결과 캘린더를 만드는 방법은 다음 세 가지가 있다.

1) react-native-calendars 등의 라이브러리 이용

아래 사이트에서 유명한 캘린더 라이브러리들을 확인할 수 있다.

🔗 https://openbase.com/categories/js/best-react-native-calendar-libraries

10 Best React Native Calendar Libraries in 2021 | Openbase

2) 구글 open API를 사용

3) 라이브러리 사용하지 않고 moment.js로 직접 캘린더 구현

 

🔗서치하다가 유용한 사이트를 발견했다. React Native Example

 

일단 지금은 완전 시작 단계이므로 가장 유명한 라이브러리를 사용하는 방법으로 구현해보도록 하겠다.

 

✅ 캘린더 기본만 구현하기

일단 유튜브 튜토리얼을 보고 진행했는데 설치만 많이 하고 탭 네비게이션 화면으로는 계속 에러가 발생했다. 지금 단계에서는 기본 캘린더만 구현하는 것이 급하다. 캘린더 화면의 다른 기능들은 우선순위에서 밀려나서 차차 구현하도록 할 것이다. 그래서 일단 정말 기본만 구현할 것이기 때문에 라이브러리의 <Calendar> 이 컴포넌트 하나만 사용하면 된다. 

1. react-native-calendars 캘린더 라이브러리 설치하기

https://github.com/wix/react-native-calendars

npm install --save react-native-calendars

 

2. 컴포넌트 임포트 하고 코드 작성

 

src/screens/MonthlyCalendar.js

import React from "react";
import { View } from "react-native";
import { Calendar } from 'react-native-calendars';

export const MonthlyCalendar = () => {
    return (
        <View style={{marginTop: 50}}>
            <Calendar/>
        </View>
    );
};

 

src/navigations/TabNavigation.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MonthlyCalendar } from '../screens/MonthlyCalendar';
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={{
                            headerShown: false,
                            tabBarIcon: props => TabIcon({ ...props, name: 'calendar-check'}),
                        }}/>
            <Tab.Screen name="Calendar" component={MonthlyCalendar}
                        options={{
                            headerShown: false,
                            tabBarIcon: props => TabIcon({ ...props, name: 'calendar'}),
                        }}/>
        </Tab.Navigator>
    );
};

export default TabNavigation;

 

src/App.js

import React from "react";
import TabNavigation from "./navigations/TabNavigation";
import { NavigationContainer } from "@react-navigation/native";


export default function App() {
    return (
            <NavigationContainer>
                <TabNavigation/>
            </NavigationContainer>
    );
};

 

3. 결과