1 00:00:02,660 --> 00:00:08,660 Wie können wir also Informationen über die Kategorie erhalten, auf 2 00:00:08,660 --> 00:00:15,240 die wir geklickt haben? Auf dem Kategorienbildschirm, auf dem wir zu 3 00:00:15,440 --> 00:00:16,870 Kategoriemahlzeiten navigieren, können 4 00:00:16,880 --> 00:00:21,930 wir für diese Navigationsaktion neben dem Routennamen auch die Parameter übergeben. 5 00:00:21,950 --> 00:00:29,510 Dies ist ein weiterer Schlüssel, den dieses Objekt, an das Sie zum Navigieren übergeben haben, akzeptiert. Dabei handelt es sich 6 00:00:29,510 --> 00:00:35,060 um ein Objekt aus Schlüssel-Wert-Paaren, beliebigen Schlüssel-Wert-Paaren und so vielen Schlüssel-Wert-Paaren, wie Sie möchten. 7 00:00:35,060 --> 00:00:40,980 Dies sind also einfach Parameter, zusätzliche Daten, die Sie an den neuen Bildschirm übergeben, der geladen wird. 8 00:00:41,330 --> 00:00:46,760 Jetzt können Sie einen Parameter mit dem Namen Kategorie-ID einrichten, und der Name liegt ganz bei Ihnen. 9 00:00:46,760 --> 00:00:47,880 Dies kann nur 10 00:00:47,930 --> 00:00:54,590 ID, CID oder mein Hobby sein. Was auch immer Sie erstellen und welche Daten Sie weiterleiten müssen, hier leiten wir weiter 11 00:00:54,590 --> 00:00:57,640 eine Kategorie ID daher werde ich es so nennen. 12 00:00:57,650 --> 00:01:01,410 Dies sollte nun in unserem Szenario hier natürlich die ID der 13 00:01:01,410 --> 00:01:03,980 Kategorie sein, auf die wir getippt haben. 14 00:01:03,980 --> 00:01:07,650 Jetzt erhalten wir hier natürlich unsere Artikeldaten für jedes gerenderte Rasterelement. 15 00:01:07,670 --> 00:01:12,480 Dieses enthält das Element und hat einen Titel, eine Farbe und eine ID. Die Kategorie-ID 16 00:01:12,650 --> 00:01:16,780 lautet also itemData. Artikel. Ich würde. 17 00:01:17,180 --> 00:01:23,430 Jetzt leiten wir diese ID an den neuen Bildschirm weiter, der geladen wird, und das ist hier 18 00:01:23,630 --> 00:01:26,210 natürlich wichtig. Dadurch können wir diese 19 00:01:26,210 --> 00:01:34,620 Daten dann in diesem neuen Bildschirm verwenden. Wie? Nun, gehen wir dorthin, gehen wir zum 20 00:01:34,650 --> 00:01:39,550 Bildschirm für die Kategorie Mahlzeiten und sehen, wie wir diesen Parameter extrahieren können. 21 00:01:39,600 --> 00:01:41,400 Wir wissen, dass wir eine 22 00:01:41,400 --> 00:01:43,990 bekommen werden. Wie können wir jetzt darauf zugreifen? 23 00:01:44,250 --> 00:01:46,740 Dafür können wir wieder die Requisitennavigation 24 00:01:46,740 --> 00:01:52,350 verwenden, daher erhalten wir diese spezielle Requisite, da diese Komponente hier mit Hilfe eines React-Navigationsnavigators 25 00:01:52,350 --> 00:01:58,860 geladen wird und wir bei der Navigation nicht nur navigieren und drücken müssen und so weiter. Wir haben 26 00:01:58,860 --> 00:02:07,410 auch getParam, eine Methode zum Extrahieren eines Parameters, den wir erhalten. getParam verwendet eine Zeichenfolge mit dem Namen des Parameters, den wir 27 00:02:07,410 --> 00:02:12,450 extrahieren möchten, und dies sollte natürlich der Name sein, den Sie hier als 28 00:02:12,840 --> 00:02:15,590 Schlüssel für dieses params-Objekt ausgewählt haben. 29 00:02:15,600 --> 00:02:21,330 Also habe ich hier eine Kategorie-ID hinzugefügt, daher ist dies der Name, den ich hier verwenden möchte. 30 00:02:21,330 --> 00:02:29,160 Dies gibt mir die Katzen-ID, diese Kategorie-ID. Dies gibt mir den Wert, den wir hier unter diesem Schlüsselnamen speichern. In diesem Fall 31 00:02:29,160 --> 00:02:30,350 ist dies die 32 00:02:30,360 --> 00:02:30,960 ID. 33 00:02:30,960 --> 00:02:32,700 Dies ist also der Wert, 34 00:02:32,700 --> 00:02:36,360 den wir für die Kategorie-ID in der Kategorie extrahieren Mahlzeiten Bildschirm. 35 00:02:36,360 --> 00:02:44,100 Jetzt haben wir also die Katzen-ID und können diese verwenden, um natürlich Zugang zu allen Mahlzeiten zu erhalten, die in diese Kategorie 36 00:02:44,100 --> 00:02:45,120 passen. Im 37 00:02:45,120 --> 00:02:51,360 Moment haben wir keine Mahlzeiten, also müssen wir dies verschieben, aber zumindest können wir dies auch verwenden 38 00:02:51,360 --> 00:02:58,920 Um unseren Kategorietitel zu erhalten und diesen hier und dafür zu verwenden, müssen wir natürlich nur Kategorien importieren, also ordnen wir 39 00:02:58,920 --> 00:03:08,220 unsere Kategorien hier aus Daten / Dummy-Daten an und wir haben die ID, wir haben eine Reihe von Kategorien Natürlich können wir unsere ausgewählte Kategorie finden 40 00:03:08,220 --> 00:03:15,600 oder was auch immer Sie sie benennen möchten, indem wir uns Kategorien ansehen, und dort können wir find verwenden, das eine 41 00:03:15,960 --> 00:03:21,950 Funktion übernimmt, die es für jedes Element im Array ausführt, also für jede Kategorie und uns gibt 42 00:03:21,950 --> 00:03:27,830 Das Element, bei dem diese Funktion true zurückgibt. Dies sollte der Fall sein, wenn die ID 43 00:03:27,830 --> 00:03:33,700 für die Kategorie, die wir betrachten, mit der Katzen-ID übereinstimmt, die wir aus unseren Parametern abrufen. 44 00:03:33,800 --> 00:03:35,740 Dies gibt uns die ausgewählte Kategorie und um zu 45 00:03:35,750 --> 00:03:42,010 beweisen, dass dies funktioniert, werde ich sie hier in einer Textkomponente ausgeben, ich werde selectedCategory ausgeben. 46 00:03:42,020 --> 00:03:53,370 Titel hier. Wenn wir also zurückgehen und zu dieser Kategorie navigieren, sehen wir hier Italienisch direkt 47 00:03:53,370 --> 00:03:56,280 über meinen Schaltflächen. Wir sehen jetzt schnell 48 00:03:56,430 --> 00:04:01,310 und einfach, also funktioniert das. Auf diese Weise geben wir 49 00:04:01,410 --> 00:04:07,710 Daten weiter und extrahieren sie. Natürlich können Sie mehrere Parameter übergeben, so viele Sie benötigen 50 00:04:08,010 --> 00:04:15,270 und Parameter müssen keine IDs sein. Sie können Objekte übergeben, Sie können Text übergeben. Zahlen und Arrays, unabhängig 51 00:04:15,270 --> 00:04:22,620 davon, welche Daten Sie übergeben müssen, können Sie übergeben. Sie werden jedoch vielleicht bemerken, dass wir damit natürlich unsere Kategorie hier in unserem Bildschirm verwenden 52 00:04:23,040 --> 00:04:25,420 können, aber wir möchten sie hier in der Kopfzeile verwenden. 53 00:04:25,420 --> 00:04:27,030 Lassen Sie uns das in der nächsten Vorlesung angehen.