Reibungslose und schnelle plattformübergreifende Materialdesign-Datums- und Zeitauswahl für React Native Paper

Blog

Reibungslose und schnelle plattformübergreifende Materialdesign-Datums- und Zeitauswahl für React Native Paper

React-native-paper-dates

  • Reibungsloses und schnelles plattformübergreifendes Materialdesign Datum Picker und Zeit Picker für React Native Paper
  • Getestet auf Android, iOS und der Webplattform!
  • Verwendet die nativen Date.Intl-APIs, die im Web / iOS sofort einsatzbereit sind
  • Einfache API
  • Typsicher
  • Endloses Scrollen
  • Effizient
  • Großartige React Native Web-Unterstützung

Demo von Reactive-Native-Paper-Terminen
Das obige GIF ist träge, klicken Sie auf das Bild, um das Video mit einer besseren Bildrate anzuzeigen. ( https://www.youtube.com/watch?v=SHhQU2doTug )

Einstieg

Garn

yarn add react-native-paper-dates

Über dem Meeresspiegel

npm install react-native-paper-dates --save

Netz

Wenn Sie React-Native-Web verwenden und diese Bibliothek verwenden möchten, müssen Sie React-Window installieren.

minecraft konto passwort ändern

Garn

yarn add react-window

Über dem Meeresspiegel

npm install react-window --save

Verwendungszweck

Datumsauswahl

import * as React from 'react' import { Button } from 'react-native-paper' import { DatePickerModal } from 'react-native-paper-dates' function SingleDatePage() { const [visible, setVisible] = React.useState(false) const onDismiss = React.useCallback(() => { setVisible(false) }, [setVisible]) const onChange = React.useCallback(({ date }) => { setVisible(false) console.log({ date }) }, []) const date = new Date() return ( setVisible(true)}> Pick date ) }

Bereichsauswahl

import * as React from 'react' import { Button } from 'react-native-paper' import { DatePickerModal } from 'react-native-paper-dates' export default function RangeDatePage() { const [visible, setVisible] = React.useState(false) const onDismiss = React.useCallback(() => { setVisible(false) }, [setVisible]) const onChange = React.useCallback(({ startDate, endDate }) => { setVisible(false) console.log({ startDate, endDate }) }, []) return ( setVisible(true)}> Pick range ) }

Zeitauswahl

import * as React from 'react' import { Button } from 'react-native-paper' import { TimePickerModal } from 'react-native-paper-dates' export default function TimePickerPage() { const [visible, setVisible] = React.useState(false) const onDismiss = React.useCallback(() => { setVisible(false) }, [setVisible]) const onConfirm = React.useCallback( ({ hours, minutes }) => { setVisible(false); console.log({ hours, minutes }); }, [setVisible] ); return ( setVisible(true)}> Pick time ) }

Fahrplan

Dinge auf unserer Roadmap sind mit |_+_| gekennzeichnet. https://github.com/web-ridge/react-native-paper-dates/issues

Tipps

  • Verwenden Sie 0.14+ Version von React-Native-Web (Modal und bessere Zahleneingabe)
  • Versuchen Sie zu vermeiden, die Picker-Modals in eine scrollView zu setzen nicht möglich Verwenden Sie die folgenden Requisiten auf den umliegenden ScrollViews/Flatlists
enhancement

Dies soll verhindern, dass Sie vor dem Speichern der Arbeiten zweimal drücken müssen (1 Drücken zum Schließen der Tastatur, 1 Drücken zum Bestätigen/Schließen) ( https://github.com/facebook/react-native/issues/10138 )

wandeln Sie den passiven Sprachkonverter in den aktiven Sprachkonverter um

Android-Vorbehalte

Sie müssen ein Polyfill für die Intl API auf Android hinzufügen, wenn:

  • Sie haben Hermes aktiviert ( https://github.com/facebook/hermes/issues/23 )
  • Sie haben Hermes deaktiviert und möchten Gebietsschemas außerhalb von en-US unterstützen und Sie haben die org.webkit:android-jsc-intl:+ Variante nicht in Ihrer App/build.gradle aktiviert

Installieren Sie Polyfills mit Garn

keyboardDismissMode='on-drag' keyboardShouldPersistTaps='handled' contentInsetAdjustmentBehavior='always'

oder npm

yarn add react-native-localize @formatjs/intl-pluralrules @formatjs/intl-getcanonicallocales @formatjs/intl-listformat @formatjs/intl-displaynames @formatjs/intl-locale @formatjs/intl-datetimeformat @formatjs/intl-numberformat @formatjs/intl-relativetimeformat

npm install react-native-localize @formatjs/intl-pluralrules @formatjs/intl-getcanonicallocales @formatjs/intl-listformat @formatjs/intl-displaynames @formatjs/intl-locale @formatjs/intl-datetimeformat @formatjs/intl-numberformat @formatjs/intl-relativetimeformat --save

Google-Formular-Dropdown aus dem Blatt
./index.js

Beitragen

Siehe die Beitragsleitfaden um zu lernen, wie Sie zum Repository und zum Entwicklungsworkflow beitragen können.

Lizenz

MIT

Über uns

Wir möchten, dass Entwickler mit modernen Tools wie GraphQL, Golang, React Native Software schneller erstellen können.

Folge uns auf Twitter:

Diese gefallen dir wahrscheinlich

Download-Details:

Autor: Web-Grat

Demo: https://www.reactnativepaperdates.com/

wie man formulardaten in datenbank mit php speichert

Quellcode: https://github.com/web-ridge/react-native-paper-dates

#reagieren #reagieren-native #mobile-apps