1
00:00:02,350 --> 00:00:07,000
Na ekranie kategorii chcemy się upewnić, że można tam dotknąć naszego

2
00:00:07,020 --> 00:00:13,590
przedmiotu, więc zaimportuję dotykowy i zaimportuję tutaj dotykowe krycie, aby uzyskać niewielki efekt krycia, ale

3
00:00:13,740 --> 00:00:15,000
oczywiście to od

4
00:00:15,090 --> 00:00:17,100
Ciebie zależy, jaki wzór lub

5
00:00:17,100 --> 00:00:23,730
który komponent użyjesz tam powinien znajdować się dotykalny komponent, który owijasz tutaj swój przedmiot tutaj

6
00:00:23,730 --> 00:00:24,750
i

7
00:00:24,750 --> 00:00:30,060
teraz na dotykowym kryciu, dodam onPress, abyśmy mogli zrobić coś po naciśnięciu.

8
00:00:30,060 --> 00:00:31,400
Co chcemy robić

9
00:00:31,440 --> 00:00:38,760
Chcemy przejść do ekranu kategorii posiłków, który jest rodzajem strony szczegółowej dla wybranej kategorii, aby wyświetlić wszystkie przepisy dla

10
00:00:38,760 --> 00:00:40,830
tej kategorii. Nie mamy

11
00:00:40,830 --> 00:00:43,910
jeszcze przepisów, ale nadal chcę przejść do strony.

12
00:00:44,610 --> 00:00:50,100
Dlatego tutaj musimy uruchomić akcję nawigacyjną, a wcześniej zrobiliśmy to z rekwizytami do

13
00:00:50,280 --> 00:00:51,470
nawigacji, prawda?

14
00:00:51,480 --> 00:00:56,550
Problem polega na tym, że nie mamy tutaj dostępnych rekwizytów, ponieważ jesteśmy w funkcji renderowania elementu

15
00:00:56,670 --> 00:00:59,090
siatki, która znajduje się poza naszym komponentem.

16
00:00:59,130 --> 00:01:04,610
Teraz możemy po prostu przenieść to wewnątrz naszego komponentu, aby rozwiązać ten problem.

17
00:01:04,770 --> 00:01:10,470
Jeśli stworzymy tam tę funkcję, będziemy mieli dostęp do rekwizytów, ponieważ jesteśmy teraz wewnątrz naszej funkcji

18
00:01:10,470 --> 00:01:17,070
składowej i teraz będziemy mogli tutaj wywoływać nawigację. Możemy zadzwonić do nawigacji i chcę przejść do

19
00:01:17,070 --> 00:01:23,310
nazwy trasy, a nazwa trasy, do której chcę się udać, znajduje się w naszym nawigatorze, odpowiednio

20
00:01:23,310 --> 00:01:27,510
do kategorii posiłków, ponieważ chcemy załadować wszystkie posiłki dla wybranej kategorii.

21
00:01:27,510 --> 00:01:33,660
Przechodzimy tutaj do kategorii posiłków i jeśli dodamy to i zachowamy to, zobaczymy, że nasza

22
00:01:33,660 --> 00:01:37,560
stylizacja jest trochę zepsuta, naprawię to za sekundę, ale nawigacja

23
00:01:37,560 --> 00:01:44,520
działa, mamy również efekt krycia, więc działa . Teraz naprawianie stylizacji jest łatwe, właśnie ją zgubiliśmy, ponieważ

24
00:01:44,520 --> 00:01:47,080
owinąłem dotykowy krycie wokół mojego

25
00:01:47,220 --> 00:01:53,760
widoku, musimy tylko dodać ten styl, który dodaje margines wokół naszego przedmiotu i tak dalej do dotykalnego

26
00:01:53,760 --> 00:02:00,230
krycia zamiast tego widoku tutaj i tym, przywróciliśmy ten styl i teraz działa on tak, jak powinien.

27
00:02:00,270 --> 00:02:06,630
Bardziej interesujące jest pytanie, w jaki sposób możemy ustawić tytuł nagłówka? Teraz mamy kilka opcji,

28
00:02:06,630 --> 00:02:07,720
spójrzmy

29
00:02:07,800 --> 00:02:13,740
na opcję numer jeden. Do każdego komponentu React, który załadujesz

