Damit haben wir Tabs hinzugefügt und ja, bei
Favoriten tun wir noch
nichts. Das werden
wir befolgen, aber wir haben zumindest Tabs. Bevor wir an den Favoriten arbeiten, lassen Sie
uns etwas mehr an den Registerkarten arbeiten, da wir derzeit Registerkarten für Android haben, die nicht wirklich so aussehen,
wie wir es von Android-Registerkarten erwarten würden. Wenn Sie mich fragen, sieht dies eher wie iOS-Registerkarten aus .
Sicher funktioniert es und Sie können das beibehalten, wenn
dies der gewünschte Stil ist, nichts Falsches daran, aber es wäre schöner, vielleicht ein Android-spezifischeres Aussehen zu
haben, und dafür haben wir einen separaten Navigator, den wir erstellen können, obwohl wir ihn installieren müssen ein zusätzliches Paket dafür,
also lass uns das machen.
Lassen Sie mich diesen Server hier beenden und npm install
--save ausführen. Nun, das sind React-Navigation-Material-Bottom-Tabs. Übrigens gibt es auch React-Navigation-Material-Top-Tabs. Darauf werde ich nicht näher eingehen In diesem Kurs
hier, aber im Anhang finden Sie auch einen Link, über den Sie mehr über
diesen alternativen Navigator erfahren können. Wir werden hier den Navigator für
die unteren Registerkarten des Materials verwenden und dieses Paket installieren. So starten wir dies.
Warten wir also, bis die Installation abgeschlossen ist, und installieren wir anschließend
ein weiteres Paket, das wir auch mit npm install --save und dem reaktionsnativen Papier benötigen. Lassen Sie uns dies ebenfalls installieren. Sobald diese Installation abgeschlossen ist, starten wir
den Expo-Server
mit npm start erneut,
da wir jetzt Pakete installiert haben, die uns
beim Rendern eines alternativen Tab-Navigators helfen. Er ist dankenswerterweise sehr einfach zu
verwenden und hat fast das gleiche oder das gleiche Ähnliche Konfigurationsoptionen wie der
Navigator auf der unteren Registerkarte, insbesondere wenn es darum geht, wie
Symbole eingerichtet werden und so weiter. Im Anhang finden Sie alle Dokumente für
diesen alternativen
Navigator und für diesen weiteren alternativen Navigator, den ich erwähnt habe. Lassen Sie uns diesen verwenden, indem Sie hier aus diesem
neu installierten Navigatorpaket für das Reaktivierungsnavigationsmaterial-Bottom-Tabs importieren. Von dort aus können wir das Create importieren Material unten Tab
Navigator Funktion hier.
Stellen Sie jetzt sicher, dass Sie auch Plattformimporte haben, da wir diese jetzt benötigen, da
ich diesen Navigator nur verwenden möchte, wenn wir unter
Android den Navigator zum Erstellen der unteren Registerkarte erstellen. Hier können wir also prüfen, ob Plattform. os ist gleich Android und in diesem Fall
möchte ich die neue Funktion zum Erstellen von Navigatoren für untere Registerkarten verwenden, die ich gerade importiert
habe. Andernfalls
verwenden wir nach dem Doppelpunkt den Navigator für untere Registerkarten, den wir in der vorherigen Vorlesung eingerichtet haben.
Das lässt uns natürlich eine Frage offen: Wie funktioniert der Navigator für die untere Registerkarte des Materials? Wie konfigurieren wir
das?
Und die gute Nachricht hier ist, dass es im Allgemeinen genauso funktioniert wie der Navigator auf der unteren Registerkarte.
Es gibt einige Details, die Sie im Registerkartennavigator selbst konfigurieren
können. So unterscheidet sich beispielsweise die Farbe, die Sie annehmen
müssen, wann und so weiter. Dies hängt jedoch davon ab, wie Sie Ihre Registerkarten einrichten
und Bildschirme und Symbole einrichten Sie können die gesamte Bildschirmkonfiguration hier verwenden, sie von hier
aus ausschneiden und in einer separaten Konstante speichern, die ich hier tabScreenConfig nennen
werde. Sie können
sie beliebig benennen, da sie wiederverwendet werden kann, und jetzt die tabScreenConfig als erstes Argument verwenden
Sowohl im unteren Tab-Navigator als auch im unteren Material-Tab-Navigator bleibt uns nur ein alternatives zweites Argument, das
wir an den unteren Material-Tab-Navigator und nur an den unteren Tab-Navigator übergeben.
Dieses zweite Argument, das wir übergeben, dieses Objekt, das wir als zweites Argument übergeben, wie Sie gelernt
haben, ermöglicht es uns, den Registerkartennavigator selbst zu konfigurieren, z. B. Registerkartenleistenoptionen wie die aktive
Farbtonfarbe einzurichten, die sich aufgrund des unteren Registerkartennavigators des Materials etwas unterscheiden Wir haben keine Optionen für die Registerkartenleiste eingerichtet, um unsere aktive
Farbtonfarbe zu konfigurieren. Stattdessen haben wir hier
in diesem Objekt selbst direkt eine aktive Farbtonfarbe. Im unteren Registerkartennavigator hatten wir diese in einem verschachtelten Objekt
in den Optionen der Registerkartenleiste Das haben
wir hier nicht.
Stattdessen setzen wir hier einfach eine solche aktive Tönungsfarbe auf Akzentfarbe und es gibt auch andere
Einstellungen. Sie können beispielsweise die Verschiebung auf wahr setzen und ich werde in einer
Sekunde zeigen, was
dies und was falsch macht, und damit das war es fürs Erste. Wenn wir dies jetzt speichern, wird unser Projekt neu erstellt und auf dem
Bildschirm neu geladen. Wir haben die gleichen Registerkarten wie zuvor
unter
iOS, die sich nicht geändert
haben, aber unter Android haben wir jetzt hier den Registerkarten-Navigator
mit mehr Material, wo wir können Wechseln Sie jetzt auch so und das ist dieser
Verschiebungseffekt, den Sie hier sehen, dass die Registerkarten wachsen, dass die Beschriftung nur auf der Registerkarte vorhanden ist, die
aktiv ist, und wenn
Sie die Verschiebung hier übrigens auf falsch setzen, haben Sie dies einfach nicht Effekt, dann haben
Sie Ihre Etiketten immer auch auf Android.
Das ist jetzt ein Look, der ein bisschen mehr wie Android
aussieht, würde ich sagen, und es ist daher ein Look, den ich hier haben möchte, und Sie können diesen noch weiter gehen.
Angenommen, wir möchten hier die gesamte Hintergrundfarbe der Registerkartenleiste
ändern, je nachdem,
welche Registerkarte ausgewählt ist, und einen schönen Welleneffekt erzielen, der dies auf dem Weg ändert.
Dazu können wir zu unserer Bildschirmkonfiguration und dort zu den Navigationsoptionen gehen und dort haben
wir das Registerkartensymbol.
Wir können hier auch eine Registerkartenleistenfarbe einrichten, wenn diese Registerkarte sozusagen ausgewählt ist, und
diese beispielsweise auf die Primärfarbe der Farben einstellen. Dies ist jetzt wichtig. Dies wirkt sich nur aus, wenn Sie die Verschiebung auf "wahr" setzen,
andernfalls wird diese Farbleiste der Registerkartenleiste angezeigt Was ich hier einrichte, hat keine Auswirkung, da nur der Verschiebungseffekt dies unterstützt und
was wir jetzt haben. Der Effekt, den wir jetzt haben, ist, dass wenn ich dies speichere, das gleiche
Aussehen auf iOS erhalten wird, weil es dort eine Registerkartenleiste gibt Farbe hat keine Wirkung, aber jetzt
sehen Sie, wir haben wirklich unsere Primärfarbe als Hintergrund, wenn Mahlzeiten ausgewählt werden,
wenn wir Favoriten auswählen, die sich in die andere Farbe ändern.
Jetzt sieht diese Änderung natürlich nicht mehr so schön aus, und deshalb können wir sie einfach ändern, indem wir unserem
Favoritenbildschirm auch eine eigene Farbe in der Registerkartenleiste geben.
In den Navigationsoptionen des Favoritenbildschirms neben dem Symbol für die Registerkartenleiste können wir also
festlegen, dass die Farbe der Registerkartenleiste dort die Farbe betont. Jetzt haben wir eine andersfarbige Registerkartenleiste, die von unserer Primärfarbe
für Mahlzeiten abweicht Hier zu dieser Akzentfarbe für Favoriten mit diesem schönen Welleneffekt und natürlich ist der Nachteil,
dass wir das Symbol dann nicht sehen, weil die Akzentfarbe für die Tab-Balkenfarbe keine gute
Wahl
ist, wenn unsere Farbtonfarbe auch eine Akzentfarbe ist.
Wenn wir diesen Effekt verwenden, möchten wir hier möglicherweise Weiß als Farbton verwenden, den wir immer
sowohl gegen die Primär- als auch gegen die Akzentfarbe sehen können. Daher möchten wir hier für die aktive Farbtonfarbe möglicherweise Weiß
anstelle unseres Akzents verwenden Farbe, weil Weiß für beide Registerkarten funktioniert, egal ob die Registerkartenleiste dann in der
Primärfarbe, dem dunklen Lila oder in der Akzentfarbe, dem Orange und daher sehen Sie, dass wir diesen Effekt
hier haben und diese schöne
Welligkeit sich ändert die andere Registerkarte hier für Favoriten. Und ich denke, das ist eine ziemlich süße und
einfach zu implementierende Änderung, die dies auf Android großartig aussehen lässt und uns sicherlich ein markanteres Android-ähnliches Aussehen verleiht,
während das Standard-iOS-Aussehen beibehalten wird, das Sie auf dieser Plattform erwarten würden. Es ist wirklich einfach, es so zu implementieren,
wie Sie es möchten kann sagen.
Nun eine kurze Randnotiz: Wenn Sie diesen Verschiebungseffekt, den ich hier
verwenden möchte, nicht verwenden möchten, ihn aber nicht verwenden möchten, werden Sie möglicherweise
feststellen, dass die Hintergrundfarbe Ihrer Registerkarten unter Android gleich ist nicht deine Primärfarbe, sondern diese etwas hellere lila, lila-bläuliche Farbe.
Normalerweise möchten Sie dies natürlich auch ändern, und wie
Sie sehen, hat die Farbe der Registerkartenleiste einfach keine Auswirkung.
Dies funktioniert nur beim Verschieben.
Wenn Sie nun Ihre Hintergrundfarbe für die gesamte Registerkartenleiste im nicht verschiebbaren Fall ändern möchten,
müssen Sie nur hier die Konfiguration Ihres Registerkartennavigators selbst vornehmen, da dies jetzt die gesamte Registerkartenleiste betrifft.
Sie
können sie einrichten eine Balkenstileigenschaft und das ist einfach ein Stilobjekt, bei dem Sie
beispielsweise die Hintergrundfarbe auf Primärfarben setzen können, und dies ändert einfach die
Hintergrundfarbe der Navigationsleiste für unsere untere Android-Leiste hier.
So können Sie dies dann ändern, wenn Sie das Verschiebungsmuster hier nicht verwenden möchten,
den Verschiebungslook.
Ich werde das Verschieben jedoch wieder
einschalten. Wir werden dies wieder auf "true" setzen, da mir diese andersfarbige Registerkartenleiste wirklich gefällt. Ich denke,
das ist ein wirklich schöner Look mit diesem Welleneffekt, der die Farbe ändert, und so einfach ist es,
andere zu implementieren Registerkartenleisten.
Jetzt gibt es wieder eine Reihe von Konfigurationsoptionen sowohl für die Registerkartenleiste selbst als auch für die Navigationsoptionen der Bildschirme,
die Sie in Ihrer Registerkartenleiste haben. Daher finden Sie im Anhang offizielle Dokumente, in denen Sie in jede
einzelne Option eintauchen und sie erkunden können sie und spielen mit ihnen herum.