Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native
Code

Common Reagieren Sie auf native App-Layouts: Kalenderseite

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Common React Native App Layouts.
Common React Native App Layouts: Gallery Page

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In dieser Serie erfahren Sie, wie Sie mithilfe von React Native Seitenlayouts erstellen können, die häufig in mobilen Apps verwendet werden.  Die Layouts, die Sie erstellen, sind nicht funktional. Stattdessen liegt das Hauptaugenmerk dieser Serie darauf, Ihre Hände schmutzig zu machen, indem Sie Inhalte in Ihren React Native-Apps aufstellen.

Wenn Sie neu mit dem Native React Native-Apps oder dem Styling im Allgemeinen arbeiten, lesen Sie sich mein vorheriges Tutorial durch:

Um dieser Serie zu folgen, fordere ich Sie auf, zuerst jeden Bildschirm einzeln zu erstellen, bevor Sie meine Schritt-für-Schritt-Anleitung im Tutorial lesen.  Sie werden nicht viel von diesem Tutorial profitieren, wenn Sie es lesen!  Versuchen Sie es zuerst, bevor Sie die Antworten hier nachschlagen.  Wenn es Ihnen gelingt, den ursprünglichen Bildschirm so aussehen zu lassen, vergleichen Sie Ihre Implementierung mit meiner.  Entscheide dann selbst, welches besser ist!

In diesem zweiten Teil der Serie erstellen Sie die folgende Kalenderseite:

calendar page

Kalender-Apps werden verwendet, um Ereignisse und Termine zu verfolgen, die vom Benutzer hinzugefügt wurden.  Sie werden verschiedene Variationen in der freien Wildbahn finden, aber die meisten von ihnen werden dieselben Elemente haben wie ein physischer Kalender: der aktuelle Monat und das Jahr, die Tage im Monat und die vom Benutzer hinzugefügten Ereignisse oder Termine.

Hier sind ein paar Beispiele für diese Art von Layout:

google calendar
android calendar

Projektaufbau

Der erste Schritt besteht natürlich darin, ein neues React-Native-Projekt einzurichten:

Sobald das Projekt eingerichtet ist, öffnen Sie die Datei index.android.js und ersetzen Sie den Standardcode durch Folgendes:

Erstellen Sie einen Ordner src/pages und erstellen Sie darin eine Datei Calendar.js.

Sie benötigen auch das Paket reactive-native-vector-icons. Dies wird speziell für die Navigationssymbole sowie andere Symbole verwendet, die auf der Seite benötigt werden.

Öffnen Sie die Datei android/app/build.gradle und fügen Sie einen Verweis auf das Paket hinzu:

Machen Sie dasselbe mit der android/settings.gradle-Datei, indem Sie unten Folgendes hinzufügen:

Öffnen Sie android/app/src/main/java/com/react-native-common-screens/MainApplication.java und importieren Sie das Paket:

Zuletzt initialisieren Sie das Paket:

Erstellen der Kalenderseite

Okay, jetzt, wo du versucht hast, das Layout selbst zu programmieren (kein Betrug, richtig?), Zeige ich dir, wie ich meine Implementierung erstellt habe.

Zuerst dachte ich, dies wäre die schwierigste zu implementieren, aber vertrau mir, es ist wirklich nicht so kompliziert, solange du die Grundlagen bereits kennst.  Es gibt hier einige Möglichkeiten, JavaScript-Code zum Rendern zu verwenden.

Fangen Sie mit allen Komponenten und Paketen an, die Sie benötigen:

Dieses Mal gibt es ein neues Paket, das Sie noch nicht installiert haben, und das ist lodash.  Sie brauchen nicht wirklich die ganze Bibliothek, nur die range funktion.  Dies wird verwendet, um ein Zahlenfeld basierend auf einem bestimmten Bereich zu erzeugen.  Sie können nur diese Funktion installieren, indem Sie npm install --save lodash.range auf Ihrem Terminal ausführen.

Fügen Sie den Standardcode für das Erstellen von Seiten hinzu:

Die Kopfzeile enthält drei Elemente: die Schaltfläche, um zur vorherigen Seite zurückzukehren, den Titel der aktuellen Seite und den Text, der eine benutzerfreundliche Darstellung des aktuell ausgewählten Datums anzeigt.

