1 00:00:02,250 --> 00:00:07,290 Teraz, gdy mamy już podstawowe informacje na temat nawigacji, że jesteśmy w 2 00:00:07,350 --> 00:00:14,200 stanie przekazywać dane, cofnijmy się i skupmy na aplikacji, którą tworzymy, która oczywiście nie wygląda świetnie 3 00:00:14,190 --> 00:00:18,450 i skupmy się na tych kategoriach tutaj w siatce. 4 00:00:18,450 --> 00:00:21,210 Możemy je dotknąć, ale oczywiście nie 5 00:00:21,210 --> 00:00:27,200 jest to aplikacja, z której chciałbyś skorzystać. Teraz, aby uczynić to bardziej użytecznym na 6 00:00:27,240 --> 00:00:30,400 ekranie kategorii tutaj, właściwie wezmę ten przedmiot tutaj, 7 00:00:30,490 --> 00:00:36,030 tę dotykalną nieprzezroczystość, więc ten element siatki i przekażę to na osobny komponent, nie 8 00:00:36,030 --> 00:00:43,210 coś, co musisz zrobić, ale coś, co możesz chcieć rozważyć po prostu, aby Twoje komponenty były szczuplejsze i czystsze. 9 00:00:43,260 --> 00:00:49,890 W tym celu w folderze składników dodam CategoryGridTile. Plik js, nazwa oczywiście zależy 10 00:00:49,890 --> 00:00:56,400 wyłącznie od Ciebie i tam musimy zaimportować React z React, z pewnością 11 00:00:56,400 --> 00:01:03,990 będziemy potrzebować trochę rzeczy z React Native, aby zbudować tam komponent, a mianowicie będziemy potrzebować 12 00:01:04,020 --> 00:01:11,550 dotykowego krycia oczywiście potrzebujemy widoku, potrzebujemy tekstu i potrzebujemy arkusza stylów, abyśmy mogli również stylizować 13 00:01:11,550 --> 00:01:14,900 to tutaj, a teraz możemy utworzyć 14 00:01:14,940 --> 00:01:22,980 komponent kafelka siatki kategorii, który otrzyma niektóre rekwizyty. Będziemy potrzebować arkusza stylów, który 15 00:01:22,980 --> 00:01:31,110 będę przechowywać w stałych stylach i oczywiście, jak zawsze, możemy później 16 00:01:31,110 --> 00:01:39,810 wyeksportować komponent, a wewnątrz funkcji komponentu zwrócę kod jsx, który właśnie wyciąłem 17 00:01:39,810 --> 00:01:46,810 z ekranu kategorii . Więc tutaj, konfigurowalny dotykowy krycie, ten element siatki jest skonfigurowany, ale 18 00:01:46,810 --> 00:01:52,560 będziemy musieli zmienić kilka rzeczy. Na przykład na ekranie kategorii konfiguruję tutaj styl elementu siatki. Teraz możemy zostawić go 19 00:01:52,560 --> 00:01:58,530 tutaj i w pewnym sensie przekazać go do naszego kafelka siatki, a następnie scalić go tam, jak 20 00:01:58,530 --> 00:02:03,510 się tego nauczyłeś, ale po prostu skonfiguruję całą stylistykę w samym komponencie, ponieważ użyjemy 21 00:02:03,540 --> 00:02:09,810 tylko kafelka siatki kategorii w siatka na ekranie kategorii. Dlatego dodam styl elementu siatki do arkusza 22 00:02:09,870 --> 00:02:10,830 stylów w 23 00:02:10,860 --> 00:02:17,280 tym pliku, dlatego to działa ponownie, program obsługi onPress jeszcze nie zadziała, naprawimy to wkrótce i teraz 24 00:02:17,280 --> 00:02:24,720 możemy wrócić do ekranu kategorii i oczywiście, importuj nasz komponent. Więc zaimportuj komponent kafelka siatki kategorii 25 00:02:24,750 --> 00:02:28,250 tam z folderu komponentów, a 26 00:02:28,290 --> 00:02:37,080 tam, kafelek siatki kategorii, a teraz po prostu zwróć go tutaj, gdy renderujemy nowy element. 27 00:02:37,080 --> 00:02:38,990 Teraz oczywiście tak, że 28 00:02:39,000 --> 00:02:45,300 to nie zadziała, musimy przesłać niektóre dane do kafelka siatki, aby działało tam poprawnie, a 29 00:02:45,300 --> 00:02:53,880 także musimy upewnić się, że naciśnięcie tego powoduje nawigację. Teraz przekażę potrzebne nam dane, czyli tytuł, 30 00:02:53,880 --> 00:03:01,140 więc to itemData. pozycja. tytuł i to jest teraz 31 00:03:01,140 --> 00:03:08,910 rekwizyt, którego możemy użyć w kafelku siatki kategorii. Chcę również przekazać inny rekwizyt, który przekazuje funkcję, którą 32 00:03:08,940 --> 00:03:18,240 możemy następnie wykonać w celu nawigacji, a ja nadam mu nazwę Wybierz, ale możesz nazwać to, jak chcesz i tam chcę 33 00:03:18,240 --> 00:03:26,700 po prostu wykonać kod, który aktualnie wykonuję w onPress. Więc wytnę to stąd z kafelka siatki kategorii, 34 00:03:26,700 --> 00:03:33,000 przeniosę to z powrotem do ekranu kategorii, do tej funkcji przechodzę do onSelect, 35 00:03:33,000 --> 00:03:38,700 a teraz wszystko, co musimy zrobić, to uruchomić onSelect z kafelka siatki 36 00:03:38,730 --> 00:03:48,110 kategorii, to oczywiście normalny wzór, który znasz z React. Wracając do kafelka siatki kategorii, onPress może po prostu wskazać rekwizyty 37 00:03:48,320 --> 00:03:52,390 onSelect, aby uruchomić funkcję przekazaną w rekwidzie onSelect. 38 00:03:52,550 --> 00:03:57,370 Teraz tytuł, który tu wypisuję, może być tylko rekwizytami. tytuł, ponieważ otrzymujemy ten 39 00:03:57,380 --> 00:04:03,380 tytułowy rekwizyt jako rekwizyt na naszym kafelku siatki kategorii, przekazujemy go tutaj. 40 00:04:05,100 --> 00:04:11,460 Dzięki temu nieco podzieliliśmy nasz komponent, ale oczywiście teraz chcę też 41 00:04:11,460 --> 00:04:17,130 trochę popracować nad stylizacją. Wracając do kafelka siatki kategorii, na przykład 42 00:04:17,130 --> 00:04:21,580 chcę użyć koloru, który konfiguruję, ponieważ każda kategoria otrzymuje tutaj kolor przechowywany 43 00:04:21,660 --> 00:04:28,620 w tej właściwości koloru, więc dobrze byłoby z niego skorzystać. W związku z tym możemy również przesłać kafelek siatki kategorii, kolor naprzód tutaj, 44 00:04:28,620 --> 00:04:34,070 możesz oczywiście nazwać ten rekwizyt, jak chcesz na elemencie. właściwość koloru 45 00:04:34,200 --> 00:04:40,950 i tutaj musi być. kolor, ponieważ nazwaliśmy kolor właściwości tutaj w modelu, a teraz 46 00:04:40,950 --> 00:04:44,360 w kafelku siatki kategorii, możemy użyć tego koloru, aby nadać temu styl. 47 00:04:44,460 --> 00:04:50,760 Jak więc to stylizować, jak to powinno wyglądać? Dodając styl do widoku, który mamy 48 00:04:50,760 --> 00:04:56,460 wewnątrz dotykalnego krycia, ponieważ sam dotykalny komponent krycia jest niewidoczny, ale widok 49 00:04:56,460 --> 00:05:01,250 nie jest widoczny, możemy przekazać obiekt i ustawić kolor 50 00:05:01,260 --> 00:05:04,620 tła na rekwizyty. kolor. 51 00:05:04,740 --> 00:05:08,860 Zobaczmy, jak to wygląda, jeśli to zapiszemy i poczekamy na ponowne załadowanie, 52 00:05:08,950 --> 00:05:11,080 nie wygląda to źle, ale jest 53 00:05:11,110 --> 00:05:15,970 zbyt małe, powinno wypełnić cały element siatki, a nie tylko wiersz z zawartym tam tekstem. 54 00:05:16,180 --> 00:05:25,210 Tak więc, aby to poprawić, faktycznie będę miał ten wbudowany styl, ale połączę go razem w otaczający obiekt 55 00:05:25,210 --> 00:05:33,770 z inną konfiguracją stylów, którą skonfigurowałem w arkuszu stylów i nadam nazwę temu kontenerowi, możesz nazwać go tak, 56 00:05:33,790 --> 00:05:35,610 jak chcesz chcesz, 57 00:05:35,680 --> 00:05:39,270 kontener stylów, wyciągnij również wszystkie pary 58 00:05:39,620 --> 00:05:47,450 klucz-wartość, aby scalić te style tu i teraz, kontener jest obiektem arkusza stylów, który możemy dodać 59 00:05:47,540 --> 00:05:54,530 tam i tutaj, możemy ustawić flex jeden, aby upewnić się, że każdy przedmiot wypełnia 60 00:05:54,530 --> 00:05:58,880 całe dostępne miejsce, a teraz wygląda to znacznie lepiej. 61 00:05:59,030 --> 00:06:02,330 Teraz wciąż nie jestem w 62 00:06:03,080 --> 00:06:10,080 100% zadowolony, chcę dodać tutaj promień obramowania, powiedzmy 10, aby mieć zaokrąglone rogi 63 00:06:10,400 --> 00:06:14,310 i oczywiście możesz tutaj ustawić dowolną stylizację, 64 00:06:14,570 --> 00:06:28,320 wolisz, ja ustawi również cień w kolorze czarnym i krycie cienia w wysokości. 26 i przesunięcie cienia o szerokości 0, wysokości 2 i promieniu cienia 65 00:06:28,380 --> 00:06:37,010 10 i elewacji 3, elewacja dla Androida, jeśli pamiętasz, ponieważ te właściwości cienia wpływają tylko 66 00:06:37,020 --> 00:06:42,720 na iOS, więc otrzymujemy trochę tej trójwymiarowej karty wygląd 67 00:06:42,810 --> 00:06:48,680 i oczywiście, jak już wspomniałem, możesz stylizować to w dowolny sposób. 68 00:06:48,690 --> 00:06:54,240 Teraz dodatkowo chcę się upewnić, że ten tekst znajduje się w prawym dolnym rogu 69 00:06:54,240 --> 00:06:55,380 i ma 70 00:06:55,380 --> 00:07:00,960 trochę dopełnienia, oczywiście, trochę odstępów wokół niego. Dodam tutaj trochę dopełnienia, powiedzmy 10, a teraz 71 00:07:01,140 --> 00:07:08,730 ustaw justowanie zawartości na flex-end, kierunek flex w kontenerze jest oczywiście od góry do dołu, ponieważ jest kolumna, więc flex koniec 72 00:07:08,730 --> 00:07:14,340 przeniesie to do tu i teraz na dole, aby również przesunąć go w prawo na osi 73 00:07:14,340 --> 00:07:17,100 poziomej, ustawiam elementy wyrównywania również na 74 00:07:17,220 --> 00:07:22,770 wygięcie końca, a to przenosi to na koniec osi poprzecznej, która jest od lewej do 75 00:07:22,800 --> 00:07:29,900 prawej w normalnym widoku, w którym nie zmień kierunek gięcia. Dzięki temu otrzymujemy ten wygląd, który powiedziałbym, że 76 00:07:29,930 --> 00:07:36,230 jest lepszy, ale oczywiście tekst tutaj, styl tekstu może się również zmienić, a nieco więcej wypełnienia 77 00:07:36,230 --> 00:07:37,430 może wyglądać 78 00:07:37,430 --> 00:07:43,100 dobrze, może 15, ale oczywiście możemy z tym eksperymentować, a także jedna ważna dodatkowa 79 00:07:43,100 --> 00:07:47,330 uwaga: w tej aplikacji nie skupię się na tworzeniu całkowicie 80 00:07:47,330 --> 00:07:53,450 responsywnego doświadczenia, postaram się zachować to krótkie i zwięzłe, ponieważ głównym celem tego modułu jest 81 00:07:53,690 --> 00:07:58,720 oczywiście nawigacja, dlatego nie zoptymalizuję tego dla wszystkich możliwych ekranów i platform. 82 00:07:58,720 --> 00:08:01,200 Jest to coś, co możesz oczywiście zrobić jako 83 00:08:01,250 --> 00:08:06,860 praktykę, nie będę przestrzegać, aby niepotrzebnie nie nadmuchać tego modułu, więc po prostu skonfiguruję stylizację, która wygląda 84 00:08:06,860 --> 00:08:08,450 dobrze na tych emulatorach. 85 00:08:08,450 --> 00:08:14,520 To powiedziawszy, trochę więcej dopełnienia może mieć sens, a także chcę tutaj 86 00:08:14,720 --> 00:08:17,740 nadać tytuł, dlatego dodam, powiedzmy, styl 87 00:08:17,810 --> 00:08:19,330 tytułu tutaj, 88 00:08:19,430 --> 00:08:22,040 ustawiony w arkuszu stylów, dodajmy 89 00:08:22,040 --> 00:08:28,670 go tu i tam, chcę użyć moja rodzina czcionek, otwarta bez pogrubienia, z 90 00:08:28,670 --> 00:08:39,110 której mogę oczywiście skorzystać, ponieważ rejestruję ją tutaj w aplikacji. js, więc teraz dodaje się open sans pogrubienie i może również nieco zmienić 91 00:08:39,110 --> 00:08:42,870 rozmiar czcionki na 22. Oszczędzamy to, 92 00:08:42,880 --> 00:08:45,340 to wygląda całkiem przyzwoicie. 93 00:08:45,470 --> 00:08:48,560 Teraz jest ostatnia rzecz, którą chcę 94 00:08:49,750 --> 00:08:58,330 zrobić na kafelku siatki kategorii, w tekście tutaj ustawię liczbę wierszy na 2, aby każdy tekst, który byłby dłuższy niż 95 00:08:58,330 --> 00:09:07,800 ten, został po prostu odcięty, co moim zdaniem wygląda trochę ładniej. I na koniec, możesz zauważyć, że na Androidzie 96 00:09:07,870 --> 00:09:14,560 dla lekkich i uroczych, to jest po lewej stronie, ponieważ jest podzielone na 97 00:09:14,560 --> 00:09:19,670 dwie linie, aby upewnić się, że jest to również po 98 00:09:19,720 --> 00:09:27,900 prawej stronie, tutaj tytuł, ustawię wyrównaj tekst do prawej, aby wymusić, aby było po prawej stronie. 99 00:09:28,000 --> 00:09:30,420 Poczekajmy więc na ponowne załadowanie, 100 00:09:33,070 --> 00:09:35,720 a teraz wygląda to tak, jak powinno. 101 00:09:35,720 --> 00:09:38,020 Teraz nie jest tak źle, 102 00:09:38,060 --> 00:09:43,850 teraz możesz zauważyć, że efekt wygląda trochę dziwnie, jeśli stuknę tutaj element, otrzymamy 103 00:09:43,850 --> 00:09:46,520 tę dziwną dodatkową ramkę wokół niego. 104 00:09:46,550 --> 00:09:53,750 Teraz jeszcze jedną rzecz, którą tu zrobię, która jest całkowicie opcjonalna, ale dodam ją tutaj, dodam 105 00:09:53,750 --> 00:10:00,710 API platformy, a także dodam natywną informację zwrotną, aby faktycznie użyć efektu tętnienia zamiast krycia, jeśli 106 00:10:00,710 --> 00:10:02,090 jest obsługiwany. 107 00:10:02,090 --> 00:10:11,600 Więc tutaj będę mieć mój dotykalny komponent, którym domyślnie jest 108 00:10:11,790 --> 00:10:21,510 dotykalne krycie, ale jeśli platforma. os jest równy systemowi Android, a jak dowiedziałeś się wcześniej na kursie, wersja 109 00:10:21,510 --> 00:10:26,340 jest większa lub równa 21, wtedy wiemy, że obsługiwane jest dotykalne sprzężenie 110 00:10:26,340 --> 00:10:31,100 zwrotne, więc ustawię dotykowy komponent na taki sam, jak to możliwe. 111 00:10:31,290 --> 00:10:35,820 Użyj dotykowego komponentu tutaj zamiast dotykowego krycia, a dzięki 112 00:10:35,820 --> 00:10:38,730 temu powinniśmy mieć przyjemny efekt 113 00:10:38,730 --> 00:10:41,000 tętnienia na Androidzie, 114 00:10:41,130 --> 00:10:46,070 na iOS mamy efekt krycia, który chcemy, a na Androidzie 115 00:10:46,080 --> 00:10:50,520 mamy teraz efekt tętnienia, ale styl jest wyłączony. 116 00:10:50,550 --> 00:10:57,830 Możemy to jednak naprawić, dodając dodatkowy widok wokół tego, który odbiera nasz styl elementów siatki 117 00:10:57,840 --> 00:11:01,840 zamiast dotykalnego komponentu tutaj, a wraz z tym 118 00:11:02,010 --> 00:11:08,700 musimy tylko dodać jedną dodatkową właściwość stylu na dotykalnym komponencie i ustawić flex jeden. 119 00:11:08,730 --> 00:11:10,430 Robię to z wbudowanym stylem 120 00:11:10,440 --> 00:11:16,770 tutaj szybko i brudnie, możesz dodać osobny styl w arkuszu stylów. Dzięki temu wygląda i działa tak samo 121 00:11:16,800 --> 00:11:17,800 na iOS, 122 00:11:17,910 --> 00:11:21,370 a teraz także na Androidzie, efekt marszczenia jest obecny. 123 00:11:21,370 --> 00:11:27,870 Teraz jednak nie korzysta z naszych zaokrąglonych rogów, zamiast tego renderuje kwadrat lub prostokąt, a wcześniej nauczyłeś się, 124 00:11:28,080 --> 00:11:31,100 jak to naprawić. Aby to naprawić, 125 00:11:31,110 --> 00:11:35,820 wystarczy nałożyć element siatki, dodajemy promień obramowania 10, a następnie 126 00:11:35,910 --> 00:11:42,930 dodajemy ukryte przepełnienie, aby upewnić się, że elementy potomne nie będą renderowane poza tym widokiem 127 00:11:42,930 --> 00:11:43,950 zawijania, co 128 00:11:43,950 --> 00:11:49,010 oznacza, że tętnienie efekt nie może wyjść poza tę zaokrągloną ramkę. 129 00:11:49,020 --> 00:11:54,540 Teraz mamy ten wygląd i to jest jedyna zmiana, którą chcę wprowadzić tutaj dla różnych platform, 130 00:11:54,540 --> 00:11:58,050 a przy tym nie wygląda to tak źle, powiedziałbym. 131 00:11:58,050 --> 00:12:04,110 Teraz możesz oczywiście poprawić jego wygląd, dostosować rozmiar czcionki i tak dalej, aby wyglądało 132 00:12:04,110 --> 00:12:07,080 to naprawdę dobrze na testowanych urządzeniach. 133 00:12:07,080 --> 00:12:11,940 Cieszę się z tego wyglądu i teraz naprawdę nadszedł czas, aby renderować niektóre przepisy, 134 00:12:11,970 --> 00:12:13,470 kiedy wybieramy tutaj kategorię.