Teraz zanim skończymy ten moduł, wróćmy do niektórych list i niektórych przewijalnych treści, ponieważ w tej
aplikacji w ogóle nie mamy
takich treści i naprawdę ważne jest, aby zrozumieć, jak pracować z listami
i jakie
niektóre szczególne dziwactwa dotyczą list. Powiedzmy tutaj, że chcemy zapisać poprzednie przypuszczenia
wykonane przez komputer, chcemy to zapisać tutaj poniżej naszego przycisku plus i minus w tej białej pustej przestrzeni tutaj.
W tym celu oczywiście musimy zarejestrować wszelkie domysły wykonane przez komputer, a następnie wydrukować je na liście.
Na ekranie gry zacznijmy od zarejestrowania tego.
Obecnie liczymy tu tylko rundy, jednak celem
musi być to, że nie tylko liczymy rundy, ale także ocaliliśmy te rundy, więc zapisaliśmy
przypuszczenia, które pojawiły się w każdej rundzie i aby
osiągnąć to tutaj w naszych rundach stan, możemy po prostu zarządzać tablicą zamiast liczby i nazwać to domysły z
przeszłości, aby być naprawdę jasnym na temat tego, co tam jest,
i dlatego nazywa się to set dawnymi domysłami.
Więc teraz celem jest dodanie nowego odgadnięcia tutaj do tej tablicy za każdym razem, gdy wygenerujemy nową liczbę
losową, więc tutaj w następnym module obsługi zgadywania. Tam, gdzie ustalamy rundy, zamiast ustawiać
takie rundy, którymi już nie zarządzamy, musimy ustawić nasze
wcześniejsze domysły i tam musimy wykorzystać nasze poprzednie domysły i faktycznie dodać tutaj nowe domysły.
Teraz możemy użyć tej funkcji tutaj, gdzie otrzymujemy curPastGuesses, która jest trochę dziwna nazwa, ale co oznacza
po prostu, że jest to nasz obecny stan i chcemy zaktualizować to
lub to jest nasz najnowszy stan, aby być precyzyjnym i chcemy to zaktualizować i chcemy zaktualizować, zwracając
nową tablicę, która będzie naszym nowym stanem, i która oczywiście powinna uwzględniać nasze obecne
domysły z przeszłości, a następnie dodawać nowe domysły.
Teraz możemy dodać nowe przypuszczenie na końcu tej listy lub na początku, a ja rzeczywiście
dodam je na początku, aby nasze ostatnie przypuszczenie było zawsze na górze listy, gdy później wyrenderowaliśmy je na
ekranie .
Więc tutaj możemy dodać kolejny numer, który jest naszym nowym domysłem, który tutaj generujemy i
to właśnie musimy dodać tutaj jako przedmiot, prawda? Dzięki temu za każdym razem dodajemy nowe elementy do tej tablicy.
Nie zapominajmy jednak, że zaczynamy od zgadywania,
generujemy tutaj początkowe zgadywanie, chcę zacząć
od zgadywania na liście, dlatego musimy dodać go tutaj, więc go wyodrębnię z
naszego wywołania funkcji stanu użyj tutaj i stwórz nową stałą, początkową zgadywankę, która jest tą losowo generowaną
liczbą, a teraz jest to początkowa zgadywanka, którą tu dodam, aby użyć stanu i jest to również początkowe przypuszczenie,
które dodaję jako pierwszy element do tej tablicy w nasze domysły z przeszłości, użyj
inicjalizacji stanu.
Nie zapominaj teraz, że użycie stanu, ponieważ cały ten kod tutaj jest ponownie uruchamiany, ilekroć ten komponent jest ponownie
renderowany, ale sposób użycia stanu użycia jest taki, że React wykrywa, że stan tego składnika został już
zainicjowany,
więc ustawi tylko określ ten wstępny przypuszczenie po raz pierwszy ten komponent renderuje, a
nie kolejne rendery. Rzeczywiście, początkowe
przypuszczenie zostanie odtworzone, ale tak naprawdę nie zostanie użyte z powodu obsługi stanu odłączonego
stanu, w którym React dowiaduje się, że mamy już stan.
Z tego powodu inicjalizujemy to, inicjalizujemy również nasze przypuszczenie tutaj na tej liście i dodajemy
nowe przypuszczenie do listy na dole tutaj. W związku z tym powinniśmy
mieć pewne domysły z przeszłości, które możemy wypisać na
liście, a teraz mamy dwa sposoby wyprowadzenia tego, za pomocą FlatList lub widoku przewijania,
i zacznę ponownie od widoku przewijania.
Więc tutaj poniżej karty dodam widok przewijania i do tego trzeba zaimportować widok przewijania z React Native, więc
zróbmy
to tutaj, przewiń widok,
zaimportuj go z React Native i wyślij go poniżej listy, aby jest to
przewijalna zawartość, ponieważ tam będę mieć
moją zawartość dynamiczną, wykorzystam moje wcześniejsze przypuszczenia i zamapuję to na liście składników.
Więc tutaj będę musiał
zgadnąć, co powinienem powiedzieć, a to powinno teraz zwrócić komponent wewnątrz tej funkcji mapy, a
takim elementem domniemania może być widok, powiedzmy, z tekstem, w którym po prostu wypisuję przypuszczenie, więc
tutaj renderuję to przypuszczenie, a ponieważ po prostu dodaję moje domysły tutaj w ten sposób bezpośrednio do tablicy, przypuszczam, że
tam jest tylko numer zgadywania i mogę po prostu wyprowadzić go w ten sposób tutaj.
Teraz dowiedziałeś się, że w przypadku przedmiotów, które mapujemy w ten sposób, musisz również dodać klucz
i moglibyśmy użyć naszej domysły tutaj jako klucza,
gdybyśmy mieli gwarancję unikalności, ale przy naszej obecnej logice tak naprawdę nie jest ponieważ w naszej obecnej
logice generowanie losowe pomiędzy faktycznie generuje nową liczbę losową, w której górna granica, ta wysoka wartość tutaj jest wykluczona,
ale dolna granica jest uwzględniona, więc możemy uzyskać tę dolną granicę jako nową wartość losową.
Wadą tego jest to, że tutaj, gdzie ustalamy naszą nową dolną granicę, ustawiamy to na bieżące
przypuszczenie, co oznacza, że można to powtórzyć w przyszłej losowej liczbie i faktycznie widzieliśmy to również
w tym
module, czasami tam , komputer zgaduje liczbę, która została już odgadnięta kilka rund wcześniej.
Nie jest to ogromny problem, ale teraz dzieje się tak, ponieważ teraz musimy zagwarantować, że nasze
domysły są wyjątkowe, a poprawka jest prosta, możemy po prostu dodać tutaj, gdy ustalimy naszą nową dolną
granicę, ponieważ dodając jedną tutaj, zapewniamy że nowa dolna granica, która jest uwzględniona w generowaniu liczb losowych, jest w rzeczywistości o
jeden wyższa niż obecne przypuszczenie, które było fałszywe, w przeciwnym
razie nie dotarlibyśmy tutaj.
Teraz ustalamy nową dolną granicę, która może zostać wygenerowana w przyszłości, ale której nie
wygenerowaliśmy wcześniej.
Jest to więc mała poprawka w logice, która nie
szkodzi w żaden sposób, a jest to szczególnie ważne, jeśli planujesz użyć zgadywania jako unikalnego klucza tutaj.
Dzięki temu
zobaczmy, czy to działa.
Zapiszmy to i spróbujmy tutaj na iOS, uruchom
grę i
widzimy nasze początkowe przypuszczenia, 57, nie jest ładnie
sformatowane, ale widzimy to tutaj. Teraz 57 jest za wysoka, jeśli powiem
niżej, widzimy nowe domysły na górze listy i skłamałem i wydaje się, że to działa.
Teraz oczywiście pojawia się błąd, gdy gra się kończy, ponieważ tam staramy się obchodzić nasze rundy i nie
zarządzamy tym już jako stanem. Musimy to
naprawić, ale wyświetlanie listy działa.
Teraz naprawmy błąd, który otrzymujemy,
który po prostu pochodzi z useEffect, w którym przekazuję rundy do onGameOver. Tam w końcu muszę przekazać liczbę rund,
które zajęły komputerowi odgadnięcie naszej liczby.
Wcześniej mieliśmy tutaj zmienną rundy, stan rundy, teraz
mamy tylko zgadnięcia, które są tablicą, więc nie możemy przekazywać takich zgadnięć, ponieważ w
końcu gra wymaga liczby,
ale oczywiście możemy przekazać długość domysłów, która jest tylko liczbą rund, jakie zajęło
komputerowi.
Dzięki temu, jeśli to zrobimy, powinniśmy być w stanie pomyślnie ukończyć grę.
Jeśli spróbujemy to zrobić tutaj szybko i rozwiązać grę, tak,
to działa.
Więc teraz mamy to działanie, teraz
odwróćmy głowę w stronę tego widoku przewijania i elementów listy tam ponownie i
upewnijmy się, że mamy tam odpowiednią stylizację.