calendar page initial look

header hat eine flexDirection der row, so dass jedes header_item horizontal gestapelt ist.  Jedem von ihnen wird derselbe flex-Wert zugewiesen, so dass sie den gleichen Raum einnehmen.  text_center und text_right werden verwendet, um den Text innerhalb dieser header_items an der Mitte und rechts auszurichten.  Dies geschieht, weil sie standardmäßig auf der linken Seite ihres Containers ausgerichtet sind.

Sobald die Stile hinzugefügt wurden, sollte es nun so aussehen:

calendar page styled header

Als nächstes folgt der eigentliche Kalender, der in drei Teile unterteilt ist: die Kopfzeile, die Wochentage und die Kalendertage:

Der Kalenderkopf ermöglicht dem Benutzer, Jahr und Monat zu ändern.

Es gibt mindestens zwei Möglichkeiten, dies zu implementieren.  Die erste Methode besteht darin, jedes Element als ein einzelnes Element zu behandeln und justifyContent: 'space-between' auf seinen Container anzuwenden.  Die zweite Methode besteht darin, alle Elemente, die mit dem Jahr zu tun haben, zu gruppieren und diejenigen zu gruppieren, die mit dem Monat zu tun haben.

Die zweite Methode ist die, die unten angewendet wird.  Semantisch gesehen ist dies viel sinnvoller, da die Schaltfläche für die Jahresrückverfolgung, das Jahr selbst und die Schaltfläche für die Navigation alle miteinander verknüpft sind, sodass Sie sie als eine einzige Sache behandeln können, indem Sie sie in denselben Container einfügen.  Das Gleiche gilt für die Monatskontrollen.

calendar page added calendar header

Von dort aus können Sie dieselbe Technik auf diese beiden Gruppen von Komponenten in derselben Zeile anwenden.  Um Leerzeichen zwischen den beiden Schaltflächen (zurück und vorwärts) und dem Label hinzuzufügen, verwenden wir justifyContent: 'space-between'.  Wir verwenden alignItems: 'center', um alle Elemente in das Zentrum zu verschieben.  Schließlich fügen wir linkes und rechtes Padding hinzu, um mehr Platz zwischen den zwei Gruppen hinzuzufügen.

calendar page added calendar header styles

Als nächstes sind die Wochentage.  Wir verwenden eine Funktion, um diese zu rendern, da es am besten ist, einige JavaScript-Code zu verwenden, um alle Elemente zu rendern. 

Anstatt also sieben View- oder Text-Komponenten an jedem Wochentag zu rendern, können Sie einfach ein Array mit den Wochentagen erstellen.  Sie können dann mithilfe der Funktion Array.map() diese Tage durchlaufen.  Rendern Sie für jede Iteration eine Text komponente, die den Tag anzeigt.

Beachten Sie, dass im obigen Code die Funktion toUpperCase() verwendet wird, um alle Buchstaben eines jeden Tages in Großbuchstaben umzuwandeln.  React Native ist nicht mit der CSS-Eigenschaft text-transform versehen. Dies ist die einzige Möglichkeit, um Großbuchstaben zu erhalten, abgesehen von der manuellen Verwendung von Großbuchstaben.

calendar page added calendar week days

Hier ist das Styling für den Kalenderkopf:

calendar page styled calendar week days

Die Kalendertage verwenden auch eine Funktion zum Rendern der Tage:

Die renderWeeks() - Funktion verwendet die Funktion range() in lodash, um ein Array zu generieren, das die Tage des letzten Monats und die Tage des aktuellen Monats enthält. Diese beiden Arrays werden dann zusammengeführt.

Sie können das resultierende Array jedoch nicht direkt als Datenquelle für die Kalendertage verwenden.  Das liegt daran, dass, wenn Sie einfach die Elemente durchlaufen und eine Textkomponente für jeden Tag ausgeben, es keine Unterscheidung zwischen jeder Woche gibt.  Sie wissen bereits, dass Sie, um jeden Kalendertag inline zu machen, flexDirection: 'row' auf seinen Container anwenden müssen.  Wenn Sie es auf einen einzelnen Container anwenden, werden alle Kalendertage in einer einzigen Zeile angeordnet.

