Android 및 iOS용 React Native datetime-picker

블로그

Android 및 iOS용 React Native datetime-picker

react-native-modal-datetime-picker . 선언적 크로스 플랫폼 반응 네이티브 날짜 및 시간 선택기.

이 라이브러리는 모달 내부의 기본 날짜 선택기 및 시간 선택기를 표시하기 위한 플랫폼 간 인터페이스를 노출하여 통합된 사용자 및 개발자 경험을 제공합니다.

이 라이브러리가 사용하고 있는 후드 아래에는 @react-native-community/datetimepicker .

설정(비 엑스포 프로젝트용)

프로젝트에서 사용하지 않는 경우 엑스포 , npm 또는 yarn을 사용하여 라이브러리와 커뮤니티 날짜/시간 선택기를 설치합니다.

문자열을 객체로 자바 스크립트
# using npm $ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker # using yarn $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker

|_+_| 패키지는 기본 모듈이므로 수동 연결이 필요할 수 있습니다. .

설정(엑스포 프로젝트용)

프로젝트에서 사용 중인 경우 엑스포 , 다음을 사용하여 라이브러리와 커뮤니티 날짜/시간 선택기를 설치하십시오. CLI 엑스포 :

@react-native-community/datetimepicker

용법

expo install react-native-modal-datetime-picker @react-native-community/datetimepicker

사용 가능한 소품

이름 유형 기본 설명
취소텍스트IOS '취소' 취소 버튼 라벨(iOS)
확인텍스트IOS '확인하다' 확인 버튼의 라벨(iOS)
사용자 지정 취소 버튼IOS 요소 기본 취소 버튼 구성 요소 재정의(iOS)
customConfirmButtonIOS 요소 기본 확인 버튼 구성 요소 재정의(iOS)
커스텀헤더IOS 요소 기본 헤더 구성 요소 재정의(iOS)
커스텀 피커IOS 요소 기본 기본 선택기 구성 요소(iOS) 재정의
데이트 오브제 새로운 날짜() 처음 선택한 날짜/시간
헤더텍스트IOS 날짜 선택 헤더의 제목 텍스트(iOS)
isDarkMode활성화 부울 거짓 기기가 어두운 테마를 사용하고 있습니까?
isVisible 부울 거짓 날짜/시간 선택기를 표시하시겠습니까?
모달스타일IOS 스타일 모달 콘텐츠의 스타일(iOS)
방법 데이트 '날짜', '시간', '날짜시간' 중에서 선택
취소 기능 필수의 해제 시 호출되는 함수
확인 기능 필수의 선택한 날짜 또는 시간에 호출되는 함수입니다. 날짜 또는 시간을 JavaScript Date 객체로 반환합니다.
숨기기 기능 () => 널 숨기기 애니메이션 이후에 호출됨
pickerContainerStyleIOS 스타일 선택기 컨테이너의 스타일(iOS)

참고하세요 모든 import React, { useState } from 'react'; import { Button, View } from 'react-native'; import DateTimePickerModal from 'react-native-modal-datetime-picker'; const Example = () => { const [isDatePickerVisible, setDatePickerVisibility] = useState(false); const showDatePicker = () => { setDatePickerVisibility(true); }; const hideDatePicker = () => { setDatePickerVisibility(false); }; const handleConfirm = date => { console.warn('A date has been picked: ', date); hideDatePicker(); }; return ( ); }; export default Example; 소품도 지원됩니다 !

자주 묻는 질문

구성 요소가 예상대로 작동하지 않습니다.

후드 아래 |_+_| 용도 @react-native-community/react-native-datetimepicker . 버그를 보고하기 전에 교환을 시도하십시오 |_+_| ~와 함께 react-native-modal-datetime-picker 문제가 지속되면 이미 문제로 보고되었는지 확인하십시오.

datepicker 대신 timepicker를 어떻게 표시합니까?

설정 |_+_| 소품 |_+_|. |_+_|를 설정하여 날짜 선택기와 시간 선택기를 한 번에 표시할 수도 있습니다. 소품 |_+_|.

피커에서 초기 날짜를 설정할 수 없습니다

|_+_|를 사용 중인지 확인하세요. 소품(|_+_|이 아님).

선택기는 Android에서 두 번 표시됩니다.

이것은 알려진 문제인 것 같습니다. @react-native-community/datetimepicker . 봐주세요 이 스레드 몇 가지 해결 방법을 위해.

Android 날짜 및 시간 선택기의 색상을 어떻게 변경합니까?

이것은 react-native-modal-datetime-picker 질문보다 React-Native 특정 질문입니다.
문제 보기 # 29 그리고 # 106 일부 솔루션의 경우.

iOS에서 24시간을 설정하는 방법은 무엇입니까?

|_+_| prop은 Android에서만 사용할 수 있지만 선택기 시간대를 |_+_|로 설정하여 iOS에서 활성화하기 위해 작은 해킹을 사용할 수 있습니다.

react-native-datetime-picker

iOS에서 자동 로케일을 설정하는 방법

datepicker는 사용자의 장치 로케일에 따라 로케일(|_+_|, |_+_|…)을 자체적으로 조정할 수 있습니다. 그렇게 하려면 |_+_| 파일을 만들고 |__+_|에 다음을 추가합니다.

@react-native-community/datetimepicker

iOS에서 선택기가 보이지 않습니다/iOS에서 선택기가 흰색입니다.

앱이 어두운 모드에서 실행 중일 수 있습니다. 아직 선택기에 대해 React-Native에서 지원하지 않음 .
앱에서 iOS 다크 모드를 지원하지 않을 계획이라면 |_+_|에 다음을 추가하세요.

mode

그렇지 않으면 iOS 다크 모드가 지원됩니까?를 참조하십시오.

iOS 다크 모드가 지원됩니까?

iOS 13 다크 모드는 기본적으로 지원되지 않으며 약간의 수동 설정이 필요합니다.

  1. 설치 및 연결 반응 네이티브 모양
  2. 장치 색 구성표를 감지하는 데 사용하십시오. |_+_|
  3. 색 구성표를 사용하여 활성화/비활성화 |_+_| 다크 모드는 |_+_| 소품: |_+_|

스냅샷 테스트와 함께 작동하도록 하려면 어떻게 해야 합니까?

문제 보기 # 216 가능한 해결 방법입니다.

다운로드 세부 정보:

작가: mmazzarolo

깃허브: https://github.com/mmazzarolo/react-native-modal-datetime-picker

#반응 네이티브 #프로그래밍