Ein React Native Datetime-Picker für Android und iOS

Blog

Ein React Native Datetime-Picker für Android und iOS

React-native-modal-datetime-picker .Ein deklarativer, plattformübergreifender reaktiver Datums- und Uhrzeitpicker.



Diese Bibliothek stellt eine plattformübergreifende Schnittstelle zum Anzeigen der nativen Datums- und Zeitauswahl in einem Modal bereit und bietet so eine einheitliche Benutzer- und Entwicklererfahrung.



Unter der Haube verwendet diese Bibliothek @react-native-community/datetimepicker .

Einrichtung (für Nicht-Expo-Projekte)

Wenn Ihr Projekt nicht verwendet Messe , installieren Sie die Bibliothek und die Datums-/Uhrzeitauswahl der Community mit npm oder Garn:



API-Tutorials für Anfänger
# 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

Bitte beachten Sie, dass die |_+_| Paket ist ein natives Modul, also es könnte eine manuelle Verknüpfung erfordern .

Einrichtung (für Expo-Projekte)

Wenn Ihr Projekt verwendet Messe , installieren Sie die Bibliothek und die Datums-/Uhrzeitauswahl der Community mithilfe der CLI-Ausstellung :

@react-native-community/datetimepicker

Verwendungszweck

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

Verfügbare Requisiten

Name Typ Standard Beschreibung
abbrechenTextIOS Schnur 'Abbrechen' Die Beschriftung der Abbrechen-Schaltfläche (iOS)
bestätigenTextIOS Schnur 'Bestätigen Sie' Die Beschriftung der Bestätigungstaste (iOS)
customCancelButtonIOS Komponente Überschreibt die standardmäßige Abbruchschaltflächenkomponente (iOS)
customConfirmButtonIOS Komponente Überschreibt die standardmäßige Bestätigungsschaltflächenkomponente (iOS)
customHeaderIOS Komponente Überschreibt die Standardheaderkomponente (iOS)
customPickerIOS Komponente Überschreibt die standardmäßige native Auswahlkomponente (iOS)
Datum obj neues Datum() Anfänglich ausgewähltes Datum/Uhrzeit
headerTextIOS Schnur Wählen sie ein Datum Der Titeltext der Kopfzeile (iOS)
isDarkModeEnabled bool falsch Verwendet das Gerät ein dunkles Design?
ist sichtbar bool falsch Datum/Uhrzeit-Auswahl anzeigen?
modalStyleIOS Stil Stil des modalen Inhalts (iOS)
Modus Schnur Datum Wählen Sie zwischen „Datum“, „Uhrzeit“ und „Datum/Uhrzeit“
onAbbrechen Funktion ERFORDERLICH Funktion beim Entlassen aufgerufen
onBestätigen Funktion ERFORDERLICH Funktion, die am ausgewählten Datum oder Uhrzeit aufgerufen wird. Es gibt das Datum oder die Uhrzeit als JavaScript-Datumsobjekt zurück
onHide Funktion () => null Wird nach der Ausblenden-Animation aufgerufen
pickerContainerStyleIOS Stil Der Stil des Picker-Containers (iOS)

Bitte beachte das all die 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; Requisiten werden auch unterstützt !

Häufig gestellte Fragen

Die Komponente funktioniert nicht wie erwartet

Unter der Haube |_+_| Verwendet @react-native-community/react-native-datetimepicker . Bevor Sie einen Fehler melden, versuchen Sie, |_+_| . zu tauschen mit react-native-modal-datetime-picker Wenn das Problem weiterhin besteht, überprüfen Sie, ob es dort bereits als Problem gemeldet wurde.

Wie kann ich die Zeitauswahl anstelle der Datumsauswahl anzeigen?

Stellen Sie |_+_| . ein stützen Sie auf |_+_|. Sie können sowohl den Datumswähler als auch den Zeitwähler in einem Schritt anzeigen, indem Sie die |_+_| stütze auf |_+_|.

Ich kann das Anfangsdatum in der Auswahl nicht festlegen

Bitte stellen Sie sicher, dass Sie |_+_| . verwenden Requisiten (und nicht die |_+_|).

Die Auswahl wird auf Android zweimal angezeigt

Dies scheint ein bekanntes Problem zu sein @react-native-community/datetimepicker . Bitte sehen dieser Thread für ein paar Workarounds.

Wie ändere ich die Farbe der Android-Datums- und Uhrzeitauswahl?

Dies ist eher eine React-Native-spezifische Frage als eine React-Native-Modal-Datetime-Picker.
Siehe Problem # 29 und # 106 für einige Lösungen.

Wie stelle ich 24 Stunden in iOS ein?

Die |_+_| prop ist nur auf Android verfügbar, aber Sie können einen kleinen Hack verwenden, um es unter iOS zu aktivieren, indem Sie die Zeitzone der Auswahl auf |_+_| setzen:

react-native-datetime-picker

Wie kann ich ein automatisches Gebietsschema in iOS festlegen?

Der Datepicker kann das Gebietsschema (|_+_|, |_+_|…) abhängig vom Gerätegebietsschema des Benutzers selbst anpassen. Bearbeiten Sie dazu Ihre |_+_| Datei und fügen Sie Folgendes zu |_+_| hinzu.

@react-native-community/datetimepicker

Ich kann die Auswahl unter iOS nicht sehen/die Auswahl ist unter iOS weiß

Ihre App wird wahrscheinlich im Dunkelmodus ausgeführt, d. h. noch nicht von React-Native für die Picker unterstützt .
Wenn Sie den iOS-Dunkelmodus in Ihrer App nicht unterstützen möchten, fügen Sie Folgendes zu Ihrem |_+_| hinzu:

mode

Andernfalls lesen Sie den Abschnitt Wird der iOS-Dunkelmodus unterstützt?

Wird der iOS-Dunkelmodus unterstützt?

Der dunkle Modus von iOS 13 wird noch nicht standardmäßig unterstützt und erfordert ein wenig manuelle Einrichtung:

  1. Installieren und verlinken reagieren-native-Auftritt
  2. Verwenden Sie es, um das Farbschema des Geräts zu erkennen: |_+_|
  3. Verwenden Sie das Farbschema, um die |_+_| . zu aktivieren/deaktivieren Dunkelmodus durch die |_+_| Requisite: |_+_|

Wie funktioniert es mit Snapshot-Tests?

Siehe Problem # 216 für einen möglichen Workaround.

Download-Details:

Autor: Mmazzarolo

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

#reagieren-native #programmierung