Wie können wir hier Symbole zuweisen?
Wie können wir dann auch sicherstellen, dass wir die Farbe verwenden, die
wir verwenden möchten?
Beginnen wir mit
der Farbe, bevor wir die Symbole hinzufügen. Genau wie die Funktion zum Erstellen eines Navigationsnavigators für
Stapel verwendet auch der Navigator für
die Erstellung der unteren Registerkarte ein zweites Argument. Das erste Argument ist Ihr Konfigurationsobjekt, in dem
Sie die verschiedenen Registerkarten und die Bildschirme
konfigurieren, auf die sie zeigen. Das zweite Argument ist auch ein Objekt, in dem Sie den Navigator im Allgemeinen konfigurieren können.
Dort haben Sie einige Einstellungen.
Auch hier sind offizielle Dokumente der richtige Ort, um mehr über jede
einzelne Einstellung zu erfahren. Eine der wichtigsten Einstellungen hier sind die Optionen der Registerkartenleiste.
Dies ist ein weiteres Objekt. Dort können Sie detailliert steuern, wie die Registerkartenleiste angezeigt wird und wie sie gestaltet ist.
Sie können eine inaktive Farbtonfarbe einrichten, die der Farbe der Registerkarte entspricht und derzeit nicht aktiv ist.
Sie können eine aktive Farbtonfarbe einrichten, und das ist es, was wir
hier tatsächlich benötigen. Sie können natürlich auch eine aktive Hintergrundfarbe und eine inaktive Hintergrundfarbe einrichten, um
hier auch den Hintergrund der Registerkarten zu ändern,
wenn Sie möchten und daher haben Viele Möglichkeiten, dies wirklich an Ihre Anforderungen anzupassen.
Und hier werde ich eine aktive Farbtonfarbe einstellen, weil das
alles ist, was ich hier brauche, aber natürlich können Sie damit herumspielen und auch die Hintergrundfarben und
andere Einstellungen ändern, und ich werde meine aktive Farbtonfarbe auf einen Wert für einstellen Wenn meine Farbkonstante hier importiert
wird, setze ich sie auf Farben mit Akzentfarbe.
Sie haben es vorher noch nicht benutzt, aber
jetzt werde ich es benutzen und das ist diese orange Farbe, die wir jetzt haben, und so einfach ändern wir
die Farbe, die die aktive Registerkarte hat. Nun, das ist eine Sache,
bitte beachten Sie auch, dass dies natürlich kein Symbol hinzufügt und wie würde
es, wir
sagen nichts über das Symbol, das wir hinzufügen möchten. Nun, um das Symbol hinzuzufügen, ist das einfache
Muster, das ich denke, dass Sie hier zu Ihrer Routenkonfiguration gehen, also
zu der Konfiguration, in der Sie Bildschirme Ihren Registerkarten zuordnen und das längere Formular verwenden, in dem
Sie die Bildschirmeigenschaft hinzufügen und in dem Sie dann auch hinzufügen Navigationsoptionen.
Übrigens können Sie dies natürlich auch direkt in der Komponente tun, indem Sie Navigationsoptionen
hinzufügen, wie wir es zuvor
getan haben. Da die Mahlzeiten hier jedoch tatsächlich ein Navigator sind, ist der einzige
Ort, an dem
Navigationsoptionen hinzugefügt werden können, natürlich hier oder auch hier auf Stack-Navigator erstellen.
Dort können Sie hier auch einen Navigationsoptionsschlüssel für das zweite Argument einrichten. Für dieses
Objekt übergeben Sie es als zweites Argument, um einen Stapelnavigator zu erstellen,
in dem Sie den Gesamtnavigator so konfigurieren, dass dieser Navigator aufgrund der von uns
zugewiesenen Navigationsoptionen selbst einige Navigationsoptionen erhält Der Mahlzeiten-Navigator, also für den Stapel-Navigator, sind jetzt die
Optionen, die vom Registerkarten-Navigator berücksichtigt werden, der diesen Mahlzeiten-Navigator als verschachtelten Navigator verwendet. Die Navigationsoptionen, die
wir hier festlegen können, enthalten ein Registerkartensymbol. Wir können hier ein Registerkartensymbol hinzufügen, und das Registerkartensymbol ist tatsächlich eine Funktion. Es ist kein einzelnes Symbol,
auf das Sie zeigen, sondern eine Funktion. Es ist eine Funktion, die einige Registerkarteninformationen erhält, von denen Sie
sagen könnten, dass sie hierher gehen sollten. Dies ist das Argument, das
wir automatisch erhalten, da diese Funktion natürlich vom React-Navigations- und Registerkartenleistensymbol aufgerufen wird. Diese Funktion
hier muss das gewünschte Symbol zurückgeben für diese Registerkarte zu rendern, also in diesem Fall für
die Registerkarte Mahlzeiten.
Das bedeutet, dass ich hier Symbole verwenden kann. Dazu können wir Ionics oder andere Icon-Sets, die
Sie verwenden möchten, aus @ expo / vector-icons importieren.
Sie können dieses Paket auch
hier installieren. Normalerweise sollte es bei der Arbeit mit Expo automatisch installiert werden. Sie können jedoch einfach npm
install --save @ expo / vector-icons ausführen, um sicherzustellen, dass Sie es installiert haben und einen beliebigen Symbolsatz verwenden können
Sie wollen, aber ich benutze immer die Ionicons während dieses Kurses, ich werde mich an sie halten.
Damit können Sie Ionikons als Komponente verwenden, wie Sie zuvor im Kurs gelernt haben.
Hier können wir also einfach Ionicons wie dieses zurückgeben, um ein Ionicon-Symbol zu rendern, und Sie können jetzt einen
beliebigen Icon-Namen verwenden.
Hier und hier möchte ich ios-restaurant verwenden. Dies ist einfach ein Icon,
das ich in der Liste der Icons gefunden habe. Diese Liste hier was ich auch
früher gezeigt habe, da ist es dieses ios-restaurant icon, das
ich ausgewählt habe und das ich jetzt benutze und auf das ich hier zeige.
Dies ist das Symbol, das ich rendern
möchte. Ich gebe ihm eine Größe
von 25.
Sie können damit experimentieren, aber ich fand, dass
25 hier in der Registerkartenleiste und in einer Farbe
recht anständig aussieht, und das ist jetzt wichtig für tabInfo. tintColor, weil die Farbe, die wir hier einstellen, natürlich unsere Farbtonfarbe sein sollte, die
wir hier eingestellt haben.
Jetzt könnten wir dies natürlich hart codieren, um hier Akzentfarben zu färben, aber wenn
wir es dann dort unten ändern, müssen wir uns daran erinnern, dass wir es auch dort oben ändern.
Das Gute ist, und deshalb ist dies eine Funktion, die React Navigation diese Funktion für uns
aufruft und uns einige wichtige Informationen darüber gibt, wie unsere Registerkartenleiste in diesem Registerkarten-Info-Objekt konfiguriert ist und die beispielsweise
die von uns eingerichtete Farbtonfarbe enthält Damit wir dies hier dynamisch abrufen können, um das Symbol einzufärben.
Wenn wir die Farbe für die Registerkartenleiste dort unten ändern, wird sie automatisch in unseren Symbolen dort oben
wiedergegeben. Es ist
also ein wenig praktisch, das wir hier haben, das wir hier verwenden können .
Damit rendere ich diese Symbole für die Mahlzeiten und für die Favoriten. Wir können jetzt einen ähnlichen Ansatz verwenden, diese längere Form verwenden, in der
wir den Bildschirm hier einrichten, und dann hier Navigationsoptionen hinzufügen, die mit jeder Navigation zusammengeführt werden Optionen, die wir
auf dem Favoritenbildschirm eingerichtet haben Bitte beachten Sie jedoch, dass Sie die Navigationsoptionen hier natürlich auch in
der Favoriten-Bildschirmkomponente einrichten können. Um alles an einem Ort zu halten, werde
ich dies stattdessen in meiner hier eingerichteten Navigation tun.
Das sind also meine Navigationsoptionen für
diesen Bildschirm, genau wie für diesen Navigator, den Navigator für Mahlzeiten, können wir natürlich Navigationsoptionen
für einen Bildschirm einrichten, das haben wir schließlich
im gesamten Modul getan, und dort möchte ich im Wesentlichen tun das gleiche, also kopiere ich
das einfach, füge es hier zu diesem Navigationsoptionsobjekt hinzu und das einzige, was sich hier unterscheidet, ist
das Symbol, das ich verwenden möchte, hier ist es ios-star anstelle von ios-restaurant.
Und wenn wir dies speichern, wird tatsächlich eine Fehlermeldung angezeigt, da wir jetzt, da
ich jetzt jsx verwende, React importieren müssen. So funktioniert React, da jsx hinter den Kulissen
wie Sie wissen und daher in React create element umgewandelt wird Jetzt nach dem Hinzufügen des
React-Imports hier im MealsNavigator. js Datei. Dies funktioniert und jetzt haben wir
Symbole, die automatisch unsere Farbtonfarbe annehmen. So einfach können Sie Symbole hinzufügen.
Neben dem Festlegen des Symbols möchten Sie möglicherweise auch die Beschriftung festlegen, und Sie werden feststellen, dass
die Beschriftung, die Mahlzeiten und die Favoriten standardmäßig einfach die Kennung sind, die wir hier beim Einrichten unserer Registerkartennavigation für Mahlzeiten
und Favoriten zugewiesen haben.
Das ist oft sinnvoll, aber wenn Sie eine andere Beschriftung haben möchten, können Sie in
den Navigationsoptionen Ihres Bildschirms, die Sie hier in diese
Registerkarte laden, eine Beschriftungseigenschaft für die Registerkartenleiste einrichten. Dort ist dies nur eine Zeichenfolge Wo Sie Favoriten mit einem Ausrufezeichen haben könnten
und wenn Sie dies setzen, werden Sie sehen, dass Sie jetzt Favoriten mit einem Ausrufezeichen
haben, anstatt nur Favoriten wie zuvor.
Sie können also diese Standardbezeichnung überschreiben, von der angenommen wird, dass sie normalerweise Ihre Kennung ist.
Wenn Sie eine andere möchten, können Sie sie überschreiben. Natürlich können Sie weitere Optionen
festlegen und anhängen. Sie finden einen Link zu den offiziellen Dokumenten für In diesem Navigator
erfahren Sie alles über die Optionen, die Sie im Navigator selbst einrichten können, aber auch in den Navigationsoptionen von untergeordneten Bildschirmen, also von
verschachtelten Bildschirmen oder verschachtelten Navigatoren in diesem Registerkartennavigator. Also, was wir
hier einrichten.