30
00:02:13,740 --> 00:02:22,420
jako ekran, co oznacza, co mapujesz na taką nazwę ekranową, na przykład w nawigatorze stosów, możesz dodać właściwość.

31
00:02:22,410 --> 00:02:28,590
Pamiętaj, że ekran kategorii jest oczywiście składnikiem React, ale technicznie jest to funkcja Javascript,

32
00:02:28,590 --> 00:02:29,370
prawda?

33
00:02:29,370 --> 00:02:34,290
Jest to funkcja, która odbiera argument props, a następnie uruchamia to ciało, które zwraca trochę

34
00:02:34,290 --> 00:02:37,390
jsx, a zatem React może używać tego jako komponentu,

35
00:02:37,530 --> 00:02:39,840
ale technicznie jest to funkcja JavaScript.

36
00:02:39,840 --> 00:02:43,490
Teraz funkcje Javascript są tylko obiektami, to

37
00:02:43,500 --> 00:02:44,720
znaczy Javascript,

38
00:02:44,790 --> 00:02:52,800
funkcje są obiektami, a na obiektach możemy dodawać właściwości. Tak więc ekran kategorii jest tylko obiektem

39
00:02:52,890 --> 00:02:53,630
Javascript,

40
00:02:53,730 --> 00:02:57,150
dlatego po utworzeniu możemy dodać właściwość.

41
00:02:57,150 --> 00:03:07,040
Więc tutaj, po zdefiniowaniu funkcji ekranu naszych kategorii, a zatem tego obiektu, możemy uzyskać do niej dostęp i możemy dodać

42
00:03:07,040 --> 00:03:13,250
właściwość z notacją kropkową, tak działa JavaScript, możesz po prostu dodać taką

43
00:03:13,250 --> 00:03:14,250
właściwość.

44
00:03:14,260 --> 00:03:20,870
Teraz możesz dodać specjalną właściwość, dla której będzie wyglądać nawigacja React, a jest to

45
00:03:21,350 --> 00:03:22,970
właściwość opcji nawigacji.

46
00:03:22,970 --> 00:03:26,270
Nie musisz go dodawać i nie będzie to stanowić problemu, jeśli

47
00:03:26,270 --> 00:03:32,000
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.

48
00:03:33,210 --> 00:03:38,480
Teraz istnieje wiele opcji, które możesz tam ustawić, a pełną listę można oczywiście

49
00:03:38,480 --> 00:03:40,120
znaleźć w oficjalnych dokumentach.

50
00:03:40,270 --> 00:03:45,100
W najprostszej formie po prostu przypisujesz tutaj obiekt JavaScript z

51
00:03:45,100 --> 00:03:51,880
wieloma opcjami, które możesz teraz ustawić w tym obiekcie, a interesującą mnie opcją jest tytuł

52
00:03:52,030 --> 00:04:00,440
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

53
00:04:00,430 --> 00:04:03,970
to odpowiedni tytuł. Jeśli to

54
00:04:03,970 --> 00:04:09,090
zapiszemy, w nagłówku zobaczysz teraz kategorie posiłków jako tytuł.

55
00:04:09,120 --> 00:04:14,970
Teraz możesz również stylizować nagłówek tutaj za pomocą właściwości stylu nagłówka, bierze to obiekt

56
00:04:14,970 --> 00:04:21,200
stylu, w którym możesz ogólnie skonfigurować to, co możesz ustawić jako style w widokach, i

57
00:04:21,310 --> 00:04:27,090
tam możesz dodać kolor tła, który jest najczęstszy styl, który zazwyczaj stosujesz.

58
00:04:27,210 --> 00:04:32,610
Teraz chcę ustawić kolor tutaj i zastosuję podejście, które zastosowałem już

59
00:04:32,670 --> 00:04:43,350
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

60
00:04:43,440 --> 00:04:48,470
są ustawione wszystkie kolory, których chcę używać w aplikacji.

61
00:04:48,600 --> 00:04:56,790
Tam ustawię kolor podstawowy, dla którego wybrałem kod szesnastkowy # 4a148C, ale oczywiście możesz eksperymentować z różnymi kolorami,

62
00:04:56,790 --> 00:05:03,060
jeśli chcesz, i ustawię kolor akcentujący lub kolor dodatkowy, którym jest kod szesnastkowy #

