Chcemy więc znaleźć posiłki, które pasują do wybranej przez nas kategorii, dlatego tak naprawdę w elemencie
ekranu kategorii
posiłków nie jesteśmy tak naprawdę zainteresowani wybraną kategorią, ale jesteśmy bardzo zainteresowani posiłkami należącymi
do tej kategorii. Teraz możemy
przede wszystkim zaimportować naszą tablicę posiłków, ponieważ zawiera ona wszystkie możliwe posiłki, które
mamy, a teraz chcemy odfiltrować te, które faktycznie mają wybrany ID kategorii,
tablicę ID kategorii, która ma każdy posiłek. Zobaczysz w danych fikcyjnych, że każdy posiłek ma tę tablicę
identyfikatorów kategorii, do
których należy, więc tego właśnie użyjemy do filtrowania.
Dlatego na ekranie kategorii posiłków chcemy znaleźć posiłki należące do wybranej przez nas kategorii i będę je przechowywać w
stałych nazwanych wyświetlanych posiłkach, nazwa oczywiście zależy od ciebie i tam,
popatrzę na moje posiłki, więc jest to cała tablica posiłków i użyj
metody filtrowania Javascript oferuje uruchomienie funkcji na każdym posiłku w tej tablicy, w której automatycznie otrzymujemy posiłek
jako argument i gdzie musimy zwrócić wartość true, jeśli jest to jeden z posiłków, który chcemy
do zachowania lub fałsz, jeśli jest to jeden z posiłków, którego nie chcemy
przechowywać i chcemy zachować wszystkie posiłki, w przypadku których właściwość ID kategorii tego posiłku, na który patrzymy, zawiera identyfikator
kategorii, który wybraliśmy tutaj.
Więc tutaj zwrócę prawdę, jeśli indeks identyfikatorów kategorii posiłków, który jest również metodą Javascript, identyfikator kota, który wyodrębniliśmy z parametrów trasy, jeśli
jest on większy lub równy zero, ponieważ będzie to minus jeden, jeśli identyfikator kategorii
nie jest część identyfikatorów kategorii, jeśli jest zerowa lub większa, to wiemy, że ten posiłek
ma ten identyfikator kategorii w swojej tablicy identyfikatorów kategorii, a to da nam tablicę wyświetlanych
posiłków dla wybranej kategorii, teraz właśnie tutaj
chcemy uzyskać wynik. Teraz mam tutaj swój
widok i w tym widoku ponownie chcę wyrenderować listę, a teraz będzie to lista, a
nie siatka, więc zamiast przycisku, którego już nie będziemy potrzebować, zaimportuję FlatList tutaj, a następnie wyrenderuj moją
FlatList w ten sposób, a
teraz tam dane, które karmię, są oczywiście moją tablicą wyświetlanych posiłków, ponieważ są to
posiłki, które chcę renderować na ekran.
Teraz, jak wspomniano wcześniej, nowoczesne wersje React Native automatycznie szukają pola ID w posiłku, aby użyć go jako klucza w FlatList,
jeśli używasz starszej wersji lub też po prostu ćwiczysz to ponownie, dodam ekstraktor kluczy tutaj, gdzie dostaję przedmiot i indeks, i wiem,
że przy każdym posiłku będę miał pole identyfikatora, ponieważ to jest to, co ustawiliśmy tutaj w modelu i
to będzie to, czego używam jako klucza na mojej liście, więc Użyję
tego tutaj w ekstraktorze kluczy.
Ważniejsze niż kluczowy ekstraktor jest jednak element renderujący, który oczywiście
powinien wskazywać na funkcję, której używamy do renderowania pojedynczego elementu na tej liście i tam, podobnie jak poprzednio, skonfiguruję
nową funkcję, zrobię to tutaj, w mojej funkcji komponentu, aby móc używać rekwizytów i nazwać ten przedmiot renderowania posiłku,
nazwa zależy wyłącznie od ciebie. Tam otrzymam dane o przedmiotach, wiem o
tym, ponieważ płaska lista przekazuje nas jako obiekt danych przedmiotu do tej funkcji, a tam musimy zwrócić
kod jsx, który powinien renderować przedmiot posiłku, a tam wyrenderuję zobacz i na razie, po prostu element
tekstowy tam, gdzie chcę wyprowadzić itemData. pozycja. tytuł, więc na razie tylko
nazwa posiłku, później również tam wyświetlimy obraz, ale na razie to zrobi i
teraz wyrenderuję przedmiot posiłku, którego używam tutaj jako funkcję renderowania przedmiotu. To powinno wyświetlić podstawową listę posiłków,
zobaczmy, czy to działa. Jeśli to uratujemy, a teraz wybierzmy powiedzmy włoski, widzę spaghetti z sosem
pomidorowym, nie wygląda źle.
Szybko i łatwo, widzimy cztery posiłki i hamburgery, widzimy klasycznego hamburgera, lekkie i urocze, widzimy
dwa przepisy, więc to wydaje się działać, wygląda na to, że przepisy są wybierane na podstawie
wybranej przez nas kategorii i to oczywiście świetnie. Teraz znów nadszedł czas, aby trochę popracować nad stylizacją, ponieważ nie jestem
pewien, ale myślę, że możemy to trochę poprawić.