리액트 네이티브 datepicker

박은정·2022년 12월 26일
0

리액트네이티브

목록 보기
14/24

React Native DateTimePicker README를 참고했습니다.

Localization note

현지화를 통해 언어(월, 일)와 날짜를 선택기 및 12/24시간 형식으로 표시할 수 있는 순서를 참조합니다.

안드로이드에서는 시스템 로케일에 의해 선택기가 제어됩니다. 변경하려면 해당 문서를 참조해주세요.

iOS에서는 여기에 설명된 대로 XCode를 사용해서 애플리케이션이 지원하는 로케일에 대해 OS에 알립니다. iOS는 project.pbxproj에 대상 언어가 포함되어 있는 한, 올바르게 현지화된 DateTimePicker를 자동으로 표시합니다.

i18next, react-localize-redux 와 같은 라이브러리로 번역을 관리하는 경우

Apple 설명서에 설명된 대로 대상 언어를 추가하면 충분하지만, 요일과 같은 현지화 키를 추가할 필요는 없습니다. 대상 언어가 project.pbxproj에 포함되어 있는 한, iOS는 자동으로 올바른 현지화된 문자열을 표시합니다.

경우에 따라 로케일을 강제로 사용할 수 있는 iOS 전용 로케일 prop도 있지만,
모든 피커 모드에서 제대로 작동하지 않기 때문에 사용이 권장되지 않습니다.
알려진 바로는, 스피너 모드에서 안정적으로 작동됩니다.

Android imperative api

안드로이드에서는 일반적인 React 컴포넌트 API를 사용하거나 ReactNative.alert() 같은 imperative API를 사용할 수 있습니다.

컴포넌트 API는 모든 플랫폼에서 동일한 코드를 작성할 수 있는 장점이 있지만,
먼저 안드로이드에서 명령형 API를 사용하는 것이 좋습니다.

컴포넌트 API가 내부적으로 명령형 소품을 사용하기 때문에, 매개변수는 다음 단락에서 설명하는 컴포넌트 props와 동일한 속성을 가진 개체입니다.

import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';

DateTimePickerAndroid.open(params: AndroidNativeProps)
DateTimePickerAndroid.dismiss(mode: AndroidNativeProps['mode'])

우리가 imperative API를 추천하는 이유는 안드로이드에서 date/time picker가 ReactNative.alert() 와 유사한 대화상자에서 열리기 때문입니다.
imperative API는 declarative 컴포넌트 API보다 더 잘 모델링합니다.
컴포넌트 접근 방식은 완벽하게 기능하지만, 이슈 트래커 기록에 따르면 버그를 발생시키는 경향이 더 높은 것으로 보입니다.

Component props / params of the Android imperative api

이 라이브러리는 현재 아래와 같은 기능을 제공합니다.

  • iOS: UIDatePicker
  • Android: DatePickerDialog, TimePickerDialog
  • Windows: CalendarDatePicker, TimePicker

이러한 네이티브 클래스는 제한된 구성만 제공하는 반면, 개발자로서 필요할 수 있는 수십 가지 옵션이 있습니다.
따라서 backing native views에서 요구 사항을 지원하지 않으면 이 라이브러리는 요구 사항을 구현할 수 없습니다.
기능 요청과 관련된 문제를 해결할 때는 앞서 언급한 native views를 사용하여 기능을 구현할 수 있는지 여부 (또는 방법)를 문서화하세요.
native views에서 필요한 기능을 지원하지 않는 경우, 이러한 기능 요청은 작업 불가능으로 닫힙니다.

이하 props 설명은 생략

profile
새로운 것을 도전하고 노력한다

1개의 댓글

comment-user-thumbnail
2022년 12월 27일

어떻게 이렇게 한결 같이 매일 공부하시나요?

답글 달기