Teraz oczywiście używam widoku przewijania i nauczyłeś się, że FlatList jest lepszy, jeśli masz
listę, na której nie wiesz, ile elementów tam będziesz.
Teraz w naszej grze widok przewijania będzie w porządku, ponieważ tak, nie wiemy, ile
to będzie przedmiotów i teoretycznie, dla bardzo słabego zgadywania, będziemy mieli około 100 przedmiotów, ale stanie się to prawie
nigdy i dlatego zazwyczaj ta lista nie może zawierać więcej niż 10, 15, 20 elementów, a zatem najprawdopodobniej nigdy nie spowoduje to żadnych
problemów z wydajnością, a korzystanie z widoku przewijania tutaj jest
absolutnie w porządku, ponieważ tak, jest to lista zawierająca wiele elementów, który przekroczy nasze granice ekranu,
ale rzadko będzie to lista zawierająca wiele przedmiotów, nigdy nie będzie to lista zawierająca więcej niż
100 przedmiotów ze względu na sposób działania naszej gry.
Widok przewijania byłby tutaj odpowiedni, ale jeśli nadal chcesz używać FlatList, pozwól, że
ci to pokażę.
W tym celu możemy dodać FlatList tutaj, co oczywiście oznacza, że musimy zaimportować
FlatList z React Native, więc tutaj zaimportuję FlatList w ten sposób,
a po zaimportowaniu FlatList dowiedziałeś się, że FlatList pobiera rekwizyt danych, który wskazuje na dane, które
chcesz wprowadzić, aw naszym przypadku tutaj, byłaby
to nasza tablica zgadnięć z przeszłości, a następnie masz propozycję renderowania elementu, która pozwala na wyprowadzenie elementów dla każdego elementu w danych,
które podajesz, więc wyślij komponenty dla każdego elementu w danych i tutaj mogę wskazać
element
listy renderowania, który powinien zostać wywołany. Teraz to nie
zadziała z kilku powodów. Po pierwsze, element listy renderowania oczekuje
dwóch wartości, ale element renderowany tutaj na FlatList przesyła tylko jeden element, a są to dane elementu,
które przechowują informacje o indeksie i przedmiocie, który mamy wydrukować.
Inną rzeczą, która spowoduje nam problemy, jest klucz.
Być może pamiętasz, że FlatList spodziewa się uzyskać obiekty w przekazywanej tablicy, w której każdy obiekt ma właściwość
klucza, którą może wyodrębnić i wykorzystać jako klucz do wydajnego ponownego renderowania.
Teraz nie mamy tutaj tablicy obiektów, mamy tablicę liczb i to nie zadziała.
Teraz możemy dodać tutaj ekstraktor kluczy do FlatList, aby zastąpić jego domyślny, ekstraktor kluczy przyjmuje funkcję, która
w końcu dostaje nasz przedmiot, a następnie musimy powiedzieć FlatList, gdzie znaleźć nasz klucz i domyślnie
szuka elementu. klucz lub na przedmiot. id, tutaj
chcemy powiedzieć, że sam przedmiot jest kluczem.
Teraz FlatList chce jednak klucza, który jest ciągiem, a nie liczbą, w
przeciwnym razie otrzyma ostrzeżenie.
Więc następną rzeczą, którą musimy zrobić, to domysły z przeszłości, którymi zarządzamy, powinny być łańcuchami i nie stanowi to problemu,
ponieważ i tak używamy ich tylko do drukowania ich na ekranie, więc nie obchodzi
nas, czy są one technicznie przechowywane jako liczba lub ciąg znaków, a zatem tutaj, gdy dodamy
nowe przypuszczenie, możemy po prostu wywołać metodę toString, która jest wbudowaną metodą JavaScript na liczbę, aby przekonwertować ją na
typ ciągu i zrobić to samo dla wartości początkowej kierunek. Tutaj, gdzie dodaję moje początkowe przypuszczenie, również zadzwoń
doString, a teraz mamy ciągi
znaków, które mogą być zatem używane jako liczby. Teraz, jak powiedziałem, renderuj element listy oczekuje jednak niewłaściwych
argumentów, numOfRound nie będzie działać w ten sposób, wartość też nie będzie działać w ten
sposób, zamiast tego otrzymujemy dane
elementu i nadal możemy spodziewać się dodatkowego argumentu, należy tego jednak oczekiwać jako pierwszego argumentu, ponieważ możemy teraz po prostu zejść
w dół, aby renderować element tutaj na FlatList i powiązać argumenty, które należy przekazać, abyśmy mogli dodać
dodatkowe argumenty oprócz domyślnego argumentu, który zostanie przekazany. Teraz bind oczekuje tego jako pierwszego argumentu, więc ustawimy, do
czego powinno się odwoływać w funkcji, którą wywołujemy, nie obchodzi nas to, więc po prostu dodam to
do tego,
możesz również ustawić na zero, to nie ma znaczenia
Drugi argument, który tu dodamy, będzie pierwszym argumentem odebranym przez tę funkcję
i powinien to być nasz okrągły numer, który
powinien być pastGuesses. długość. Wcześniej odliczałem indeks tutaj, ale to już
nie działa, ponieważ nie mam już dostępu
do indeksu, nie mapujemy ręcznie. Więc po prostu podam
tam długość, a dobrą rzeczą jest to, że mogę uzyskać indeks wewnątrz renderowanego elementu z danych elementu.
Ten domyślny argument zostanie również przekazany przez React, a domyślny argument zostanie automatycznie przekazany do
ostatniego argumentu.
Tak więc pierwszymi argumentami będą argumenty ustawione
w opcjach, w tym
przypadku jest to tylko jeden argument, nasza liczba rund lub nasza długość tablicy, a następnie wszelkie argumenty
domyślne, które zostałyby przekazane normalnie, zostaną dodane jako dodatkowe argumenty na końcu listy argumentów tutaj.
Tutaj, liczba rund również nie
jest już odpowiednią nazwą, zamiast tego jest to długość listy, która brzmi jak
lepsza nazwa, ponieważ to właśnie otrzymujemy, ale tutaj możemy obliczyć naszą liczbę rund za
pomocą długości listy, a następnie odejmując itemData. indeks, ponieważ dane pozycji, które automatycznie otrzymujesz przez React Native, to
obiekt, który ma również właściwość index, która jest indeksem wysyłanego elementu, a także dostajesz itemData. przedmiot i to jest sam
przedmiot, który w naszym przypadku jest przypuszczeniem.
Teraz nie musimy już tutaj dodawać klucza, ponieważ kluczowanie to zostanie wykonane przez
React Native dzięki FlatList. To było dużo pracy,
teraz powinniśmy móc ponownie wypisać listę.
Więc zachowajmy to i spróbujmy tutaj
i wydaje się, że
to działa, ale oczywiście straciliśmy teraz pozycjonowanie. Wcześniej dodaliśmy styl kontenera zawartości, listę stylów tutaj
do widoku przewijania, dobrą rzeczą jest
to, że możesz to zrobić również na FlatList. Chociaż możesz dodać styl tak jak w
widoku przewijania, ten styl pozwala na przykład dodać margines wokół listy, ale nie pozwala wyrównać zawartości
wewnątrz listy. W tym
celu użyj również stylu kontenera zawartości, który jest obsługiwany przez FlatList, dlatego
też tutaj możemy również wskazać listę stylów i dlatego powinno to teraz działać tak, jak
wcześniej działał nasz widok przewijania.
Spróbujmy, a zobaczysz, że zaczynamy od dołu i możemy teraz dodawać przedmioty.
Zobaczmy teraz, czy przewijanie działa również tak,
jak powinno, tak, możemy zobaczyć najnowszy element i najstarszy element i
tak, coś jest nie tak z pozycjonowaniem elementów na liście,
i wrócę do tego, ale ogólnie to działa. Przetestujmy to również na Androidzie, więc
zacznijmy zgadywać i
mamy nadzieję, że nie rozwiążemy tego zbyt wcześnie, nie, to
działa
i tutaj możemy również przewijać, jak widać. Więc to działa również z FlatList,
a teraz co z tym dziwnym rozkładem treści tutaj na naszych elementach listy?
Zauważysz, że same elementy listy są większe niż wcześniej.
Treść jest dystrybuowana tak, jakby element listy skończył się tutaj i to rzeczywiście jest problem.
Mamy szerokość 60% elementu listy i nasza treść to respektuje, ale nasze granice
nie są dziwne.
Aby naprawić to dziwne zachowanie FlatList, możesz przejść do kontenera listy
zawierającego ogólną listę i ustawić szerokość na pożądaną szerokość listy na końcu, na
przykład 60% i nadać elementom listy szerokość 100%.
Więc teraz ogólny kontener listy jest mniejszy, jest mniej szeroki, a zatem elementy listy zakładają tę szerokość i mają
tę samą szerokość, a
ponieważ rzadko trzeba używać przypadku, w którym kontener listy musi być szerszy niż elementy
listy, ponieważ czym innym byłby tam, w pojemniku z listą, powinno to być dobre rozwiązanie.
Teraz, jeśli to zrobisz, zauważysz, że szerokość wygląda lepiej, ale w rzeczywistości problem z pozycjonowaniem jest teraz.
Ponieważ teraz kontrolujemy szerokość na zewnętrznym kontenerze listy, możemy pozbyć się wyrównywania
elementów na środku tutaj na samej liście,
więc lista, nie zapominaj, była stylem dodanym do stylu kontenera zawartości.
Trzymamy tam styl, ale usunąłem wyrównywanie elementów na środku, ponieważ teraz nie
ma nic do wyśrodkowania, szerokość jest ustawiona na kontenerze listy,
a nie na elementach listy, więc dzięki temu, że mają 100%, są one automatycznie wyśrodkowane, ponieważ biorą
tak czy inaczej, a więc teraz, jeśli
spróbujemy jeszcze raz, wydaje się, że działa to znacznie lepiej, a elementy listy są tak ułożone, jak powinny.
Więc jeśli mamy tutaj coś innego, co może potrwać nieco dłużej, tak, dobrze wygląda,
to tutaj widzimy, że otrzymujemy takie samo zachowanie, jak poprzednio, uzyskujemy ładny styl, a także pracowaliśmy nad
tym innym zachowaniem, które daje nam FlatList. Spróbujmy również tutaj na Androida i zacznijmy nową
grę, och, to
nie będzie długa gra,
wystarczająco długa,
więc tam też wszystko działa tak, jak powinno.
I tak możesz to zrobić za pomocą FlatList, ponieważ widzisz, że działa trochę inaczej, musimy
obejść jego różne zachowanie,
jeśli chodzi o dostosowanie szerokości elementów listy, ale w końcu to ostatecznie działa również i dlatego
nauczyłeś się teraz, jak układać swoje rzeczy za pomocą FlatList, z widokiem przewijania, co jest specjalnego
w tych widokach listy lub ogólnie w tych przewijalnych widokach i jak nadal możesz układać swoje rzeczy tak,
jak chcesz.