Auf dem Kategorienbildschirm möchten wir sicherstellen, dass unser Element dort berührt werden
kann. Daher importiere ich berührbare und hier berührbare Deckkraft, um einen leichten Deckkrafteffekt zu erzielen. Natürlich liegt es
jedoch an Ihnen,
welches Muster oder welche Komponente
Sie verwenden Dort sollte es eine berührbare Komponente geben, die Sie hier und jetzt mit berührbarer Deckkraft um
Ihren Artikel
wickeln. Ich werde onPress hinzufügen, damit wir etwas tun können, wenn diese gedrückt wird.
Was wollen wir machen?
Wir möchten zum Bildschirm "Kategorie Mahlzeiten" gehen, der eine Art Detailseite für eine ausgewählte Kategorie darstellt, um alle Rezepte für diese Kategorie
anzuzeigen. Wir haben noch keine
Rezepte, aber ich möchte immer noch zur Seite gehen.
Deshalb müssen wir hier eine Navigationsaktion auslösen, und zuvor haben wir dies mit der
Requisitennavigation getan, oder?
Das Problem ist, dass wir hier keine Requisiten zur Verfügung haben, da wir uns innerhalb der Funktion zum Rendern
von Rasterelementen befinden, die sich außerhalb unserer Komponente befindet.
Jetzt können wir dies einfach in unsere Komponente verschieben, um dieses Problem zu beheben.
Wenn wir diese Funktion dort erstellen, haben wir Zugriff auf Requisiten, da wir uns jetzt innerhalb unserer
Komponentenfunktion befinden und jetzt die Navigation hier aufrufen können. Wir können navigieren anrufen und ich möchte zu
einem Routennamen gehen, und natürlich finden Sie den Routennamen, zu dem ich gehen möchte, in unserem Navigator: Kategorie
Mahlzeiten richtig, da wir alle Mahlzeiten für die ausgewählte Kategorie laden möchten.
Also gehen wir hier zur Kategorie Mahlzeiten und wenn wir dies hinzufügen und dies speichern, sehen wir, dass unser Styling
jetzt etwas kaputt ist. Ich werde das in einer Sekunde beheben, aber die
Navigation funktioniert, wir haben auch diesen Deckkrafteffekt, also funktioniert das . Jetzt ist es einfach, das Styling zu reparieren. Wir haben es einfach
verloren, weil ich meine Ansicht mit berührbarer Deckkraft
umwickelt habe. Wir müssen nur diesen Stil hier hinzufügen, der den Rand um unseren Artikel hinzufügt, und so weiter, um die berührbare
Deckkraft anstelle dieser Ansicht hier und damit zu ändern. Wir haben diesen Stil zurückbekommen und das funktioniert jetzt so, wie es sollte.
Die interessantere Frage ist, wie wir unseren Header-Titel tatsächlich setzen können. Jetzt bekommen wir ein paar Optionen,
schauen
wir uns Option Nummer eins an. Auf jeder React-Komponente, die Sie
als Bildschirm laden, dh was Sie einem solchen Bildschirmnamen beispielsweise im Stack-Navigator zuordnen, können Sie eine Eigenschaft hinzufügen.
Denken Sie jetzt daran, dass der Kategorienbildschirm natürlich eine React-Komponente ist, aber technisch gesehen ist es eine
Javascript-Funktion, oder?
Es ist eine Funktion, die das Argument props empfängt und dann diesen Body ausführt, der etwas
jsx zurückgibt. Daher kann React dies als Komponente verwenden, aber
technisch gesehen ist es eine Javascript-Funktion.
Jetzt sind Javascript-Funktionen nur noch Objekte, das ist
Javascript, Funktionen
sind Objekte und für Objekte können wir Eigenschaften hinzufügen. Der Kategorienbildschirm ist also nur ein Javascript-Objekt, daher
können
wir nach dem Erstellen eine Eigenschaft hinzufügen.
Nachdem wir also unsere Bildschirmfunktion für Kategorien und damit dieses Objekt definiert haben, können wir darauf zugreifen und eine Eigenschaft
mit der Punktnotation hinzufügen. So funktioniert Javascript. Sie können einfach eine solche Eigenschaft
hinzufügen.
Jetzt können Sie hier eine spezielle Eigenschaft hinzufügen, nach der die React-Navigation suchen soll. Dies ist die
Eigenschaft für die Navigationsoptionen.
Sie müssen es nicht hinzufügen und das ist kein Problem, wenn Sie es
nicht tun. Wir haben es bisher noch nicht getan, aber Sie können es hinzufügen. Wenn Sie es hinzufügen, wird es von React respektiert Navigation.
Jetzt gibt es eine Reihe von Optionen, die Sie dort einrichten können, und eine vollständige Liste finden Sie
natürlich in den offiziellen Dokumenten.
In der einfachsten Form weisen Sie hier einfach ein Javascript-Objekt mit den
Optionen zu, die Sie jetzt in diesem Objekt einrichten können. Die Option, die mich hier interessiert, ist
der Header-Titel, der beispielsweise einfach auf einen Text festgelegt werden kann Essenskategorien, weil wir uns auf dem Kategorienbildschirm befinden, sodass dies
ein passender Titel wäre. Wenn wir dies
speichern, sehen Sie jetzt in der Kopfzeile die Essenskategorien als Titel.
Jetzt können Sie den Header hier auch mithilfe der Header-Stileigenschaft formatieren. Hierbei handelt es sich
um ein Stilobjekt, in dem Sie im Allgemeinen festlegen können, was Sie auch in Ansichten als
Stile einrichten können, und dort eine Hintergrundfarbe hinzufügen können Der am häufigsten verwendete Stil.
Jetzt möchte ich hier eine Farbe einrichten und einen Ansatz verwenden, den ich bereits früher
im Kurs verwendet habe. Ich werde einen Konstantenordner hinzufügen und dort Farben hinzufügen. js-Datei, in die ich dann ein Javascript-Objekt exportiere, in dem alle Farben
eingerichtet sind, die ich in der App immer wieder verwenden möchte.
Dort werde ich eine Primärfarbe einrichten, für die ich einen Hex-Code von # 4a148C vorgewählt habe, aber natürlich können Sie mit verschiedenen Farben experimentieren,
wenn Sie möchten, und ich werde eine Akzentfarbe oder eine Sekundärfarbe einrichten, die Hex-Code ist # ff6f00 und
dies sind nur die Farben, die ich ausgewählt habe, wie ich bereits erwähnt
habe. Sie können natürlich auch andere verwenden. Zurück im Kategorienbildschirm möchte ich jetzt Farben
verwenden. Dazu müssen Sie sie importieren und Farben mit einem Großbuchstaben C importieren. Dies ist nur eine Konvention,
die ich verwende, um anzuzeigen, dass dies eine Konstante aus Konstanten / Farben ist , auch mit einem Großbuchstaben C benannt
und dann verwenden wir hier Farben. PrimaryColor zum Beispiel. Wenn Sie dies tun, werden Sie sehen, dass Ihr Header
jetzt diese dunkelviolette Farbe hat, die ich ausgewählt habe. Das macht den Titel etwas schwer lesbar, aber
zum Glück können Sie dies auch stylen, nicht mit dem Header-Stil, da dies sozusagen nur
das Feld für den Header ist, nicht dessen Inhalt, sondern der Titel mit der Farbe des Header-Farbtons gestaltet werden kann Und wieder ist das
offizielle Dokument der Ort, an dem Sie alles über diese verfügbaren Optionen erfahren können. So
weiß ich über
sie Bescheid, dort würden Sie darüber lesen.
Jetzt kann die Farbe der Kopftönung immer eine Farbe sein, zum Beispiel Weiß hier, das einfach zu
meiner Standardfarbe passt, und jetzt sehen Sie, dass dies Weiß ist. Natürlich möchten Sie vielleicht auch ein anderes Aussehen für Android und iOS.
Vielleicht möchten Sie auch sehen, wo dies mehr iOS-artig aussieht, was bedeutet, dass Sie
keinen farbigen Hintergrund haben, sondern nur ein Text farbig ist, und Sie können dies mit dem Guten erreichen
alte Plattform-API, die Sie früher im Kurs kennengelernt haben. Wir können die Plattform-API verwenden, um dynamisch
zu wechseln, welche Farben wir hier verwenden, basierend auf der Plattform, auf der unsere App ausgeführt wird.
Hier können wir für die Hintergrundfarbe die Plattform verwenden. os und sehen Sie, ob das
Android ist. In diesem Fall möchte ich die Primärfarbe verwenden. Andernfalls verwende ich in diesem ternären Ausdruck
keine Farbe, sodass wir hier beispielsweise Weiß verwenden können, beispielsweise einen normalen weißen Hintergrund, oder einfach keine Farbe einrichten
können überhaupt so und Sie erhalten dann die Standard-Hintergrundfarbe. Und für die Tönungsfarbe ist es die
gleiche, ich überprüfe, ob das Betriebssystem Android ist, in dem
die Textfarbe weiß sein sollte, sonst werde ich dies auf Farben setzen. primaryColour und damit haben Sie jetzt dieses mehr iOS,
das typischere iOS-Aussehen hier auf iOS und Sie haben das Standard-Android-Aussehen, das auf Android bunter ist.
Auf diese Weise können Sie hier Navigationsoptionen einrichten.
Was ist nun mit diesem Bildschirm, auf dem wir hier zu unseren Details, zu den italienischen Mahlzeiten oder
zu den schnellen und einfachen Mahlzeiten gehen? Es wäre schön, wenn wir hier schnell und einfach oder hier Italienisch in der
Kopfzeile sehen könnten.
Das ist das nächste, worum wir uns kümmern sollten, und dafür müssen wir einige Informationen
von diesem Bildschirm an diesen Bildschirm übergeben. Wie das funktioniert, sehen wir uns im nächsten Video an.