Beginnen wir mit dem Styling der Schublade auf dem
Filterbildschirm. Das ist nicht
schwierig, das haben wir schon früher gemacht. Im Filternavigator hier im
Stapelnavigator müssen wir am Ende nur die Standardnavigationsoptionen einrichten, die wir
auch für den Lieblingsnavigator in unserem Essensnavigator verwenden. Wir können also einfach dieses zweite Konfigurationsobjekt hier kopieren
und es hier als zweites Argument zum Erstellen des Stack-Navigators in unseren Filter-Navigator einfügen.
Natürlich können wir diese auskommentierte
Zeile entfernen, aber mit dieser einfachen Änderung stellen wir sicher, dass wir hier denselben Navigationsleisten- oder
Aktionsleistenstil verwenden.
Das ist also eine einfache, aber nützliche Änderung. Was ist nun mit dem
Aussehen hier und dem Stil der Schublade?
Zum einen können Sie, wenn Sie die gesamte Schublade steuern und die Anordnung der Elemente dort ändern möchten, nicht diese Standardeinstellung verwenden,
eine Liste mit Welleneffekt hier auf Android und einen anderen Effekt auf iOS zu haben, aber
ich denke,
das ist eine nette Standardeinstellung was ich eigentlich nicht ändern will.
Wenn Sie möchten, können Sie jedoch die gesamte Komponente ersetzen, die hier gerendert und angehängt ist. Sie finden
einen Link zu den offiziellen Dokumenten, in denen Sie mehr darüber erfahren können, falls Sie dies
anpassen müssen.
Was ich natürlich ändern möchte, ist der Stil dieser Elemente und der Text, der hier angezeigt wird.
Nun, das ist
nicht allzu schwierig. Beginnen wir mit dem Text. Wie Sie sehen können, werden als Text standardmäßig diese Bezeichner
hier verwendet, die Lieblingsfilter für Mahlzeiten.
Jetzt kann es das natürlich, aber die Favoriten der Mahlzeiten, das ist nicht
wirklich ein Text, den wir unseren Benutzern zeigen möchten.
Daher möchte ich dies überschreiben und wir können dies mit den guten alten Navigationsoptionen
tun, die wir wie zuvor mit den Registerkarten, auf denen wir auch den Beschriftungstext steuern können, auf
unseren Stapelnavigatoren festlegen müssen, entweder beim Erstellen der Stack-Navigator: Neben der Einstellung der Standardnavigationsoptionen für jeden Bildschirm
in diesem Navigator können wir Navigationsoptionen für den gesamten Navigator selbst festlegen. Dies gilt
dann nicht für die Bildschirme im Navigator, sondern für den Navigator, wenn er
als Bildschirm
verwendet wird Hier und da könnten wir ein Schubladenetikett setzen und dies auf Filter mit ein paar Ausrufezeichen setzen, nur damit
wir sehen, dass dies einen Effekt hat.
Jetzt sehen wir das
hier, also können wir dies hier einstellen. eine Option.
Alternativ können wir hier beim Erstellen des Schubladen-Navigators das längere Formular verwenden, in dem wir
einen Bildschirm einrichten und dann hier Navigationsoptionen einrichten. Dies sind einfach nur Alternativen, bei
denen keines der beiden
besser oder schlechter
ist. Sie können eines von beiden verwenden sie und jetzt hier werde ich Schubladenetikett auf
Mahlzeiten setzen, sagen wir, das macht für mich mehr Sinn als Mahlzeiten Favoriten.
Wenn ich jetzt die Schublade öffne, sehe ich Mahlzeiten und Filter. Bei Filtern habe ich den Titel jetzt
nicht überschrieben, da ich meine Kennung standardmäßig verwenden kann, bei
Mahlzeiten habe ich sie jedoch überschrieben.
Was ist nun mit dem Styling, der Farbe und so weiter?
Nun, das kann natürlich auch kontrolliert werden. Nun, genau wie zuvor mit beispielsweise den Registerkarten, bei denen wir
auch ein zweites Argument übergeben könnten, um einen unteren Registerkartennavigator zu erstellen, um das Layout und das Design der Registerkarten
im Allgemeinen
zu steuern, können wir dasselbe für die Schublade tun. Um einen Schubladen-Navigator zu erstellen, können wir ein zweites Argument übergeben, bei
dem es sich um ein Objekt handelt, das für den Schubladen-Navigator selbst konfiguriert
ist. Dort erhalten wir einige Optionen.
Wiederum erhalten Sie in offiziellen Dokumenten eine vollständige Liste aller Konfigurationsmöglichkeiten. Sie haben beispielsweise
Ihre Inhaltsoptionen, mit denen Sie den Inhalt in der Schublade steuern können, sodass Sie mit den Schubladenelementen
bis zum Ende eine Reihe von Inhalten haben Einstellungen, die Sie einrichten können, z. B.
können Sie eine aktive Farbtonfarbe festlegen, die im Wesentlichen zum Färben eines Elements dient, wenn es aktiv ist, und dort
können wir Farben festlegen, Akzentfarbe, wenn wir möchten, anstatt diese blaue Standardeinstellung und zu verwenden Daher ist dies jetzt
orange
und so einfach ist es, dies zu ändern. Dies ist alles, was wir tun müssen.
Wenn wir nun auch die dort verwendete Schriftart
ändern möchten, können wir dies auch tun. Neben dem Festlegen einer aktiven Farbtonfarbe hier in den Inhaltsoptionen
können wir hier
einen Beschriftungsstil einrichten, der ein Stilobjekt verwendet, das auf die zugrunde liegende Textkomponente in der Schublade
angewendet wird, sodass wir dort beispielsweise die Ausrichtung von
Text einrichten können, wenn Wir möchten oder in meinem Fall hier einfach die Schriftfamilie einrichten und dies so einstellen, dass Sans geöffnet wird, vielleicht so,
nicht einmal die fett gedruckte Version. Wenn wir das tun, sehen wir deutlich einen Unterschied.
Jetzt werde ich es wieder auf Fett setzen, weil das schöner ist, aber um einen Unterschied zu sehen,
denke ich, dass es ohne Fett klar war.
Jetzt verwenden wir hier unsere
eigene Schriftart, die fette Version und unsere
eigene Farbe,
und das ist ziemlich ordentlich, würde ich sagen, das gleiche funktioniert natürlich auch auf Android.
Auf diese Weise können Sie mit Ihrer Schublade
arbeiten, alles dort stylen und damit
die wichtigsten Navigationsmuster kennenlernen, die Sie mithilfe der React-Navigation zu Ihrer App
hinzufügen können.
Nun, da ich in diesem Modul mehrmals betont habe, gibt es natürlich viel zu konfigurieren. Alle diese Navigatoren haben unterschiedliche
Navigationsoptionen und -einstellungen für die Navigatoren selbst. Schauen Sie sich daher auf jeden Fall die offiziellen
Dokumente an und spielen Sie einfach mit den verschiedenen Einstellungen, die Sie dort sehen Experimentieren
Sie mit dem, was Sie tun können. Die Dinge, die ich hier gezeigt habe und die Dinge, die wir hier geändert haben,
sind wahrscheinlich die häufigsten Dinge, die Sie anpassen möchten. Deshalb habe ich sie hier gezeigt, aber
es gibt wieder so viel zu
tun. Schauen Sie sich auf jeden Fall die offiziellen Dokumente an. Für diese App ist der
Navigationsteil im Grunde genommen erledigt, es gibt nicht zu
viel hinzuzufügen. Jetzt ist es Zeit,
das allgemeine Styling zu überdenken. Stellen Sie beispielsweise sicher, dass wir
überall die richtigen Schriftarten verwenden, auch in den Registerkarten und in der Kopfzeile und für Beispiel auch für
den Text hier, den wir momentan nicht haben und dann auch
den Rest der App mit etwas Fleisch füllen. Zum Beispiel die Detailseite hier, die
momentan noch Dummy-Inhalte enthält, und auch unsere Filterseite, die ebenfalls nur Dummy-Inhalte enthält.
Das werde ich im Rest dieses Moduls
tun. Danach stellen wir im nächsten Modul sicher, dass wir mehr Logik hinzufügen und dass wir beispielsweise etwas
als Favorit markieren und es dann zu den Favoriten hinzufügen können Registerkarte, die derzeit nicht funktioniert.
Aber jetzt beenden wir das Styling und fügen den Rest des Layouts und des Inhalts zu dieser App hinzu.