Na ekranie kategorii chcemy się upewnić, że można tam dotknąć naszego
przedmiotu, więc zaimportuję dotykowy i zaimportuję tutaj dotykowe krycie, aby uzyskać niewielki efekt krycia, ale
oczywiście to od
Ciebie zależy, jaki wzór lub
który komponent użyjesz tam powinien znajdować się dotykalny komponent, który owijasz tutaj swój przedmiot tutaj
i
teraz na dotykowym kryciu, dodam onPress, abyśmy mogli zrobić coś po naciśnięciu.
Co chcemy robić
Chcemy przejść do ekranu kategorii posiłków, który jest rodzajem strony szczegółowej dla wybranej kategorii, aby wyświetlić wszystkie przepisy dla
tej kategorii. Nie mamy
jeszcze przepisów, ale nadal chcę przejść do strony.
Dlatego tutaj musimy uruchomić akcję nawigacyjną, a wcześniej zrobiliśmy to z rekwizytami do
nawigacji, prawda?
Problem polega na tym, że nie mamy tutaj dostępnych rekwizytów, ponieważ jesteśmy w funkcji renderowania elementu
siatki, która znajduje się poza naszym komponentem.
Teraz możemy po prostu przenieść to wewnątrz naszego komponentu, aby rozwiązać ten problem.
Jeśli stworzymy tam tę funkcję, będziemy mieli dostęp do rekwizytów, ponieważ jesteśmy teraz wewnątrz naszej funkcji
składowej i teraz będziemy mogli tutaj wywoływać nawigację. Możemy zadzwonić do nawigacji i chcę przejść do
nazwy trasy, a nazwa trasy, do której chcę się udać, znajduje się w naszym nawigatorze, odpowiednio
do kategorii posiłków, ponieważ chcemy załadować wszystkie posiłki dla wybranej kategorii.
Przechodzimy tutaj do kategorii posiłków i jeśli dodamy to i zachowamy to, zobaczymy, że nasza
stylizacja jest trochę zepsuta, naprawię to za sekundę, ale nawigacja
działa, mamy również efekt krycia, więc działa . Teraz naprawianie stylizacji jest łatwe, właśnie ją zgubiliśmy, ponieważ
owinąłem dotykowy krycie wokół mojego
widoku, musimy tylko dodać ten styl, który dodaje margines wokół naszego przedmiotu i tak dalej do dotykalnego
krycia zamiast tego widoku tutaj i tym, przywróciliśmy ten styl i teraz działa on tak, jak powinien.
Bardziej interesujące jest pytanie, w jaki sposób możemy ustawić tytuł nagłówka? Teraz mamy kilka opcji,
spójrzmy
na opcję numer jeden. Do każdego komponentu React, który załadujesz
jako ekran, co oznacza, co mapujesz na taką nazwę ekranową, na przykład w nawigatorze stosów, możesz dodać właściwość.
Pamiętaj, że ekran kategorii jest oczywiście składnikiem React, ale technicznie jest to funkcja Javascript,
prawda?
Jest to funkcja, która odbiera argument props, a następnie uruchamia to ciało, które zwraca trochę
jsx, a zatem React może używać tego jako komponentu,
ale technicznie jest to funkcja JavaScript.
Teraz funkcje Javascript są tylko obiektami, to
znaczy Javascript,
funkcje są obiektami, a na obiektach możemy dodawać właściwości. Tak więc ekran kategorii jest tylko obiektem
Javascript,
dlatego po utworzeniu możemy dodać właściwość.
Więc tutaj, po zdefiniowaniu funkcji ekranu naszych kategorii, a zatem tego obiektu, możemy uzyskać do niej dostęp i możemy dodać
właściwość z notacją kropkową, tak działa JavaScript, możesz po prostu dodać taką
właściwość.
Teraz możesz dodać specjalną właściwość, dla której będzie wyglądać nawigacja React, a jest to
właściwość opcji nawigacji.
Nie musisz go dodawać i nie będzie to stanowić problemu, jeśli
tego nie zrobisz, nie zrobiliśmy tego do tej pory, ale możesz go dodać, jeśli go dodasz, będzie respektowany przez React nawigacja.
Teraz istnieje wiele opcji, które możesz tam ustawić, a pełną listę można oczywiście
znaleźć w oficjalnych dokumentach.
W najprostszej formie po prostu przypisujesz tutaj obiekt JavaScript z
wieloma opcjami, które możesz teraz ustawić w tym obiekcie, a interesującą mnie opcją jest tytuł
nagłówka, który można po prostu ustawić na przykład na tekst kategorie posiłków, ponieważ jesteśmy na ekranie kategorii, więc byłby
to odpowiedni tytuł. Jeśli to
zapiszemy, w nagłówku zobaczysz teraz kategorie posiłków jako tytuł.
Teraz możesz również stylizować nagłówek tutaj za pomocą właściwości stylu nagłówka, bierze to obiekt
stylu, w którym możesz ogólnie skonfigurować to, co możesz ustawić jako style w widokach, i
tam możesz dodać kolor tła, który jest najczęstszy styl, który zazwyczaj stosujesz.
Teraz chcę ustawić kolor tutaj i zastosuję podejście, które zastosowałem już
wcześniej w kursie, dodam folder stałych, a tam dodam kolory. Plik js, w którym następnie wyeksportuję obiekt JavaScript, w którym
są ustawione wszystkie kolory, których chcę używać w aplikacji.
Tam ustawię kolor podstawowy, dla którego wybrałem kod szesnastkowy # 4a148C, ale oczywiście możesz eksperymentować z różnymi kolorami,
jeśli chcesz, i ustawię kolor akcentujący lub kolor dodatkowy, którym jest kod szesnastkowy #
ff6f00 i to są tylko wybrane przeze mnie kolory, jak już
wspomniałem, można oczywiście użyć różnych. Wracając do ekranu kategorii, chcę teraz używać
kolorów, w tym celu musisz go zaimportować, zaimportować kolory za pomocą dużego C, co jest
po prostu konwencją używaną do wskazania, że jest to stała, ze stałych / kolorów , również nazwany wielką literą
C, a następnie używamy kolorów. primaryColor na przykład. Jeśli to zrobisz, zobaczysz, że nagłówek ma
teraz ten ciemnofioletowy kolor, który wybrałem. To sprawia, że tytuł jest nieco trudny do
odczytania, ale na szczęście możesz go również stylizować, nie za pomocą stylu nagłówka, ponieważ
jest to tylko pole nagłówka, że tak powiem, nie jego treść, ale tytuł można stylizować kolorem odcienia nagłówka i znowu, oficjalne dokumenty
to miejsce, w którym można dowiedzieć się wszystkiego o tych dostępnych opcjach, to właśnie
o nich wiem,
to o nich można przeczytać.
Teraz kolor odcienia nagłówka może zawsze być kolorem, na przykład biały tutaj, który po prostu pasuje
do mojego domyślnego koloru, a teraz widzisz, że jest biały. Oczywiście możesz też chcieć inaczej wyglądać na Androida i iOS, możesz
spojrzeć tam, gdzie wygląda to bardziej na iOS, co oznacza, że nie masz
kolorowego tła, ale tylko tekst jest kolorowy i możesz to osiągnąć dzięki dobremu stary interfejs API platformy,
o którym dowiedziałeś się wcześniej w trakcie kursu. Możemy użyć interfejsu API platformy, aby
dynamicznie przełączać używane tu kolory w zależności od platformy, na której działa nasza aplikacja.
Więc tutaj dla koloru tła możemy użyć platformy. os i zobacz, czy to jest
Android, w którym to przypadku chcę użyć koloru podstawowego, w innym przypadku w tym potrójnym wyrażeniu
nie użyję koloru, więc możemy użyć tutaj bieli, na przykład normalnego białego tła, lub po prostu ustawić brak koloru
w ogóle tak, a otrzymasz domyślny kolor tła. Jeśli chodzi o kolor odcienia, jest taki
sam, sprawdzam, czy system operacyjny to Android, w którym
kolor tekstu powinien być biały, w przeciwnym razie ustawię to na Kolory. primaryColour, a dzięki temu masz teraz więcej iOS, ten bardziej
typowy wygląd iOS tutaj na iOS i masz domyślny wygląd Androida, który jest bardziej kolorowy na Androida.
Więc w ten sposób możesz ustawić opcje
nawigacji tutaj, a teraz co z tym ekranem, gdzie przechodzimy do naszych szczegółów tutaj, do włoskich posiłków
lub do szybkich i łatwych posiłków? Byłoby miło, gdybyśmy mogli zobaczyć tutaj szybko i łatwo lub włoski
tutaj w nagłówku.
Więc to kolejna rzecz, którą powinniśmy się zająć i do tego musimy przekazać pewne informacje
z tego ekranu na ten ekran. Więc zobaczymy, jak to działa w następnym filmie.