[RN] Calendars 넣어보기

리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다.

리액트 네이티브 버전 :  "react-native": "0.69.2"

 

- 화면에서 달력을 그려보려고 한다.

- 직접 만들 수도 있지만, 귀찮으니 사람들이 만들어놓은 라이브러리를 쓴다.

- 기본 디자인이 심플하고 마음에 들어서 선택했다.(기능은 거기서 거기)

 

npm i react-native-calendars

 

- 라이브러리를 설치한다.

- 코드 작성

<Calendar
    style={styles.calendar}
    theme={{
      selectedDayBackgroundColor: 'pink',
      selectedDayTextColor: 'white',
      arrowColor: 'pink',
      dotColor: 'pink',
      todayTextColor: 'white',
    }}
    onDayPress={day => {
      setSelectedDate(day.dateString);
    }}
    markedDates={markedSelectedDates}
/>

 

- 테마는 원하는 색으로 변경하면 된다.

- 사실 github을 참고하는게 제일 좋지만... 그게 귀찮으면 이 코드를 복사해서 사용해도 된다.

 

 

 

 

- 참고

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

GitHub - wix/react-native-calendars: React Native Calendar Components 🗓️ 📆