63
00:05:03,270 --> 00:05:07,920
ff6f00 i to są tylko wybrane przeze mnie kolory, jak już

64
00:05:07,920 --> 00:05:13,850
wspomniałem, można oczywiście użyć różnych. Wracając do ekranu kategorii, chcę teraz używać

65
00:05:13,860 --> 00:05:21,030
kolorów, w tym celu musisz go zaimportować, zaimportować kolory za pomocą dużego C, co jest

66
00:05:21,030 --> 00:05:29,730
po prostu konwencją używaną do wskazania, że jest to stała, ze stałych / kolorów , również nazwany wielką literą

67
00:05:29,730 --> 00:05:38,420
C, a następnie używamy kolorów. primaryColor na przykład. Jeśli to zrobisz, zobaczysz, że nagłówek ma

68
00:05:38,420 --> 00:05:43,730
teraz ten ciemnofioletowy kolor, który wybrałem. To sprawia, że tytuł jest nieco trudny do

69
00:05:44,030 --> 00:05:48,670
odczytania, ale na szczęście możesz go również stylizować, nie za pomocą stylu nagłówka, ponieważ

70
00:05:48,720 --> 00:05:56,300
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

71
00:05:56,450 --> 00:06:01,090
to miejsce, w którym można dowiedzieć się wszystkiego o tych dostępnych opcjach, to właśnie

72
00:06:01,100 --> 00:06:02,380
o nich wiem,

73
00:06:02,390 --> 00:06:04,470
to o nich można przeczytać.

74
00:06:04,550 --> 00:06:10,820
Teraz kolor odcienia nagłówka może zawsze być kolorem, na przykład biały tutaj, który po prostu pasuje

75
00:06:10,820 --> 00:06:19,120
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

76
00:06:19,120 --> 00:06:23,690
spojrzeć tam, gdzie wygląda to bardziej na iOS, co oznacza, że nie masz

77
00:06:23,740 --> 00:06:29,560
kolorowego tła, ale tylko tekst jest kolorowy i możesz to osiągnąć dzięki dobremu stary interfejs API platformy,

78
00:06:29,560 --> 00:06:35,980
o którym dowiedziałeś się wcześniej w trakcie kursu. Możemy użyć interfejsu API platformy, aby

79
00:06:35,980 --> 00:06:42,490
dynamicznie przełączać używane tu kolory w zależności od platformy, na której działa nasza aplikacja.

80
00:06:42,490 --> 00:06:47,630
Więc tutaj dla koloru tła możemy użyć platformy. os i zobacz, czy to jest

81
00:06:47,640 --> 00:06:53,850
Android, w którym to przypadku chcę użyć koloru podstawowego, w innym przypadku w tym potrójnym wyrażeniu

82
00:06:53,920 --> 00:07:00,940
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

83
00:07:00,940 --> 00:07:07,150
w ogóle tak, a otrzymasz domyślny kolor tła. Jeśli chodzi o kolor odcienia, jest taki

84
00:07:07,150 --> 00:07:10,810
sam, sprawdzam, czy system operacyjny to Android, w którym

85
00:07:10,810 --> 00:07:20,360
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

86
00:07:20,360 --> 00:07:27,530
typowy wygląd iOS tutaj na iOS i masz domyślny wygląd Androida, który jest bardziej kolorowy na Androida.

87
00:07:27,530 --> 00:07:31,100
Więc w ten sposób możesz ustawić opcje

88
00:07:31,130 --> 00:07:39,170
nawigacji tutaj, a teraz co z tym ekranem, gdzie przechodzimy do naszych szczegółów tutaj, do włoskich posiłków

89
00:07:39,170 --> 00:07:45,500
lub do szybkich i łatwych posiłków? Byłoby miło, gdybyśmy mogli zobaczyć tutaj szybko i łatwo lub włoski

90
00:07:45,500 --> 00:07:46,400
tutaj w nagłówku.

91
00:07:46,400 --> 00:07:51,230
Więc to kolejna rzecz, którą powinniśmy się zająć i do tego musimy przekazać pewne informacje

92
00:07:51,230 --> 00:07:55,940
z tego ekranu na ten ekran. Więc zobaczymy, jak to działa w następnym filmie.