Jeśli chodzi o stylizowanie listy, możemy oczywiście stylizować zarówno elementy listy, jak i samą
listę.
Więc zacznijmy od elementów,
a tutaj wycinę ten znak tutaj, żeby tak rzec, aby kod jsx dla elementu i dodałem nową
funkcję poza funkcją komponentu, ponieważ tak naprawdę nie potrzebujemy niczego od wewnątrz
komponentu, a ja nazwiemy ten element listy renderowania, nazwa należy do Ciebie.
Jest to funkcja, która na końcu powinna zwrócić tutaj trochę kodu jsx,
więc powinna zwrócić ten kod jsx tutaj i działać poprawnie, oczywiście musimy uzyskać powiedzmy naszą
wartość, którą chcemy wyprowadzić.
Więc tutaj użyję wartości jako klucza i wartości wyjściowej tutaj między tagami tekstowymi, a teraz
możemy użyć elementu renderowania listy tam, gdzie
nazywamy mapę, i tutaj, po prostu chcę wykonać element renderowania listy dla każdego elementu, który mamy 'mapuje i
zgaduję, że jako wartość w elemencie listy renderowania.
Teraz, jeśli to zrobimy, powinniśmy zobaczyć ten sam
wynik, co wcześniej, więc nie ma tu nic zbyt fantazyjnego, ale teraz mamy tam uboższy
znacznik, szczuplejszy kod jsx i mamy tutaj kod jsx elementu listy.
Teraz możemy to stylizować i oczywiście chcę tutaj stylizować mój widok, w tym celu dodam
styl z arkusza stylów, który wymienię na liście, i tam naprawdę chcę
teraz mieć dwa elementy tekstowe i jeden powinien być numerem rundy, a druga
powinna być wartością,
więc tutaj potrzebuję dodatkowego argumentu, potrzebuję wartości, ale także numeru rundy lub numOfRound, jak ją tutaj nazywam i
chcę
to wypisać dynamicznie tutaj, być może
z tym symbolem skrótu przed nim tylko ze względów stylistycznych.
Więc teraz mamy te dwa teksty na tej liście tu
i tam, tak naprawdę nie chcę używać tekstu, ale tekst podstawowy, więc mam domyślną stylizację tekstu.
W tym celu zaimportujmy tekst podstawowy z tekstu podstawowego komponentów i zastosujmy tutaj tekst podstawowy zamiast zwykłego
tekstu w naszym elemencie listy. Dzięki temu używamy właściwej czcionki,
a teraz dodajmy ten obiekt listy do naszego arkusza stylów, abyśmy mogli stylizować element listy, w rzeczywistości
powinien to być zatem element listy, a nie lista.
Dodajmy teraz element listy do arkusza
stylów, tak jak teraz i oczywiście możemy stylizować
to w dowolny sposób, ja stylizuję go tutaj stosunkowo łatwo, po prostu nadaj mu kolor obramowania, powiedzmy
czarny, a może to tutaj lekko szarawy kolor. Wypełnienie we wszystkich kierunkach, powiedzmy 15, aby mieć pewne odstępy, margines na osi pionowej
10, dzięki czemu mamy pewne
odstępy między elementami listy i nie siedzą one obok siebie. Kolor tła może być biały
i oczywiście
możesz tutaj użyć różnych kolorów, jeśli chcesz.
To dopiero początek, teraz, kiedy
ustawiamy kolor obramowania, musimy również ustawić tutaj szerokość obramowania, ale w przeciwnym
razie
nie zobaczymy obramowania i ustawię to na jedno i bardzo ważne, chcę je mieć dwa komponenty tekstowe
w moim widoku siedzą obok siebie, a nie nad sobą, co byłoby domyślne, ponieważ
widok używa Flexbox i używa domyślnego kierunku wygięcia kolumny, aby element siedział obok siebie
na osi poziomej, dodajemy wygnij tutaj rząd kierunku wygięcia tak jak to.
A jeśli to uratujemy, a aplikacja przebuduje się, spróbujmy i zobaczmy, jak to wygląda,
tak, to wygląda dobrze, ale wciąż jest miejsce na ulepszenia.
Na przykład chcę ustawić szerokość tego elementu listy, aby upewnić się, że nie jest on tak szeroki,
jak wymaga tego jego zawartość, ale tak szeroki, jak mu mówimy. Teraz, aby dodać szerokość, możesz dodać szerokość tutaj, aby wyświetlić pozycję elementu,
ale
jeśli to zrobimy i ustawimy to na powiedzmy 80%, zobaczysz, że nie zachowuje się to tak, jak chcesz, aby
działało poprawnie, więc robi to nie
wyglądają dobrze, teraz treść
została w jakiś sposób przeniesiona, ale sam przedmiot z pewnością nie jest szerszy. Aby poprawnie stylizować listę, najlepszym sposobem jest po
prostu zawinięcie jej w widok, a następnie stylizowanie tego widoku.
Więc tutaj możemy
dodać widok, nadać mu styl listy
powiedzmy, więc tutaj odnoszę się do listy stylów i dodajmy teraz ten obiekt listy do naszego arkusza stylów, tak
jak to i na tej liście, możemy teraz ustawić szerokość 80% i pozbyć się szerokości tutaj na elemencie listy.
Jeśli zrobimy to w tym widoku zawijania, zobaczysz, że elementy listy mają poprawny wygląd i jest to
coś, o czym należy pamiętać.
Jeśli chcesz kontrolować wysokość lub szerokość listy, widoku przewijania, nie dodawaj stylu do elementów listy,
nie koniecznie
dodawaj go bezpośrednio do widoku przewijania, ponieważ działa to wewnętrznie, ale zamiast tego
wystarczy owinąć widok wokół widoku przewijania, w którym ustawiono żądaną szerokość i wysokość.
Zauważysz teraz, że na elemencie listy byłoby miło, gdybyśmy wyprowadzili tam okrągły numer,
a następnie mielibyśmy odstępy między okrągłym numerem a naszym rzeczywistym zgadywaniem i aby to
osiągnąć, na przykład musimy ustawić styl
tutaj na pozycji na liście, możemy ustawić justifyContent, który kontroluje, jak treść tego widoku jest rozmieszczona wzdłuż głównej
osi, która odzwierciedla kierunek jako oś pozioma, i tam, wykorzystam przestrzeń wokół, aby rozdzielić dostępne
wolne miejsce wokół naszej elementy tekstowe tu i teraz, aby również wypisać liczbę rund, które oczekujemy
jako argument tutaj w elemencie renderowania listy, możemy przejść do naszej funkcji mapy i tam faktycznie otrzymujemy drugi argument
w tej funkcji, który mapa wywołuje automatycznie i to jest indeks elementu, który wyprowadzamy,
więc możemy
przesłać ten indeks tutaj, aby wyświetlić element listy lub indeks plus 1, ponieważ zacznie się od 0
i prawdopodobnie chcemy wydrukować jeden dla pierwszej rundy zamiast 0.
Teraz, gdy dodamy to, teraz to wygląda trochę lepiej i może faktycznie przełączamy ten wygląd tutaj z przestrzeni wokół
na przestrzeń, myślę, że wygląda to ładniej, ale zanim to zapiszę i zaktualizuję,
będziesz zauważ również, że masz jeden problem z tym, że okrągły numer nie jest w rzeczywistości
poprawny.
Pierwsza runda jest najniższą rundą, ponieważ dodajemy nowe rundy na początku listy, dlatego indeks nie
jest właściwą miarą dla numeru trasy, ponieważ indeks zawsze wynosi 0 lub jeśli dodamy 1, to 1, dla
pierwszej listy element, ale pierwsza pozycja na liście nie
jest właściwie naszą pierwszą rundą, ponieważ ponieważ dodajemy
nowe rundy jako pierwszą pozycję na liście, pierwsza pozycja na liście jest naszą ostatnią rundą i
na pewno nie pierwszą.
Aby to naprawić, możemy tutaj użyć elementów renderowania listy, zamiast korzystać z indeksu, możemy oczywiście skorzystać z naszej poprzedniej
listy zgadnięć tutaj i uzyskać długość tej listy, a następnie odjąć od niej indeks, a to daje nam
właściwie właściwy okrągły numer dla danego elementu listy.
Więc teraz, jeśli to zrobimy i zrestartujemy to, teraz widzimy, że okrągła liczba pierwsza jest domysłem siódmym, i pozostaje numerem
jeden, jeśli dodamy kolejne domysły
i teraz wydaje się, że działa to tutaj poprawnie.
Przekonasz się również, że gdy tylko przekroczymy nasze granice, możemy oczywiście przewinąć listę i wydaje
się, że działa to tak, jak powinno.
Spróbujmy też tutaj na Androida, zacznijmy nową grę i miejmy nadzieję, że nie wygramy zbyt wcześnie,
tak, to wydaje się
działać, ale tam, właściwie nie mogę przewijać.
Tak więc na Androidzie to właściwie nie działa poprawnie, tej
listy nie można tam przewijać.
Co jest nie tak na Androidzie?
Teraz, gdy przewija się dobrze w iOS,
dla widoku przewijania zagnieżdżonego w widoku do przewijania również w Androidzie, upewnij się, że widok otaczający faktycznie
używa Flex Flex, więc dodaj
to do stylu listy, który jest stylem zastosowanym do widok owinięty wokół
widoku przewijania.
Po dodaniu tego, jeśli spróbujemy teraz ponownie na Androidzie,
zauważysz, że teraz jest on przewijany, gdy tylko przekroczysz granice ekranu, a na iOS, powinien
nadal działać tak jak poprzednio, a
ponieważ na iOS, możemy nawet przewijaj bez przekraczania
granic, to tylko domyślne zachowanie iOS, które możesz nieco zrównoważyć takie listy.
Mamy teraz tę przewijaną listę z przewijanym widokiem i mapą, która działa zarówno na Androidzie, jak i
iOS.