Zastąpmy tutaj zawartość fałszywego ekranu kategorii siatką kategorii, ponieważ w końcu taki jest
pomysł tego ekranu. Teraz możemy
użyć komponentu, którego używaliśmy wcześniej, a mianowicie FlatList.
Do tej pory używaliśmy tego do normalnych
list, możesz też renderować siatki za jego pomocą i właśnie to zrobimy tutaj.
Teraz na tym ekranie kategorii zamienię wszystko na FlatList tutaj i wypiszę tylko moją płaską listę tutaj na tym ekranie, który wrócę
na
końcu i ustawię tutaj kolumny num, które są nową właściwością, której wcześniej nie widzieliśmy do 2, a
to określa, ile kolumn chcemy mieć. Domyślna wartość to 1, która jest
normalną listą, ale możesz mieć w niej więcej niż jedną kolumnę, co daje efektywną siatkę.
Teraz możemy renderować siatkę,
ale oczywiście potrzebujemy do tego danych,
w przeciwnym razie trudno jest renderować siatkę, prawda?
W tym celu dodam nowy folder, w którym nadam nazwę danym, a tam dodam dane pozorowane. plik js, ponieważ w końcu
to tylko fikcyjne dane, które tutaj dostarczam, nie
ładujemy go teraz z serwera ani nic podobnego, po prostu ładujemy w ten sposób.
Chcę mieć kilka kategorii i do tego dodam jeszcze jeden folder, który nazywam modelami, który jest w końcu
folderem, w którym chcę określić, w jaki sposób moje dane są kształtowane w tej aplikacji, jak to
wygląda .
Tak więc możemy dodać kategorię. Na przykład w pliku js, w
tym pliku chcę tylko nazwę klasy, a kategorie to domyślne funkcje JavaScript we współczesnym Javascript,
które eksportuję, i tam po prostu zdefiniuję, jak powinien wyglądać obiekt kategorii w mojej aplikacji tak, że w
zasadzie mamy łatwiejszy sposób tworzenia tych obiektów bez pomyłek i tak dalej.
Więc tutaj ta klasa kategorii pobierze konstruktor i możesz użyć tego konstruktora, który jest domyślną metodą, którą
możesz dodać
do dowolnej klasy w JavaScript w celu zainicjowania obiektu opartego na tej klasie.
Robisz to, oczekując argumentów w konstruktorze i dla kategorii. Chcę uzyskać identyfikator kategorii,
tytuł i kolor, którego użyję jako kolor tła w siatce dla tego elementu siatki dla tej kategorii. i
będę przechowywać wszystkie te
dane we właściwościach za pomocą tego słowa kluczowego. Jeśli jest to dla Ciebie
zupełnie nowe, zdecydowanie zanurz się najpierw w kursach lub zasobach JavaScript, ponieważ nie ma
to nic wspólnego z nawigacją React
ani z React Native, jest to waniliowy nowoczesny Javascript.
Dlaczego to stworzyłem?
Ponieważ teraz mogę zaimportować swoją klasę kategorii z folderu modeli z kategorii. Plik js do pliku danych zastępczych, a następnie
użyj go do utworzenia danych zastępczych.
Teraz znajdujesz te fałszywe dane w załączeniu, w załączniku znajdujesz plik JavaScript z tymi sztucznymi kategoriami, które przechowuję
w stałej, którą następnie eksportuję jako eksport nazwany tutaj.
To są dane pozorne kategorii dla kategorii w tej aplikacji, w tych kategoriach
chcę mieć w tej aplikacji. Są to kategorie, których będę używać
w tej aplikacji i są to kategorie, których możemy teraz używać w naszych ekranach, a dokładniej w ekranie kategorii.
Chcę tam dodać kategorie importu i importu z danych / fikcyjnych danych, więc importuję tę nazwaną
stałą, którą tam eksportujemy.
To jest w końcu tablica obiektów Javascript, prawda?
To właśnie tam przechowujemy,
to tylko tablica obiektów JavaScript, których możemy teraz użyć do renderowania naszej listy lub, mówiąc ściślej,
naszej siatki tutaj.
Tak więc dane dla tej FlatList są po prostu tablicami kategorii, więc po prostu wskażę
kategorie i oczywiście potrzebujemy również elementu renderującego, aby zdefiniować sposób renderowania pojedynczego elementu
siatki, który komponent powinien być renderowany. W tym celu dodam tutaj nową funkcję, renderuj
element siatki, która jest funkcją, która na końcu odbierze dane elementu i która powinna zwrócić
element jsx, powinna zwrócić tutaj
część React i wskazać na siatkę renderowania pozycja tutaj. Teraz tam wyrenderuję widok i dla uproszczenia, na razie będzie to widok z tekstem
w środku i w tym tekście chcę wyrenderować itemData.
item, to jest to, co
mamy dostępne na FlatList, jeśli pamiętasz wcześniejsze moduły, obiekt danych elementu ma tutaj właściwość
item, React Native FlatList daje tę właściwość, a tam będziemy mieli właściwość title, ponieważ przedmiot jest dostanie
się tutaj jest tylko kategorią, którą otrzymujemy z naszych danych, które karmimy na FlatList, więc
będziemy mieli taki obiekt JavaScript jako element, a
ten obiekt JavaScript jest oparty na naszym modelu tu i tam tytuł, kolor i właściwość
ID,
stąd mamy właściwość tytuł, stąd możemy wyodrębnić tytuł tutaj w ten sposób, użyjemy koloru później.
Więc to
pierwsza rzecz, powinna działać. Teraz w nowych wersjach
React Native nie musisz również informować React Native, że Twój identyfikator nie ma nazwy klucz, ale faktycznie ma
nazwę ID, ponieważ nowsze wersje React Native akceptują identyfikator jako identyfikator na danych listy.
Jeśli podążasz za starszą wersją, musisz dodać tutaj ekstraktor kluczy, który jest funkcją, która pobiera element
i indeks i musi zwrócić wartość, która powinna być użyta jako klucz, więc w tym przypadku
być przedmiotem. id, znowu
nowsze wersje React Native nie potrzebują tego, ale tylko w celach informacyjnych i dla starszych
wersji, nadal dodam to tutaj.
Więc teraz zwracamy naszą FlatList z naszymi danymi.
Jeśli teraz to zachowamy, powinniśmy już zobaczyć nasze
dane tutaj, oczywiście nie tak piękne, ale siatka,
mamy włoski, obok
szybkie i łatwe hamburgery, obok niemiecki, to
po prostu nie wygląda jak siatka ale technicznie jest.
Teraz, aby wyglądał bardziej jak siatka, oczywiście musimy dodać więcej stylizacji. Teraz, aby nieco zmienić tę stylizację, możemy przejść do naszych
elementów
siatki tutaj, do pojedynczego elementu siatki i dodać prop stylu tutaj i dodać styl elementu siatki lub cokolwiek, co
chcesz nazwać, a następnie
tam na dole, dodam element siatki do mojego arkusza stylów i nadaj tę właściwość flex, chcemy zająć tyle
miejsca, ile to możliwe,
zapisz to, teraz to już wygląda trochę bardziej jak siatka.
Teraz margines wokół każdego przedmiotu byłby również miły,
dlatego możemy po prostu dodać margines i być może dodać 15 jako margines wokół każdego przedmiotu, abyśmy mieli więcej
odstępów we wszystkich kierunkach,
a przy tym oczywiście nie jest
tak źle możemy teraz również zmienić ogólny wygląd i na przykład nadać każdemu przedmiotowi
wysokość, powiedzmy 150, i to od Ciebie zależy, jakie wartości tam wybierzesz, ale powiedziałbym, że
to całkiem niezła
siatka,
na pewno nie wygrywa nagroda za styl, ale idziemy w dobrym kierunku.
Teraz, zanim skończymy stylizację tego i na pewno mamy jeszcze trochę do zrobienia, upewnijmy się,
że możemy dotknąć tych elementów, a następnie przejdziemy ponownie do ekranu szczegółów tego konkretnego elementu, zobaczmy
zatem, jak możemy tak naprawdę ustaw tytuł w nagłówku, abyśmy mieli lepsze pojęcie o
tym, gdzie aktualnie jesteśmy.