Więc spędziliśmy mnóstwo czasu na pierwszym ekranie, ale oczywiście nie bez
powodu, ten kurs dotyczy nauki React Native, a nauczyłeś się dużo o układaniu, stylowaniu, łączeniu komponentów,
korzystaniu z wielu komponentów i konfigurowaniu już wbudowanych komponentów i jest to podstawowa
część React Native i pozwala na tworzenie prawdziwych aplikacji. Niemniej jednak nadszedł czas, aby kontynuować pracę nad tą
aplikacją i zanim zagłębimy się w inne
rzeczy, które moglibyśmy zaprojektować, co zrobię później, chcę się upewnić, że
ten przycisk uruchamiania gry działa, ponieważ teraz zawsze utknęliśmy w tym uruchom
ekran gry, ale teraz dodam drugi komponent do folderu ekranów, sam ekran gry, więc ekran, zawartość,
którą chcę pokazać na ekranie, gdy gra jest uruchomiona i to jest ekran, który jest
odpowiedzialny za pokazując domysły komputera i pozwalając użytkownikowi powiedzieć komputerowi, czy to dobrze, czy
źle, jeśli wartość powinna być mniejsza lub większa, więc
to jest cel tutaj.
Jak już wspomniałem wcześniej, jest to jednak zwykły komponent,
więc na pewno musimy zaimportować React, a także zaimportować niektóre rzeczy z React Native, co najważniejsze, oczywiście
widok i tekst, z tymi nigdy nie można się pomylić, oczywiście także arkusz
stylów, zazwyczaj zawsze ich potrzebujesz.
Następnie tutaj możemy dodać nasz składnik funkcjonalny ekranu gry, stworzyć tutaj
obiekt stylów za pomocą arkusza stylów. Utwórz tak, a na koniec wyeksportuj nasz ekran gry tutaj jako domyślny i pozbądź
się tego plus tutaj na górze.
Więc teraz mamy zdefiniowany tutaj element ekranu gry, a teraz
zatrzymajmy się na chwilę i zastanówmy się, co musi się tutaj wydarzyć.
Teraz na końcu musi się zdarzyć, że komputer musi zgadywać i musi
zgadywać początkowo,
gdy ten ekran się ładuje, ale także za każdym razem, gdy użytkownik w zasadzie naciska, to jest zbyt
niski
lub zbyt wysoki przycisk,
więc ilekroć użytkownik podaje wskazówkę dotyczącą tego, czy jest to przypuszczenie, w którym kierunku
liczby rzeczywistej to przypuszczenie, jeśli tak się dzieje, chcemy wygenerować nowe przypuszczenie.
Teraz przypuszczenie powinno być liczbą losową, dlatego zacznę od utworzenia nowej funkcji poza moim komponentem funkcjonalnym, ponieważ
nie będzie
ona wykorzystywać żadnych danych, więc nie powinna być odtwarzana przy każdym ponownym renderowaniu komponentów, aby
zaoszczędzić trochę wydajności, jeśli nie
polegasz na rekwizytach lub stanie, możesz też po prostu mieć funkcję, która znajduje się
poza twoim komponentem, a ja wygeneruję losową
generację pomiędzy, ponieważ
taka będzie funkcja tej funkcji.
Jest to funkcja, wygeneruje losową liczbę między minimum a maksimum, co
pozwala nam
również wykluczyć pewne liczby, na przykład pierwsza generowana liczba powinna wykluczyć rozwiązanie, aby urządzenie, aplikacja
nigdy nie mogła zgadnąć wyboru użytkownika za pierwszym razem.
Teraz tutaj minimum zostanie znormalizowane do matematyki. Ceil minimum, więc zasadniczo mieć
liczbę całkowitą, jeśli wprowadzono liczbę całkowitą i zaokrąglić w górę, a maksimum zostanie zmienione, aby zrobić
to samo, ale zaokrąglone w dół. Potem będę miał moją losową liczbę, którą wygeneruję za pomocą Math. losowe i matematyczne.
random daje nam losową liczbę od 0 do 1, więc aby mieć liczbę między min a maksimum, musimy pomnożyć to przez max - min, a
następnie również na końcu, dodaj tutaj min, ale upewnij się też, że zadzwonisz do Math. piętro na wynik tej całej operacji tutaj, a to da
ci losową liczbę między tym minimum a maksimum.
Teraz po
wygenerowaniu chcę sprawdzić, czy liczba losowa jest równa liczbie, którą chcemy wykluczyć, co byłoby oczywiście bardzo
rzadkim zbiegiem okoliczności, ale może się zdarzyć, w którym to przypadku zwrócę wynik innego generowania losowego między zadzwoń tam,
gdzie po prostu przekażę min, maks i wykluczę, które otrzymaliśmy, więc po prostu
powtórzę, wygeneruję losową pomiędzy i zwrócę wartość tego powtarzanego przebiegu, jeśli ponownie otrzymamy wykluczoną wartość, powtórzymy
ją jeszcze raz, więc ostatecznie Dostanę się tam, a jeśli
nie będziemy mieć wykluczonego numeru, który powinien mieć miejsce w większości przypadków, od
razu zwrócę ten losowy numer.
Jest to teraz funkcja, która generuje nam liczbę losową.
Teraz tutaj, na ekranie gry, chcę zarządzać jakimś stanem, więc zaimportuję hak useState z React i zainicjuję tutaj jakiś stan losową
liczbą, ponieważ stanem, którym chcę tu zarządzać, jest zgadywanie komputera, aktualny
zgadnij, a to także wymaga ustawienia
bieżącej funkcji zgadywania, abyśmy mogli to zmienić za każdym razem, gdy użytkownik poda
nową wskazówkę.
Więc tutaj możemy wywołać generowanie losowe pomiędzy, aby wygenerować stan początkowy, który zostanie zapisany, a następnie będzie
to traktowane tylko jako stan początkowy,
więc kiedy ten komponent zostanie odbudowany, a zatem stan użycia zostanie wywołany ponownie, wygenerujemy
kolejną liczbę losową ponownie, ale to nie zastąpi tego stanu, ponieważ po początkowym ustawieniu stanu nie
zostanie on ponownie zastąpiony przez dodanie wartości uzyskanej tutaj.
Zostanie to uwzględnione przez React tylko wtedy, gdy nie mamy jeszcze stanu początkowego, a następnie ten stan początkowy
lub zaktualizowany będzie zarządzany odłączony od komponentu i nie zostanie zastąpiony przez to wywołanie tutaj.
Początkowo jednak musimy wykonać to połączenie, chcemy uzyskać losową liczbę od 1 do
100, 100 jest wykluczone z
logiką, którą tam napisaliśmy, więc będzie to liczba od 1 do 99,
99 uwzględnione i chcę wykluczyć wybór użytkownika.
Spodziewam się, że dostanę to tutaj na moich rekwizytach,
więc wybór użytkownika może być nazwą rekwizytu, której tu używamy, i to jest wartość, którą chcę wykonać, ponieważ jest
to rozwiązanie
na końcu i nie będziemy w stanie odgadnąć rozwiązania od razu, to
byłoby trochę niesprawiedliwe.