Teraz, gdy mamy już podstawowe informacje na temat nawigacji, że jesteśmy w
stanie przekazywać dane, cofnijmy się i skupmy na aplikacji, którą tworzymy, która oczywiście nie wygląda świetnie
i skupmy się na tych kategoriach tutaj w siatce.
Możemy je dotknąć, ale oczywiście nie
jest to aplikacja, z której chciałbyś skorzystać. Teraz, aby uczynić to bardziej użytecznym na
ekranie kategorii tutaj, właściwie wezmę ten przedmiot tutaj,
tę dotykalną nieprzezroczystość, więc ten element siatki i przekażę to na osobny komponent, nie
coś, co musisz zrobić, ale coś, co możesz chcieć rozważyć po prostu, aby Twoje komponenty były szczuplejsze i czystsze.
W tym celu w folderze składników dodam CategoryGridTile. Plik js, nazwa oczywiście zależy
wyłącznie od Ciebie i tam musimy zaimportować React z React, z pewnością
będziemy potrzebować trochę rzeczy z React Native, aby zbudować tam komponent, a mianowicie będziemy potrzebować
dotykowego krycia oczywiście potrzebujemy widoku, potrzebujemy tekstu i potrzebujemy arkusza stylów, abyśmy mogli również stylizować
to tutaj, a teraz możemy utworzyć
komponent kafelka siatki kategorii, który otrzyma niektóre rekwizyty. Będziemy potrzebować arkusza stylów, który
będę przechowywać w stałych stylach i oczywiście, jak zawsze, możemy później
wyeksportować komponent, a wewnątrz funkcji komponentu zwrócę kod jsx, który właśnie wyciąłem
z ekranu kategorii . Więc tutaj, konfigurowalny dotykowy krycie, ten element siatki jest skonfigurowany, ale
będziemy musieli zmienić kilka rzeczy. Na przykład na ekranie kategorii konfiguruję tutaj styl elementu siatki. Teraz możemy zostawić go
tutaj i w pewnym sensie przekazać go do naszego kafelka siatki, a następnie scalić go tam, jak
się tego nauczyłeś, ale po prostu skonfiguruję całą stylistykę w samym komponencie, ponieważ użyjemy
tylko kafelka siatki kategorii w siatka na ekranie kategorii. Dlatego dodam styl elementu siatki do arkusza
stylów w
tym pliku, dlatego to działa ponownie, program obsługi onPress jeszcze nie zadziała, naprawimy to wkrótce i teraz
możemy wrócić do ekranu kategorii i oczywiście, importuj nasz komponent. Więc zaimportuj komponent kafelka siatki kategorii
tam z folderu komponentów, a
tam, kafelek siatki kategorii, a teraz po prostu zwróć go tutaj, gdy renderujemy nowy element.
Teraz oczywiście tak, że
to nie zadziała, musimy przesłać niektóre dane do kafelka siatki, aby działało tam poprawnie, a
także musimy upewnić się, że naciśnięcie tego powoduje nawigację. Teraz przekażę potrzebne nam dane, czyli tytuł,
więc to itemData. pozycja. tytuł i to jest teraz
rekwizyt, którego możemy użyć w kafelku siatki kategorii. Chcę również przekazać inny rekwizyt, który przekazuje funkcję, którą
możemy następnie wykonać w celu nawigacji, a ja nadam mu nazwę Wybierz, ale możesz nazwać to, jak chcesz i tam chcę
po prostu wykonać kod, który aktualnie wykonuję w onPress. Więc wytnę to stąd z kafelka siatki kategorii,
przeniosę to z powrotem do ekranu kategorii, do tej funkcji przechodzę do onSelect,
a teraz wszystko, co musimy zrobić, to uruchomić onSelect z kafelka siatki
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
onSelect, aby uruchomić funkcję przekazaną w rekwidzie onSelect.
Teraz tytuł, który tu wypisuję, może być tylko rekwizytami. tytuł, ponieważ otrzymujemy ten
tytułowy rekwizyt jako rekwizyt na naszym kafelku siatki kategorii, przekazujemy go tutaj.
Dzięki temu nieco podzieliliśmy nasz komponent, ale oczywiście teraz chcę też
trochę popracować nad stylizacją. Wracając do kafelka siatki kategorii, na przykład
chcę użyć koloru, który konfiguruję, ponieważ każda kategoria otrzymuje tutaj kolor przechowywany
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,
możesz oczywiście nazwać ten rekwizyt, jak chcesz na elemencie. właściwość koloru
i tutaj musi być. kolor, ponieważ nazwaliśmy kolor właściwości tutaj w modelu, a teraz
w kafelku siatki kategorii, możemy użyć tego koloru, aby nadać temu styl.
Jak więc to stylizować, jak to powinno wyglądać? Dodając styl do widoku, który mamy
wewnątrz dotykalnego krycia, ponieważ sam dotykalny komponent krycia jest niewidoczny, ale widok
nie jest widoczny, możemy przekazać obiekt i ustawić kolor
tła na rekwizyty. kolor.
Zobaczmy, jak to wygląda, jeśli to zapiszemy i poczekamy na ponowne załadowanie,
nie wygląda to źle, ale jest
zbyt małe, powinno wypełnić cały element siatki, a nie tylko wiersz z zawartym tam tekstem.
Tak więc, aby to poprawić, faktycznie będę miał ten wbudowany styl, ale połączę go razem w otaczający obiekt
z inną konfiguracją stylów, którą skonfigurowałem w arkuszu stylów i nadam nazwę temu kontenerowi, możesz nazwać go tak,
jak chcesz chcesz,
kontener stylów, wyciągnij również wszystkie pary
klucz-wartość, aby scalić te style tu i teraz, kontener jest obiektem arkusza stylów, który możemy dodać
tam i tutaj, możemy ustawić flex jeden, aby upewnić się, że każdy przedmiot wypełnia
całe dostępne miejsce, a teraz wygląda to znacznie lepiej.
Teraz wciąż nie jestem w
100% zadowolony, chcę dodać tutaj promień obramowania, powiedzmy 10, aby mieć zaokrąglone rogi
i oczywiście możesz tutaj ustawić dowolną stylizację,
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
10 i elewacji 3, elewacja dla Androida, jeśli pamiętasz, ponieważ te właściwości cienia wpływają tylko
na iOS, więc otrzymujemy trochę tej trójwymiarowej karty wygląd
i oczywiście, jak już wspomniałem, możesz stylizować to w dowolny sposób.
Teraz dodatkowo chcę się upewnić, że ten tekst znajduje się w prawym dolnym rogu
i ma
trochę dopełnienia, oczywiście, trochę odstępów wokół niego. Dodam tutaj trochę dopełnienia, powiedzmy 10, a teraz
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
przeniesie to do tu i teraz na dole, aby również przesunąć go w prawo na osi
poziomej, ustawiam elementy wyrównywania również na
wygięcie końca, a to przenosi to na koniec osi poprzecznej, która jest od lewej do
prawej w normalnym widoku, w którym nie zmień kierunek gięcia. Dzięki temu otrzymujemy ten wygląd, który powiedziałbym, że
jest lepszy, ale oczywiście tekst tutaj, styl tekstu może się również zmienić, a nieco więcej wypełnienia
może wyglądać
dobrze, może 15, ale oczywiście możemy z tym eksperymentować, a także jedna ważna dodatkowa
uwaga: w tej aplikacji nie skupię się na tworzeniu całkowicie
responsywnego doświadczenia, postaram się zachować to krótkie i zwięzłe, ponieważ głównym celem tego modułu jest
oczywiście nawigacja, dlatego nie zoptymalizuję tego dla wszystkich możliwych ekranów i platform.
Jest to coś, co możesz oczywiście zrobić jako
praktykę, nie będę przestrzegać, aby niepotrzebnie nie nadmuchać tego modułu, więc po prostu skonfiguruję stylizację, która wygląda
dobrze na tych emulatorach.
To powiedziawszy, trochę więcej dopełnienia może mieć sens, a także chcę tutaj
nadać tytuł, dlatego dodam, powiedzmy, styl
tytułu tutaj,
ustawiony w arkuszu stylów, dodajmy
go tu i tam, chcę użyć moja rodzina czcionek, otwarta bez pogrubienia, z
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ć
rozmiar czcionki na 22. Oszczędzamy to,
to wygląda całkiem przyzwoicie.
Teraz jest ostatnia rzecz, którą chcę
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ż
ten, został po prostu odcięty, co moim zdaniem wygląda trochę ładniej. I na koniec, możesz zauważyć, że na Androidzie
dla lekkich i uroczych, to jest po lewej stronie, ponieważ jest podzielone na
dwie linie, aby upewnić się, że jest to również po
prawej stronie, tutaj tytuł, ustawię wyrównaj tekst do prawej, aby wymusić, aby było po prawej stronie.
Poczekajmy więc na ponowne załadowanie,
a teraz wygląda to tak, jak powinno.
Teraz nie jest tak źle,
teraz możesz zauważyć, że efekt wygląda trochę dziwnie, jeśli stuknę tutaj element, otrzymamy
tę dziwną dodatkową ramkę wokół niego.
Teraz jeszcze jedną rzecz, którą tu zrobię, która jest całkowicie opcjonalna, ale dodam ją tutaj, dodam
API platformy, a także dodam natywną informację zwrotną, aby faktycznie użyć efektu tętnienia zamiast krycia, jeśli
jest obsługiwany.
Więc tutaj będę mieć mój dotykalny komponent, którym domyślnie jest
dotykalne krycie, ale jeśli platforma. os jest równy systemowi Android, a jak dowiedziałeś się wcześniej na kursie, wersja
jest większa lub równa 21, wtedy wiemy, że obsługiwane jest dotykalne sprzężenie
zwrotne, więc ustawię dotykowy komponent na taki sam, jak to możliwe.
Użyj dotykowego komponentu tutaj zamiast dotykowego krycia, a dzięki
temu powinniśmy mieć przyjemny efekt
tętnienia na Androidzie,
na iOS mamy efekt krycia, który chcemy, a na Androidzie
mamy teraz efekt tętnienia, ale styl jest wyłączony.
Możemy to jednak naprawić, dodając dodatkowy widok wokół tego, który odbiera nasz styl elementów siatki
zamiast dotykalnego komponentu tutaj, a wraz z tym
musimy tylko dodać jedną dodatkową właściwość stylu na dotykalnym komponencie i ustawić flex jeden.
Robię to z wbudowanym stylem
tutaj szybko i brudnie, możesz dodać osobny styl w arkuszu stylów. Dzięki temu wygląda i działa tak samo
na iOS,
a teraz także na Androidzie, efekt marszczenia jest obecny.
Teraz jednak nie korzysta z naszych zaokrąglonych rogów, zamiast tego renderuje kwadrat lub prostokąt, a wcześniej nauczyłeś się,
jak to naprawić. Aby to naprawić,
wystarczy nałożyć element siatki, dodajemy promień obramowania 10, a następnie
dodajemy ukryte przepełnienie, aby upewnić się, że elementy potomne nie będą renderowane poza tym widokiem
zawijania, co
oznacza, że tętnienie efekt nie może wyjść poza tę zaokrągloną ramkę.
Teraz mamy ten wygląd i to jest jedyna zmiana, którą chcę wprowadzić tutaj dla różnych platform,
a przy tym nie wygląda to tak źle, powiedziałbym.
Teraz możesz oczywiście poprawić jego wygląd, dostosować rozmiar czcionki i tak dalej, aby wyglądało
to naprawdę dobrze na testowanych urządzeniach.
Cieszę się z tego wyglądu i teraz naprawdę nadszedł czas, aby renderować niektóre przepisy,
kiedy wybieramy tutaj kategorię.