1
00:00:02,670 --> 00:00:08,610
Wir möchten also die Mahlzeiten finden, die in die von uns ausgewählte Kategorie passen. Daher

2
00:00:08,610 --> 00:00:09,660
interessieren wir

3
00:00:09,660 --> 00:00:15,000
uns nicht wirklich für die ausgewählte Kategorie, sondern für die Mahlzeiten, die zu

4
00:00:15,000 --> 00:00:17,150
dieser Kategorie gehören. Jetzt können

5
00:00:17,150 --> 00:00:22,910
wir zunächst unser Menü für Mahlzeiten importieren, da dies alle möglichen Mahlzeiten enthält, die wir

6
00:00:22,910 --> 00:00:28,550
haben, und jetzt möchten wir diejenigen herausfiltern, die tatsächlich die Kategorie-ID haben, die wir

7
00:00:28,550 --> 00:00:35,480
dort ausgewählt haben, das Kategorie-ID-Array, das jede Mahlzeit hat. Sie werden in den Dummy-Daten sehen, dass jede Mahlzeit dieses Array von

8
00:00:35,480 --> 00:00:36,680
Kategorie-IDs hat, zu denen

9
00:00:36,680 --> 00:00:39,320
sie gehört. Daher werden wir diese zum Filtern verwenden.

10
00:00:39,320 --> 00:00:46,010
Im Bildschirm "Kategorie Mahlzeiten" möchten wir die Mahlzeiten finden, die zu der von uns ausgewählten Kategorie gehören, und ich werde sie in einer

11
00:00:46,070 --> 00:00:49,850
Konstante mit dem Namen "Angezeigte Mahlzeiten" speichern. Der Name liegt natürlich bei Ihnen

12
00:00:49,880 --> 00:00:54,230
und dort schaue ich mir meine an Mahlzeiten, das ist also das gesamte Menü

13
00:00:54,230 --> 00:01:00,260
für Mahlzeiten und verwenden Sie die Filtermethode, die Javascript anbietet, um eine Funktion für jede Mahlzeit in diesem Array auszuführen,

14
00:01:00,260 --> 00:01:05,840
bei der wir die Mahlzeit automatisch als Argument erhalten und bei der wir true zurückgeben müssen, wenn es sich

15
00:01:06,110 --> 00:01:10,740
um eine der gewünschten Mahlzeiten handelt zu behalten oder falsch, wenn es sich um eine

16
00:01:10,790 --> 00:01:17,510
der Mahlzeiten handelt, die wir nicht behalten möchten, und wir möchten alle Mahlzeiten behalten, bei denen die Kategorie-IDs-Eigenschaft dieser Mahlzeit, die wir betrachten,

17
00:01:17,510 --> 00:01:19,340
die hier ausgewählte Kategorie-ID enthält.

18
00:01:20,090 --> 00:01:29,990
Hier werde ich also true zurückgeben, wenn der Index der Essenskategorie-IDs auch eine Javascript-Methode ist, die Katzen-ID, die wir aus den Routenparametern extrahiert

19
00:01:30,020 --> 00:01:36,470
haben, wenn diese größer oder gleich Null ist, da dies minus eins ist, wenn die

20
00:01:36,470 --> 00:01:43,490
Kategorie-ID nicht ist Teil der Kategorie-IDs, wenn es Null oder größer ist, dann wissen wir, dass

21
00:01:43,490 --> 00:01:50,540
diese Mahlzeit diese Kategorie-ID in ihrem Kategorie-IDs-Array hat, und dies gibt uns ein Array von angezeigten

22
00:01:50,540 --> 00:01:53,690
Mahlzeiten für diese ausgewählte Kategorie. Nun wollen

23
00:01:53,690 --> 00:01:57,710
wir dies hier ausgeben. Jetzt habe ich meine Ansicht

24
00:01:57,710 --> 00:02:04,280
hier und in dieser Ansicht möchte ich wieder eine Liste rendern und jetzt wird es eine Liste und kein

25
00:02:04,280 --> 00:02:11,360
Raster sein, also werde ich anstelle der Schaltfläche, die wir nicht mehr benötigen, importieren FlatList hier und dann meine FlatList

