Jak więc uzyskać informacje o klikniętej kategorii, którą wybraliśmy z ekranu
kategorii do ekranu kategorii posiłków? Dobrze na ekranie kategorii, w którym nawigujemy
do kategorii posiłków,
w przypadku tej czynności nawigacyjnej oprócz nazwy trasy możemy również przekazać parametry.
To kolejny klucz, który ten obiekt, który przekazałeś do nawigacji, akceptuje i to sam staje się obiektem
par klucz-wartość, dowolnych par klucz-wartość i tylu par klucz-wartość, ile chcesz.
Są to po prostu parametry, dodatkowe dane, które przesyłasz do ładowanego nowego ekranu.
Teraz możesz ustawić parametr o nazwie ID kategorii, a nazwa zależy wyłącznie od Ciebie,
może to
być tylko identyfikator, identyfikator lub moje hobby, cokolwiek budujesz i jakiekolwiek dane, które musisz przesłać, tutaj przesyłamy
identyfikator kategorii, dlatego nadam mu takie imię.
To powinno być teraz w naszym scenariuszu, oczywiście,
identyfikator kategorii, którą wybraliśmy.
Teraz oczywiście otrzymujemy tutaj nasze dane pozycji dla każdego renderowanego elementu
siatki, który przechowuje element i ma on tytuł, kolor i studnię, identyfikator, więc identyfikator
kategorii to itemData. pozycja. ID.
Teraz przesyłamy ten identyfikator do nowego ekranu, który jest ładowany, i oczywiście jest to
ważna rzecz, pozwala nam to
następnie wykorzystać te dane na nowym ekranie. W jaki sposób? Chodźmy tam, przejdźmy do ekranu
kategorii posiłków i zobaczmy, jak możemy wyodrębnić ten parametr.
Wiemy, że go otrzymamy,
jak możemy teraz uzyskać do niego dostęp?
W tym celu możemy ponownie
użyć nawigacji rekwizytów, więc otrzymujemy ten specjalny rekwizyt, ponieważ ten komponent jest ładowany
za pomocą nawigatora React Navigation i podczas nawigacji, nie mamy tylko nawigacji i push i
tak dalej, mamy również getParam, metodę umożliwiającą wyodrębnienie otrzymanego parametru. getParam pobiera ciąg z nazwą parametru, który chcemy
wyodrębnić i oczywiście powinna to być nazwa wybrana tutaj jako
klucz w tym obiekcie params.
Więc tutaj dodałem identyfikator kategorii, stąd właśnie tej nazwy chcę tutaj użyć.
To da mi identyfikator kota, ten identyfikator kategorii, To da mi wartość, którą przechowujemy tutaj pod tą kluczową nazwą, w
tym przypadku jest
to
identyfikator, więc to jest
wartość, którą wyodrębniamy dla ID kategorii w kategorii ekran posiłków.
Więc teraz mamy identyfikator kota i możemy go teraz użyć, aby oczywiście uzyskać dostęp do wszystkich posiłków, które pasują
do tej
kategorii, w tej chwili nie mamy posiłków, więc będziemy musieli to przełożyć, ale przynajmniej możemy
to wykorzystać aby uzyskać tytuł naszej kategorii i użyć go tutaj i do tego, wszystko, co musimy oczywiście
zrobić, to zaimportować kategorie, więc nasza tablica kategorii tutaj z data / dummy-data i mamy identyfikator, mamy tablicę kategorii , oczywiście możemy znaleźć
naszą wybraną kategorię lub cokolwiek, co chcesz nazwać, patrząc na kategorie i tam możemy użyć find, który przyjmuje
funkcję, którą wykonuje na każdym elemencie w tablicy, a więc na każdej kategorii i daje
nam pozycja, w której ta funkcja zwraca wartość true, co powinno mieć miejsce, jeśli
identyfikator kategorii, na którą patrzymy, odpowiada identyfikatorowi kota, który pobieramy z naszych parametrów.
To daje nam wybraną kategorię i aby
udowodnić, że to działa, wyślę to tutaj w komponencie tekstowym, wyprowadzę selectedCategory.
tytuł tutaj. Teraz, jeśli wrócimy i przejdziemy do tej kategorii, widzimy tutaj włoski tuż
nad moimi przyciskami, widzimy teraz szybki
i łatwy, więc to działa. W ten sposób przekazujemy
dane i jak je wyodrębniamy i oczywiście możesz przekazać wiele parametrów, tyle ile potrzebujesz
i parametry nie muszą być identyfikatorami, możesz przekazywać obiekty, możesz przekazywać tekst, liczby i tablice, bez
względu na dane, które musisz przekazać, możesz przekazać. Możesz jednak zauważyć, że oczywiście dzięki temu możemy użyć naszej kategorii tutaj na
ekranie, ale chcemy ją użyć tutaj w nagłówku.
Zajmijmy się tym w następnym wykładzie.