React Native datumu laika atlasītājs operētājsistēmām Android un iOS

Blogs

React Native datumu laika atlasītājs operētājsistēmām Android un iOS

rea-native-modal-datetime-picker. Deklarējošs starpplatformu reaģējošs datuma un laika atlasītājs.








Šī bibliotēka piedāvā starpplatformu saskarni, kurā tiek parādīts datuma atlasītājs un laika atlasītājs modālā, nodrošinot vienotu lietotāju un izstrādātāju pieredzi.



Zem pārsega šī bibliotēka izmanto @react-native-community/datetimepicker .



Iestatīšana (projektiem, kas nav Expo)

Ja jūsu projekts netiek izmantots Izstāde , instalējiet bibliotēku un kopienas datuma/laika atlasītāju, izmantojot npm vai dziju:






reddit/r/ufc straume
# 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

Lūdzu, ņemiet vērā, ka | _+_ | pakete ir vietējais modulis, tāpēc tas var prasīt manuālu saistīšanu .

Iestatīšana (Expo projektiem)

Ja jūsu projekts izmanto Izstāde , instalējiet bibliotēku un kopienas datuma/laika atlasītāju, izmantojot CLI Expo :

@react-native-community/datetimepicker

Lietošana

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

Pieejamie rekvizīti

Vārds Tips Noklusējuma Apraksts
CancelTextIOS virkne “Atcelt” Atcelšanas pogas etiķete (iOS)
apstiprinātTextIOS virkne 'Apstiprināt' Apstiprināšanas pogas etiķete (iOS)
customCancelButtonIOS komponents Ignorē noklusējuma atcelšanas pogas komponentu (iOS)
customConfirmButtonIOS komponents Ignorē noklusējuma apstiprināšanas pogas komponentu (iOS)
customHeaderIOS komponents Ignorē noklusējuma galvenes komponentu (iOS)
customPickerIOS komponents Ignorē noklusējuma vietējā atlasītāja komponentu (iOS)
datums obj jauns datums () Sākotnēji izvēlētais datums/laiks
headerTextIOS virkne Izvēlieties datumu Galvenes virsraksta teksts (iOS)
isDarkModeEnabled bool nepatiesa Vai ierīce izmanto tumšu motīvu?
isVisible bool nepatiesa Vai rādīt datuma un laika atlasītāju?
modalStyleIOS stils Modālā satura stils (iOS)
režīmu virkne datums Izvēlieties “datums”, “laiks” un “datuma laiks”
onCancel funkciju OBLIGĀTS Funkcija aicināja atlaist
onConfirm funkciju OBLIGĀTS Funkcija izsaukta izvēlētajā datumā vai laikā. Tas atgriež datumu vai laiku kā JavaScript datuma objektu
onHide funkciju () => nulle Izsaukta pēc paslēpšanas animācijas
pickerContainerStyleIOS stils Atlasītāja konteinera stils (iOS)

Lūdzu, ievērojiet to visi 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; tiek atbalstīti arī rekvizīti !

bieži uzdotie jautājumi

Komponents nedarbojas, kā paredzēts

Zem pārsega | _+_ | izmanto @react-native-community/react-native-datetimepicker . Pirms ziņojat par kļūdu, mēģiniet nomainīt | _+_ | ar react-native-modal-datetime-picker un, ja problēma joprojām pastāv, pārbaudiet, vai par to jau ir ziņots kā par problēmu.

Kā es varu rādīt laika atlasītāju datuma atlasītāja vietā?

Iestatiet | _+_ | atbalstīt | _+_ |. Varat arī parādīt gan datuma atlasītāju, gan laika atlasītāju vienā solī, iestatot | _+_ | atbalstīt | _+_ |.

Nevaru iestatīt atlasītājā sākotnējo datumu

Lūdzu, pārliecinieties, vai izmantojat | _+_ | butaforijas (nevis | _+_ | viens).

Android ierīcē atlasītājs tiek rādīts divas reizes

Šķiet, ka tas ir zināms jautājums @react-native-community/datetimepicker . Lūdzu apskati šo pavedienu pāris risinājumiem.

Kā mainīt Android datuma un laika atlasītāju krāsu?

Tas ir vairāk specifisks jautājums par React-Native, nevis React-native-modal-datetime-picker.
Skatīt jautājumu # 29 un # 106 dažiem risinājumiem.

Kā iestatīt 24 stundas iOS?

| _+_ | prop ir pieejams tikai operētājsistēmā Android, taču varat to izmantot, lai to iespējotu operētājsistēmā iOS, iestatot atlasītāja laika joslu uz | _+_ |:

react-native-datetime-picker

Kā es varu iestatīt automātisko lokalizāciju operētājsistēmā iOS

Datuma atlasītājs pats var pielāgot lokalizāciju (| _+_ |, | _+_ |…) atkarībā no lietotāja ierīces lokalizācijas. Lai to izdarītu, rediģējiet savu | _+_ | failu un pievienojiet | _+_ |.

@react-native-community/datetimepicker

Es neredzu atlasītāju operētājsistēmā iOS/atlasītājs ir balts operētājsistēmā iOS

Jūsu lietotne, iespējams, darbojas tumšajā režīmā atlasītājiem vēl neatbalsta React-Native .
Ja savā lietotnē neplānojat atbalstīt iOS tumšo režīmu, pievienojiet savai | _+_ |

mode

Pretējā gadījumā skatiet sadaļu Vai iOS tumšais režīms tiek atbalstīts?

Vai iOS tumšais režīms tiek atbalstīts?

iOS 13 tumšais režīms vēl netiek atbalstīts, un tam ir nepieciešama manuāla iestatīšana.

  1. Instalējiet un izveidojiet saiti reaģēt-dzimtā-izskats
  2. Izmantojiet to, lai noteiktu ierīces krāsu shēmu: | _+_ |
  3. Izmantojiet krāsu shēmu, lai iespējotu/atspējotu | _+_ | tumšais režīms caur | _+_ | rekvizīts: | _+_ |

Kā panākt, lai tas darbotos ar momentuzņēmumu pārbaudi?

Skatīt jautājumu # 216 par iespējamo risinājumu.

Lejupielādes informācija:

Autors: mmazzarolo

GitHub: https://github.com/mmazzarolo/react-native-modal-datetime-picker

#reaģēt-dzimtā #programmēšana