Wir extrahieren unsere Kategorie hier in unserer Komponente, weil wir dort unsere Parameter mithilfe
von Navigationsrequisiten abrufen.
Jetzt möchte ich den Titel allerdings in meinem Header ausgeben.
Jetzt haben Sie gelernt, wie Sie diesen Header mithilfe der Navigationsoptionen konfigurieren können. In
der Kategorie Mahlzeit Mahlzeit Bildschirmkomponente und daher ist dies eine Funktion, dies ist ein Objekt, wir können
Navigationsoptionen hinzufügen und Sie haben gelernt, dass dies eine ist Javascript-Objekt,
in dem Sie einen Header-Titel und einen Header-Titel einrichten können, sollte mein Kategoriename sein.
Das Problem hierbei ist, dass hier eine ausgewählte Kategorie verfügbar ist, die sich jedoch innerhalb der Komponentenfunktion befindet.
Darauf können wir hier natürlich nicht zugreifen, da dies nach der
Funktionsdefinition geschieht.
Wir haben also keinen Zugriff auf die Kategorie, die wir dort identifiziert
haben. Das ist ein Problem.
Das Gute ist, dass Navigationsoptionen ein Objekt sein können, wenn Sie statische fest codierte Konfigurationswerte haben, aber es kann auch eine
Funktion sein, wenn Sie eine dynamische Konfiguration benötigen, die von sich ändernden Daten abhängt, und natürlich ändern sich die Daten,
von denen wir hier abhängen, weil wir ' Wenn Sie ein und denselben Bildschirm
für verschiedene Kategorien verwenden, ändern sich die ID und der Titel der Kategorie jedes Mal, wenn
wir diesen Bildschirm verwenden. Einmal verwenden wir es für
die italienische Kategorie, das nächste Mal für die exotische Kategorie. Diese Funktion, die Sie auch verwenden können, wird
natürlich von der React-Navigation unterstützt.
Wenn dies eine Funktion ist, die Sie an die Navigationsoptionen übergeben, ruft die
React-Navigation sie für Sie auf und übergibt einige Navigationsdaten Wenn Sie ein Objekt mit einigen Daten übergeben, die Ihnen helfen sollen,
sehen wir uns gleich an, was sich dort befindet, da wir diese Navigationsdaten hier einfach
protokollieren können.
Beginnen wir damit, gehen
wir jetzt zu dieser Seite und sehen, was da drin ist.
Wenn ich dies hier erweitere, ist dies das Protokoll, das ich erhalten habe,
und Sie sehen, wir haben eine weitere Navigationsstütze in den Navigationsdaten. Dort haben wir Aktionen, wir haben Pop navigiert, Push, also
im
Grunde das, was wir wussten. Wir haben dort auch
getParam und das sollte nützlich sein, da wir so am Ende Daten hier innerhalb unserer
Navigationsoptionen extrahieren können, was sehr hilfreich sein sollte. Am Ende erhalten wir also die gleiche Navigationsstütze, die wir auch für unsere Komponentenstützen erhalten.
Hier können wir also jetzt navigationData verwenden. Navigation. getParam, um meine Kategorie-ID zu erhalten, genau das,
was wir in der Komponente getan haben. So können wir den Code, den wir in einer Komponente
hatten, wiederholen und die ausgewählte Kategorie erhalten, nicht nur in der Komponente, sondern jetzt auch in dieser Funktion, mit der wir unsere Navigationsoptionen einrichten.
Jetzt erhalten wir hier auch Zugriff auf die ausgewählte Kategorie und jetzt, Navigationsoptionen, sollte diese Funktion, wenn
es sich um eine Funktion handelt, natürlich ein Objekt mit Ihren Navigationsoptionen zurückgeben.
Was wir zuvor direkt als Navigationsoptionen festgelegt hatten, als wir nur fest codierte Werte hatten, muss
jetzt
zurückgegeben werden, kann jetzt aber diese dynamisch abgeleiteten Daten oder die dynamisch abgeleiteten Informationen hier verwenden.
Jetzt können wir hier noch einen Header-Titel einrichten und der Header-Titel kann nun als Kategorie ausgewählt
werden. Titel.
Auf diese Weise können wir dies dynamisch ableiten. Wenn Sie also zurückgehen, sehen Sie
hier Italienisch, hier sehen Sie schnell und einfach, hier sehen Sie Deutsch, und das funktioniert einfach.
Bitte beachten Sie, dass Sie standardmäßig auch einen Zurück-Schaltflächentext erhalten, der dem Titel des vorherigen Bildschirms entspricht. Dies ist eine
weitere Standardfunktion, die Ihnen die React-Navigation bietet. Wir sehen hier wieder die Essenskategorien, weil
wir aus den Essenskategorien kommen. Nur auf schnell und einfach, wo
dies neben diesem etwas längeren Titel zu lang wäre, wird zurückgesetzt und standardmäßig zurückgesetzt. Dies ist ein gutes Standardverhalten, das Sie
überschreiben könnten, mit dem ich hier jedoch zufrieden bin. Unter Android haben wir keinen Zurück-Text, aber natürlich
haben wir eine Zurück-Schaltfläche, und dort wird die Kopfzeile auch für die geladenen Bildschirme korrekt ausgefüllt.
So können wir unsere Daten auch hier in den Navigationsoptionen dynamisch abrufen. Ein Problem, das Sie hier möglicherweise am
meisten bemerken, ist, dass der Header auf dem neuen Bildschirm, den wir laden, nicht das gleiche
Design wie unser Header hier hat, sondern nicht die Hintergrundfarbe. Das lässt sich natürlich leicht beheben, da wir
in den Navigationsoptionen der Kategorie Mahlzeiten einfach den Header-Stil und die Header-Tönungsfarbe einfügen können, die wir hier
auch auf dem anderen Bildschirm eingerichtet haben. Wir können das hier kopieren und das
bedeutet nur, dass wir die Plattform-API und natürlich unsere konstante Farbe importieren müssen. Importieren Sie also Farben aus
Konstanten / Farben wie diesen, und wenn wir das tun, werden wir das sehen, wenn wir dorthin gehen Wir haben jetzt den gleichen Header-Stil für diese neue Seite,
was natürlich das ist, was Sie normalerweise wollen. Was Sie jedoch normalerweise nicht möchten, ist, dass Sie
dieselbe Konfiguration auf jeden Bildschirm kopieren müssen, da wir in dieser App nicht so viele Bildschirme
haben, das können wir sicherlich, aber in größeren Apps, in denen Sie mehr
Bildschirme haben, das wäre super nervig und super umständlich, also ist es definitiv nicht der richtige Weg dorthin.
Schauen wir uns also in der nächsten Vorlesung eine Alternative an.