Das bedeutet, dass Sie für jede Woche einen separaten Container benötigen.  Die Frage ist wie.  Auch hier gibt es mindestens zwei Möglichkeiten.

Die erste Methode besteht darin, einen Variablenspeicher zu haben, der angibt, wie viele Tage aktuell ausgegeben werden, und dann eine bedingte Anweisung hinzuzufügen, die jedes Mal, wenn sie 7 ist, ein öffnendes <View> rendert, sobald es 7 ist die Variable 0 enthält, und ein schließendes </View>, setze es auf 0 zurück. Dies ist die einfachste Methode.

Aber ich werde hier eine andere Methode verwenden.  Im Folgenden wird die Funktion getWeeksArray() verwendet, um sie zu implementieren.  Diese Funktion akzeptiert das Array von Tagen und gruppiert sie in Arrays mit jeweils sieben Tagen.  Von dort aus können Sie jedes dieser Arrays durchlaufen, um den Wochencontainer zu rendern.  Wiederholen Sie dann für jede Iteration erneut die Tage innerhalb der Woche, um die Tage zu rendern.  Dies ist, was die renderDays() Funktion tut.

Hier ist die Funktion getWeeksArray():

Und hier ist die renderDays() -Funktion:

calendar page added calendar days

Fügen Sie das Styling für jede Woche (week_days) und jeden Tag (day und day_text) hinzu:

calendar page add calendar days styling

Weiter ist die Notiz, die vom Benutzer für den aktuell ausgewählten Tag und das ausgewählte Datum und die Uhrzeit hinzugefügt wurde.  Auch hier ist es besser, Elemente nach ihrem Zweck zu gruppieren, anstatt sie auf der Seite zu platzieren.  Sicherlich sind alle diese Elemente verwandt, also werden wir sie in denselben Container legen.  Bei näherem Hinsehen werden Sie jedoch feststellen, dass Sie sie weiter gruppieren können: die eigentliche Notiz und das ausgewählte Datum.  In diesem Sinne, hier ist das Markup, mit dem Sie enden werden:

calendar page add notes

Das ausgewählte Datum nimmt weniger Platz in Anspruch als die Note, daher müssen Sie den Noten einen größeren flex-Wert zuweisen.  In diesem Fall werden flex: 3 und flex: 1 verwendet, was bedeutet, dass die Noten 3/4 des verfügbaren Speicherplatzes verbrauchen und das ausgewählte Datum 1/4 verbraucht.  Sie können auch Dezimalzahlen (0,75 und 0,25) verwenden, wenn dies für Sie sinnvoller ist.  Wichtig ist, einen Standard zu wählen und dabei zu bleiben. alignItems: 'flex-end' wird für notes_selected_date verwendet, sodass alle untergeordneten Elemente nach rechts ausgerichtet sind. Dies ist erforderlich, da sie standardmäßig nach links ausgerichtet sind.

calendar page added styling to logs

Zu guter Letzt fügen wir die Logs hinzu, die denen im vorherigen Tutorial sehr ähnlich sind, also überlasse ich es Ihnen, herauszufinden, wie das Layout erreicht wird!

Hier sind die Stile:

Fazit

Das ist es!  In diesem Tutorial haben Sie eine Kalenderseite erstellt.  Wir haben ein schönes Kalenderlayout für eine App erstellt und Ihnen gezeigt, wie JavaScript-Code verwendet werden kann, um einige Einschränkungen von Flexbox auszugleichen.

Wie Sie gesehen haben, brauchten wir einen Weg, um die Anzahl der Tage hintereinander auf nur sieben Tage zu begrenzen.  Flexbox hat keine Möglichkeit, dies zu spezifizieren. Daher haben wir JavaScript verwendet, um das ursprüngliche Array von Tagen so zu rekonstruieren, dass sie in Gruppen von jeweils sieben Tagen unterteilt sind.  Von dort mussten wir nur noch jede Gruppe innerhalb einer View umbrechen und dann flexDirection flexDirection: 'row', um jede von ihnen in einer eigenen Zeile rendern zu lassen.

In einem nächsten Tutorial erfahren Sie, wie Sie das Layout implementieren, das häufig in Galerieseiten verwendet wird.  In der Zwischenzeit können Sie einige unserer anderen Tutorials zu React Native und Flexbox lesen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.