Wir möchten also die Mahlzeiten finden, die in die von uns ausgewählte Kategorie passen. Daher
interessieren wir
uns nicht wirklich für die ausgewählte Kategorie, sondern für die Mahlzeiten, die zu
dieser Kategorie gehören. Jetzt können
wir zunächst unser Menü für Mahlzeiten importieren, da dies alle möglichen Mahlzeiten enthält, die wir
haben, und jetzt möchten wir diejenigen herausfiltern, die tatsächlich die Kategorie-ID haben, die wir
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
Kategorie-IDs hat, zu denen
sie gehört. Daher werden wir diese zum Filtern verwenden.
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
Konstante mit dem Namen "Angezeigte Mahlzeiten" speichern. Der Name liegt natürlich bei Ihnen
und dort schaue ich mir meine an Mahlzeiten, das ist also das gesamte Menü
für Mahlzeiten und verwenden Sie die Filtermethode, die Javascript anbietet, um eine Funktion für jede Mahlzeit in diesem Array auszuführen,
bei der wir die Mahlzeit automatisch als Argument erhalten und bei der wir true zurückgeben müssen, wenn es sich
um eine der gewünschten Mahlzeiten handelt zu behalten oder falsch, wenn es sich um eine
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,
die hier ausgewählte Kategorie-ID enthält.
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
haben, wenn diese größer oder gleich Null ist, da dies minus eins ist, wenn die
Kategorie-ID nicht ist Teil der Kategorie-IDs, wenn es Null oder größer ist, dann wissen wir, dass
diese Mahlzeit diese Kategorie-ID in ihrem Kategorie-IDs-Array hat, und dies gibt uns ein Array von angezeigten
Mahlzeiten für diese ausgewählte Kategorie. Nun wollen
wir dies hier ausgeben. Jetzt habe ich meine Ansicht
hier und in dieser Ansicht möchte ich wieder eine Liste rendern und jetzt wird es eine Liste und kein
Raster sein, also werde ich anstelle der Schaltfläche, die wir nicht mehr benötigen, importieren FlatList hier und dann meine FlatList
so rendern und jetzt dort sind
die Daten, die ich natürlich eingebe, natürlich mein angezeigtes Menü für Mahlzeiten, da dies die Mahlzeiten sind,
die ich auf dem Bildschirm rendern möchte.
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
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
bekomme und weiß, dass ich bei jeder Mahlzeit ein ID-Feld habe, weil wir das hier im Modell eingerichtet haben und
das werde ich als Schlüssel in meiner Liste verwenden, also ich Ich werde
das hier in Key Extractor verwenden.
Wichtiger als der Schlüsselextraktor ist jedoch das Rendern eines Elements, das natürlich
auf eine Funktion verweisen sollte, mit der wir ein einzelnes Element in dieser Liste rendern, und dort werde ich wie zuvor
eine neue Funktion einrichten und es tun Hier innerhalb meiner Komponentenfunktion, damit ich Requisiten verwenden kann und ich diesen Render-Mahlzeit-Gegenstand benenne,
liegt der Name ganz bei Ihnen. Dort bekomme ich einige Artikeldaten, ich weiß das,
weil die flache Liste uns als Artikeldatenobjekt in diese Funktion übergibt und dort müssen wir einen jsx-Code zurückgeben,
der einen Mahlzeitartikel rendern soll, und dort werde ich einen rendern Ansicht und für den Moment dann einfach eine
Textkomponente drin, wo ich itemData ausgeben möchte. Artikel. Titel, also nur der Name der Mahlzeit für
den Moment, später werden wir auch das Bild dort anzeigen, aber für den Moment wird dies tun und jetzt
ist das Rendern von Mahlzeitelement das, was ich hier verwende, da die Funktion Renderelement zeigen sollte. Dies sollte eine grundlegende Liste von Mahlzeiten ergeben.
Mal sehen, ob das funktioniert. Wenn wir das speichern und jetzt wählen wir sagen wir Italienisch, ich sehe Spaghetti mit
Tomatensauce, sieht nicht schlecht aus.
Schnell und einfach, wir sehen vier Mahlzeiten und Hamburger, wir sehen den klassischen Hamburger, leicht und lieblich,
wir sehen zwei Rezepte, so dass es zu funktionieren scheint, sieht aus, als würden Rezepte basierend auf der von
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
sicher bin, aber ich denke, wir können das ein bisschen verbessern.