1
00:00:02,670 --> 00:00:08,610
Chcemy więc znaleźć posiłki, które pasują do wybranej przez nas kategorii, dlatego tak naprawdę w elemencie

2
00:00:08,610 --> 00:00:09,660
ekranu kategorii

3
00:00:09,660 --> 00:00:15,000
posiłków nie jesteśmy tak naprawdę zainteresowani wybraną kategorią, ale jesteśmy bardzo zainteresowani posiłkami należącymi

4
00:00:15,000 --> 00:00:17,150
do tej kategorii. Teraz możemy

5
00:00:17,150 --> 00:00:22,910
przede wszystkim zaimportować naszą tablicę posiłków, ponieważ zawiera ona wszystkie możliwe posiłki, które

6
00:00:22,910 --> 00:00:28,550
mamy, a teraz chcemy odfiltrować te, które faktycznie mają wybrany ID kategorii,

7
00:00:28,550 --> 00:00:35,480
tablicę ID kategorii, która ma każdy posiłek. Zobaczysz w danych fikcyjnych, że każdy posiłek ma tę tablicę

8
00:00:35,480 --> 00:00:36,680
identyfikatorów kategorii, do

9
00:00:36,680 --> 00:00:39,320
których należy, więc tego właśnie użyjemy do filtrowania.

10
00:00:39,320 --> 00:00:46,010
Dlatego na ekranie kategorii posiłków chcemy znaleźć posiłki należące do wybranej przez nas kategorii i będę je przechowywać w

11
00:00:46,070 --> 00:00:49,850
stałych nazwanych wyświetlanych posiłkach, nazwa oczywiście zależy od ciebie i tam,

12
00:00:49,880 --> 00:00:54,230
popatrzę na moje posiłki, więc jest to cała tablica posiłków i użyj

13
00:00:54,230 --> 00:01:00,260
metody filtrowania Javascript oferuje uruchomienie funkcji na każdym posiłku w tej tablicy, w której automatycznie otrzymujemy posiłek

14
00:01:00,260 --> 00:01:05,840
jako argument i gdzie musimy zwrócić wartość true, jeśli jest to jeden z posiłków, który chcemy

15
00:01:06,110 --> 00:01:10,740
do zachowania lub fałsz, jeśli jest to jeden z posiłków, którego nie chcemy

16
00:01:10,790 --> 00:01:17,510
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

17
00:01:17,510 --> 00:01:19,340
kategorii, który wybraliśmy tutaj.

18
00:01:20,090 --> 00:01:29,990
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

19
00:01:30,020 --> 00:01:36,470
jest on większy lub równy zero, ponieważ będzie to minus jeden, jeśli identyfikator kategorii

20
00:01:36,470 --> 00:01:43,490
nie jest część identyfikatorów kategorii, jeśli jest zerowa lub większa, to wiemy, że ten posiłek

21
00:01:43,490 --> 00:01:50,540
ma ten identyfikator kategorii w swojej tablicy identyfikatorów kategorii, a to da nam tablicę wyświetlanych

22
00:01:50,540 --> 00:01:53,690
posiłków dla wybranej kategorii, teraz właśnie tutaj

23
00:01:53,690 --> 00:01:57,710
chcemy uzyskać wynik. Teraz mam tutaj swój

24
00:01:57,710 --> 00:02:04,280
widok i w tym widoku ponownie chcę wyrenderować listę, a teraz będzie to lista, a

25
00:02:04,280 --> 00:02:11,360
nie siatka, więc zamiast przycisku, którego już nie będziemy potrzebować, zaimportuję FlatList tutaj, a następnie wyrenderuj moją

26
00:02:11,360 --> 00:02:13,590
FlatList w ten sposób, a

27
00:02:13,850 --> 00:02:19,910
teraz tam dane, które karmię, są oczywiście moją tablicą wyświetlanych posiłków, ponieważ są to

28
00:02:19,970 --> 00:02:22,490
posiłki, które chcę renderować na ekran.

29
00:02:22,700 --> 00:02:30,140
Teraz, jak wspomniano wcześniej, nowoczesne wersje React Native automatycznie szukają pola ID w posiłku, aby użyć go jako klucza w FlatList,

30
00:02:30,140 --> 00:02:37,970
jeśli używasz starszej wersji lub też po prostu ćwiczysz to ponownie, dodam ekstraktor kluczy tutaj, gdzie dostaję przedmiot i indeks, i wiem,

31
00:02:37,970 --> 00:02:44,150
że przy każdym posiłku będę miał pole identyfikatora, ponieważ to jest to, co ustawiliśmy tutaj w modelu i

32
00:02:44,150 --> 00:02:48,500
to będzie to, czego używam jako klucza na mojej liście, więc Użyję

33
00:02:48,500 --> 00:02:50,570
tego tutaj w ekstraktorze kluczy.

34
00:02:50,570 --> 00:02:56,060
Ważniejsze niż kluczowy ekstraktor jest jednak element renderujący, który oczywiście

35
00:02:56,090 --> 00:03:05,710
powinien wskazywać na funkcję, której używamy do renderowania pojedynczego elementu na tej liście i tam, podobnie jak poprzednio, skonfiguruję

36
00:03:05,880 --> 00:03:15,460
nową funkcję, zrobię to tutaj, w mojej funkcji komponentu, aby móc używać rekwizytów i nazwać ten przedmiot renderowania posiłku,

37
00:03:15,520 --> 00:03:21,310
nazwa zależy wyłącznie od ciebie. Tam otrzymam dane o przedmiotach, wiem o

38
00:03:21,310 --> 00:03:27,940
tym, ponieważ płaska lista przekazuje nas jako obiekt danych przedmiotu do tej funkcji, a tam musimy zwrócić

39
00:03:27,940 --> 00:03:34,810
kod jsx, który powinien renderować przedmiot posiłku, a tam wyrenderuję zobacz i na razie, po prostu element

40
00:03:34,810 --> 00:03:43,390
tekstowy tam, gdzie chcę wyprowadzić itemData. pozycja. tytuł, więc na razie tylko

41
00:03:43,390 --> 00:03:49,420
nazwa posiłku, później również tam wyświetlimy obraz, ale na razie to zrobi i

42
00:03:49,660 --> 00:04:00,240
teraz wyrenderuję przedmiot posiłku, którego używam tutaj jako funkcję renderowania przedmiotu. To powinno wyświetlić podstawową listę posiłków,

43
00:04:00,240 --> 00:04:07,560
zobaczmy, czy to działa. Jeśli to uratujemy, a teraz wybierzmy powiedzmy włoski, widzę spaghetti z sosem

44
00:04:07,560 --> 00:04:08,810
pomidorowym, nie wygląda źle.

45
00:04:08,880 --> 00:04:15,120
Szybko i łatwo, widzimy cztery posiłki i hamburgery, widzimy klasycznego hamburgera, lekkie i urocze, widzimy

46
00:04:15,120 --> 00:04:21,640
dwa przepisy, więc to wydaje się działać, wygląda na to, że przepisy są wybierane na podstawie

47
00:04:21,660 --> 00:04:28,500
wybranej przez nas kategorii i to oczywiście świetnie. Teraz znów nadszedł czas, aby trochę popracować nad stylizacją, ponieważ nie jestem

48
00:04:28,500 --> 00:04:31,170
pewien, ale myślę, że możemy to trochę poprawić.