26
00:02:11,360 --> 00:02:13,590
so rendern und jetzt dort sind

27
00:02:13,850 --> 00:02:19,910
die Daten, die ich natürlich eingebe, natürlich mein angezeigtes Menü für Mahlzeiten, da dies die Mahlzeiten sind,

28
00:02:19,970 --> 00:02:22,490
die ich auf dem Bildschirm rendern möchte.

29
00:02:22,700 --> 00:02:30,140
Wie bereits erwähnt, suchen moderne Versionen von React Native automatisch nach ID-Feldern in einer Mahlzeit, um diese als Schlüssel in FlatList zu verwenden. Wenn

30
00:02:30,140 --> 00:02:37,970
Sie eine ältere Version verwenden oder dies auch nur noch einmal üben möchten, füge ich einen Schlüsselextraktor hinzu Hier, wo ich den Artikel und den Index

31
00:02:37,970 --> 00:02:44,150
bekomme und weiß, dass ich bei jeder Mahlzeit ein ID-Feld habe, weil wir das hier im Modell eingerichtet haben und

32
00:02:44,150 --> 00:02:48,500
das werde ich als Schlüssel in meiner Liste verwenden, also ich Ich werde

33
00:02:48,500 --> 00:02:50,570
das hier in Key Extractor verwenden.

34
00:02:50,570 --> 00:02:56,060
Wichtiger als der Schlüsselextraktor ist jedoch das Rendern eines Elements, das natürlich

35
00:02:56,090 --> 00:03:05,710
auf eine Funktion verweisen sollte, mit der wir ein einzelnes Element in dieser Liste rendern, und dort werde ich wie zuvor

36
00:03:05,880 --> 00:03:15,460
eine neue Funktion einrichten und es tun Hier innerhalb meiner Komponentenfunktion, damit ich Requisiten verwenden kann und ich diesen Render-Mahlzeit-Gegenstand benenne,

37
00:03:15,520 --> 00:03:21,310
liegt der Name ganz bei Ihnen. Dort bekomme ich einige Artikeldaten, ich weiß das,

38
00:03:21,310 --> 00:03:27,940
weil die flache Liste uns als Artikeldatenobjekt in diese Funktion übergibt und dort müssen wir einen jsx-Code zurückgeben,

39
00:03:27,940 --> 00:03:34,810
der einen Mahlzeitartikel rendern soll, und dort werde ich einen rendern Ansicht und für den Moment dann einfach eine

40
00:03:34,810 --> 00:03:43,390
Textkomponente drin, wo ich itemData ausgeben möchte. Artikel. Titel, also nur der Name der Mahlzeit für

41
00:03:43,390 --> 00:03:49,420
den Moment, später werden wir auch das Bild dort anzeigen, aber für den Moment wird dies tun und jetzt

42
00:03:49,660 --> 00:04:00,240
ist das Rendern von Mahlzeitelement das, was ich hier verwende, da die Funktion Renderelement zeigen sollte. Dies sollte eine grundlegende Liste von Mahlzeiten ergeben.

43
00:04:00,240 --> 00:04:07,560
Mal sehen, ob das funktioniert. Wenn wir das speichern und jetzt wählen wir sagen wir Italienisch, ich sehe Spaghetti mit

44
00:04:07,560 --> 00:04:08,810
Tomatensauce, sieht nicht schlecht aus.

45
00:04:08,880 --> 00:04:15,120
Schnell und einfach, wir sehen vier Mahlzeiten und Hamburger, wir sehen den klassischen Hamburger, leicht und lieblich,

46
00:04:15,120 --> 00:04:21,640
wir sehen zwei Rezepte, so dass es zu funktionieren scheint, sieht aus, als würden Rezepte basierend auf der von

47
00:04:21,660 --> 00:04:28,500
uns gewählten Kategorie ausgewählt und das ist natürlich großartig. Jetzt ist es wieder Zeit, ein bisschen am Styling zu arbeiten, weil ich mir nicht

48
00:04:28,500 --> 00:04:31,170
sicher bin, aber ich denke, wir können das ein bisschen verbessern.