1 00:00:02,350 --> 00:00:07,000 Auf dem Kategorienbildschirm möchten wir sicherstellen, dass unser Element dort berührt werden 2 00:00:07,020 --> 00:00:13,590 kann. Daher importiere ich berührbare und hier berührbare Deckkraft, um einen leichten Deckkrafteffekt zu erzielen. Natürlich liegt es 3 00:00:13,740 --> 00:00:15,000 jedoch an Ihnen, 4 00:00:15,090 --> 00:00:17,100 welches Muster oder welche Komponente 5 00:00:17,100 --> 00:00:23,730 Sie verwenden Dort sollte es eine berührbare Komponente geben, die Sie hier und jetzt mit berührbarer Deckkraft um 6 00:00:23,730 --> 00:00:24,750 Ihren Artikel 7 00:00:24,750 --> 00:00:30,060 wickeln. Ich werde onPress hinzufügen, damit wir etwas tun können, wenn diese gedrückt wird. 8 00:00:30,060 --> 00:00:31,400 Was wollen wir machen? 9 00:00:31,440 --> 00:00:38,760 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 10 00:00:38,760 --> 00:00:40,830 anzuzeigen. Wir haben noch keine 11 00:00:40,830 --> 00:00:43,910 Rezepte, aber ich möchte immer noch zur Seite gehen. 12 00:00:44,610 --> 00:00:50,100 Deshalb müssen wir hier eine Navigationsaktion auslösen, und zuvor haben wir dies mit der 13 00:00:50,280 --> 00:00:51,470 Requisitennavigation getan, oder? 14 00:00:51,480 --> 00:00:56,550 Das Problem ist, dass wir hier keine Requisiten zur Verfügung haben, da wir uns innerhalb der Funktion zum Rendern 15 00:00:56,670 --> 00:00:59,090 von Rasterelementen befinden, die sich außerhalb unserer Komponente befindet. 16 00:00:59,130 --> 00:01:04,610 Jetzt können wir dies einfach in unsere Komponente verschieben, um dieses Problem zu beheben. 17 00:01:04,770 --> 00:01:10,470 Wenn wir diese Funktion dort erstellen, haben wir Zugriff auf Requisiten, da wir uns jetzt innerhalb unserer 18 00:01:10,470 --> 00:01:17,070 Komponentenfunktion befinden und jetzt die Navigation hier aufrufen können. Wir können navigieren anrufen und ich möchte zu 19 00:01:17,070 --> 00:01:23,310 einem Routennamen gehen, und natürlich finden Sie den Routennamen, zu dem ich gehen möchte, in unserem Navigator: Kategorie 20 00:01:23,310 --> 00:01:27,510 Mahlzeiten richtig, da wir alle Mahlzeiten für die ausgewählte Kategorie laden möchten. 21 00:01:27,510 --> 00:01:33,660 Also gehen wir hier zur Kategorie Mahlzeiten und wenn wir dies hinzufügen und dies speichern, sehen wir, dass unser Styling 22 00:01:33,660 --> 00:01:37,560 jetzt etwas kaputt ist. Ich werde das in einer Sekunde beheben, aber die 23 00:01:37,560 --> 00:01:44,520 Navigation funktioniert, wir haben auch diesen Deckkrafteffekt, also funktioniert das . Jetzt ist es einfach, das Styling zu reparieren. Wir haben es einfach 24 00:01:44,520 --> 00:01:47,080 verloren, weil ich meine Ansicht mit berührbarer Deckkraft 25 00:01:47,220 --> 00:01:53,760 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 26 00:01:53,760 --> 00:02:00,230 Deckkraft anstelle dieser Ansicht hier und damit zu ändern. Wir haben diesen Stil zurückbekommen und das funktioniert jetzt so, wie es sollte. 27 00:02:00,270 --> 00:02:06,630 Die interessantere Frage ist, wie wir unseren Header-Titel tatsächlich setzen können. Jetzt bekommen wir ein paar Optionen, 28 00:02:06,630 --> 00:02:07,720 schauen 29 00:02:07,800 --> 00:02:13,740 wir uns Option Nummer eins an. Auf jeder React-Komponente, die Sie 30 00:02:13,740 --> 00:02:22,420 als Bildschirm laden, dh was Sie einem solchen Bildschirmnamen beispielsweise im Stack-Navigator zuordnen, können Sie eine Eigenschaft hinzufügen. 31 00:02:22,410 --> 00:02:28,590 Denken Sie jetzt daran, dass der Kategorienbildschirm natürlich eine React-Komponente ist, aber technisch gesehen ist es eine 32 00:02:28,590 --> 00:02:29,370 Javascript-Funktion, oder? 33 00:02:29,370 --> 00:02:34,290 Es ist eine Funktion, die das Argument props empfängt und dann diesen Body ausführt, der etwas 34 00:02:34,290 --> 00:02:37,390 jsx zurückgibt. Daher kann React dies als Komponente verwenden, aber 35 00:02:37,530 --> 00:02:39,840 technisch gesehen ist es eine Javascript-Funktion. 36 00:02:39,840 --> 00:02:43,490 Jetzt sind Javascript-Funktionen nur noch Objekte, das ist 37 00:02:43,500 --> 00:02:44,720 Javascript, Funktionen 38 00:02:44,790 --> 00:02:52,800 sind Objekte und für Objekte können wir Eigenschaften hinzufügen. Der Kategorienbildschirm ist also nur ein Javascript-Objekt, daher 39 00:02:52,890 --> 00:02:53,630 können 40 00:02:53,730 --> 00:02:57,150 wir nach dem Erstellen eine Eigenschaft hinzufügen. 41 00:02:57,150 --> 00:03:07,040 Nachdem wir also unsere Bildschirmfunktion für Kategorien und damit dieses Objekt definiert haben, können wir darauf zugreifen und eine Eigenschaft 42 00:03:07,040 --> 00:03:13,250 mit der Punktnotation hinzufügen. So funktioniert Javascript. Sie können einfach eine solche Eigenschaft 43 00:03:13,250 --> 00:03:14,250 hinzufügen. 44 00:03:14,260 --> 00:03:20,870 Jetzt können Sie hier eine spezielle Eigenschaft hinzufügen, nach der die React-Navigation suchen soll. Dies ist die 45 00:03:21,350 --> 00:03:22,970 Eigenschaft für die Navigationsoptionen. 46 00:03:22,970 --> 00:03:26,270 Sie müssen es nicht hinzufügen und das ist kein Problem, wenn Sie es 47 00:03:26,270 --> 00:03:32,000 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. 48 00:03:33,210 --> 00:03:38,480 Jetzt gibt es eine Reihe von Optionen, die Sie dort einrichten können, und eine vollständige Liste finden Sie 49 00:03:38,480 --> 00:03:40,120 natürlich in den offiziellen Dokumenten. 50 00:03:40,270 --> 00:03:45,100 In der einfachsten Form weisen Sie hier einfach ein Javascript-Objekt mit den 51 00:03:45,100 --> 00:03:51,880 Optionen zu, die Sie jetzt in diesem Objekt einrichten können. Die Option, die mich hier interessiert, ist 52 00:03:52,030 --> 00:04:00,440 der Header-Titel, der beispielsweise einfach auf einen Text festgelegt werden kann Essenskategorien, weil wir uns auf dem Kategorienbildschirm befinden, sodass dies 53 00:04:00,430 --> 00:04:03,970 ein passender Titel wäre. Wenn wir dies 54 00:04:03,970 --> 00:04:09,090 speichern, sehen Sie jetzt in der Kopfzeile die Essenskategorien als Titel. 55 00:04:09,120 --> 00:04:14,970 Jetzt können Sie den Header hier auch mithilfe der Header-Stileigenschaft formatieren. Hierbei handelt es sich 56 00:04:14,970 --> 00:04:21,200 um ein Stilobjekt, in dem Sie im Allgemeinen festlegen können, was Sie auch in Ansichten als 57 00:04:21,310 --> 00:04:27,090 Stile einrichten können, und dort eine Hintergrundfarbe hinzufügen können Der am häufigsten verwendete Stil. 58 00:04:27,210 --> 00:04:32,610 Jetzt möchte ich hier eine Farbe einrichten und einen Ansatz verwenden, den ich bereits früher 59 00:04:32,670 --> 00:04:43,350 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 60 00:04:43,440 --> 00:04:48,470 eingerichtet sind, die ich in der App immer wieder verwenden möchte. 61 00:04:48,600 --> 00:04:56,790 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, 62 00:04:56,790 --> 00:05:03,060 wenn Sie möchten, und ich werde eine Akzentfarbe oder eine Sekundärfarbe einrichten, die Hex-Code ist # ff6f00 und 63 00:05:03,270 --> 00:05:07,920 dies sind nur die Farben, die ich ausgewählt habe, wie ich bereits erwähnt 64 00:05:07,920 --> 00:05:13,850 habe. Sie können natürlich auch andere verwenden. Zurück im Kategorienbildschirm möchte ich jetzt Farben 65 00:05:13,860 --> 00:05:21,030 verwenden. Dazu müssen Sie sie importieren und Farben mit einem Großbuchstaben C importieren. Dies ist nur eine Konvention, 66 00:05:21,030 --> 00:05:29,730 die ich verwende, um anzuzeigen, dass dies eine Konstante aus Konstanten / Farben ist , auch mit einem Großbuchstaben C benannt 67 00:05:29,730 --> 00:05:38,420 und dann verwenden wir hier Farben. PrimaryColor zum Beispiel. Wenn Sie dies tun, werden Sie sehen, dass Ihr Header 68 00:05:38,420 --> 00:05:43,730 jetzt diese dunkelviolette Farbe hat, die ich ausgewählt habe. Das macht den Titel etwas schwer lesbar, aber 69 00:05:44,030 --> 00:05:48,670 zum Glück können Sie dies auch stylen, nicht mit dem Header-Stil, da dies sozusagen nur 70 00:05:48,720 --> 00:05:56,300 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 71 00:05:56,450 --> 00:06:01,090 offizielle Dokument der Ort, an dem Sie alles über diese verfügbaren Optionen erfahren können. So 72 00:06:01,100 --> 00:06:02,380 weiß ich über 73 00:06:02,390 --> 00:06:04,470 sie Bescheid, dort würden Sie darüber lesen. 74 00:06:04,550 --> 00:06:10,820 Jetzt kann die Farbe der Kopftönung immer eine Farbe sein, zum Beispiel Weiß hier, das einfach zu 75 00:06:10,820 --> 00:06:19,120 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. 76 00:06:19,120 --> 00:06:23,690 Vielleicht möchten Sie auch sehen, wo dies mehr iOS-artig aussieht, was bedeutet, dass Sie 77 00:06:23,740 --> 00:06:29,560 keinen farbigen Hintergrund haben, sondern nur ein Text farbig ist, und Sie können dies mit dem Guten erreichen 78 00:06:29,560 --> 00:06:35,980 alte Plattform-API, die Sie früher im Kurs kennengelernt haben. Wir können die Plattform-API verwenden, um dynamisch 79 00:06:35,980 --> 00:06:42,490 zu wechseln, welche Farben wir hier verwenden, basierend auf der Plattform, auf der unsere App ausgeführt wird. 80 00:06:42,490 --> 00:06:47,630 Hier können wir für die Hintergrundfarbe die Plattform verwenden. os und sehen Sie, ob das 81 00:06:47,640 --> 00:06:53,850 Android ist. In diesem Fall möchte ich die Primärfarbe verwenden. Andernfalls verwende ich in diesem ternären Ausdruck 82 00:06:53,920 --> 00:07:00,940 keine Farbe, sodass wir hier beispielsweise Weiß verwenden können, beispielsweise einen normalen weißen Hintergrund, oder einfach keine Farbe einrichten 83 00:07:00,940 --> 00:07:07,150 können überhaupt so und Sie erhalten dann die Standard-Hintergrundfarbe. Und für die Tönungsfarbe ist es die 84 00:07:07,150 --> 00:07:10,810 gleiche, ich überprüfe, ob das Betriebssystem Android ist, in dem 85 00:07:10,810 --> 00:07:20,360 die Textfarbe weiß sein sollte, sonst werde ich dies auf Farben setzen. primaryColour und damit haben Sie jetzt dieses mehr iOS, 86 00:07:20,360 --> 00:07:27,530 das typischere iOS-Aussehen hier auf iOS und Sie haben das Standard-Android-Aussehen, das auf Android bunter ist. 87 00:07:27,530 --> 00:07:31,100 Auf diese Weise können Sie hier Navigationsoptionen einrichten. 88 00:07:31,130 --> 00:07:39,170 Was ist nun mit diesem Bildschirm, auf dem wir hier zu unseren Details, zu den italienischen Mahlzeiten oder 89 00:07:39,170 --> 00:07:45,500 zu den schnellen und einfachen Mahlzeiten gehen? Es wäre schön, wenn wir hier schnell und einfach oder hier Italienisch in der 90 00:07:45,500 --> 00:07:46,400 Kopfzeile sehen könnten. 91 00:07:46,400 --> 00:07:51,230 Das ist das nächste, worum wir uns kümmern sollten, und dafür müssen wir einige Informationen 92 00:07:51,230 --> 00:07:55,940 von diesem Bildschirm an diesen Bildschirm übergeben. Wie das funktioniert, sehen wir uns im nächsten Video an.