Zanim dodamy więcej logiki, popracujmy nad interfejsem użytkownika, a więc nad tym, co wypisujemy.
Więc tutaj wrócę widok na
końcu i w tym widoku chcę mieć tekst, w którym mówię, że przeciwnicy zgadują, więc co zgadł komputer, a następnie możemy ponownie
użyć kontenera liczb, aby ładnie przedstawić ten odgadnięty numer.
To ogromna zaleta posiadania takich komponentów wielokrotnego użytku, ponieważ, jak sądzę, możesz ich ponownie użyć, więc
właśnie to robimy tutaj.
Ponownie użyjemy tego kontenera liczb, poniżej tego przeciwnicy odgadują tekst tutaj, aby mieć własny
kontener liczb i ładnie wyświetlać
bieżące zgadywanie tutaj. Domyślamy się, że jest to
nasz stan, pamiętaj, że to właśnie tutaj inicjalizujemy i co wkrótce będziemy mogli zmienić.
Oto, co się tutaj podaje, poniżej możemy teraz przedstawić naszą kartę z dwoma przyciskami, które pozwalają użytkownikowi
dać komputerowi podpowiedź.
Więc tutaj zaimportuję kartę z karty komponentów, aby zawinąć tam te przyciski, a zatem możemy już również zaimportować przycisk
z React Native, ponieważ będziemy potrzebować tego również za sekundę,
a następnie po prostu mieć naszą kartę tutaj i na tej karcie , Chcę mieć przycisk z tytułem niższy i inny przycisk,
w którym mówimy, że jest większy, to są dwa kierunki, w których możemy dać podpowiedź, więc liczba, którą
odgadłeś za nisko, jest zbyt wysoka,
wtedy możemy podać komputer podpowiedź z tymi przyciskami i onPress, w tej chwili po prostu zarejestruję
pustą funkcję, która nic nie robi, co oczywiście wkrótce się
zmieni i skutecznie wygeneruje nową liczbę losową, a dzięki temu nadszedł czas, aby dodać niektóre style tutaj.
Chcę mieć styl dla całego ekranu i tak jak poprzednio, otrzymam flex
jeden, aby zabrać całą dostępną przestrzeń na ekranie poniżej
nagłówka, który mamy u góry, dodać dopełnienie 10, aby mieć trochę miejsca
wokół zawartości tak aby nie znajdował się bezpośrednio na krawędziach, a także użył wyrównywania elementów w celu wyśrodkowania naszej zawartości w poziomie, a ta
właściwość ekranu jest używana w widoku otaczającym tutaj, aby dodać ekran stylów, aby
zawartość na tym ekranie była dobrze ustawiona. Teraz dla tych przycisków byłoby miło, gdyby siedzieli obok siebie,
więc na karcie możemy dodać styl, może użyć pojemnika z guzikami jako nazwy tutaj, a zatem dodaj tę samą nazwę
tutaj w naszym arkuszu stylów, ponieważ to jest to, co odnosimy
się do tego i ustawiamy tutaj kierunek wygięcia w rzędzie i możemy tutaj ustawić kierunek wygięcia, ponieważ robię to
na
mojej karcie, ale jeśli się przyjrzymy, na tej karcie rozpowszechnimy te style w widoku i Widok używa Flexboksa,
dzięki czemu możemy tutaj ustawić kierunek zgięcia i to właśnie tam robię, ustawiając kierunek zgięcia
w rzędzie, aby pozycjonować elementy obok siebie w poziomie. justifyContent może być ze spacją wokół, aby
równomiernie rozdzielić wolne miejsca wokół przycisków, po lewej i prawej stronie, a także dodać margines na górze 20,
aby ta karta z naszymi przyciskami nie znajdowała się bezpośrednio przy odgadniętym numerze, ale jest niektóre odstępy
między nimi, a także może dać to szerokość 300 i maksymalną szerokość 80%, aby mieć
pewność, że nigdy nie przekroczy ona granic widoku macierzystego. Teraz, jeśli to uratujemy, fajnie byłoby to
zobaczyć i potrzebujemy sposobu przejścia do ekranu gry.
Teraz używamy ekranu startowego gry w komponencie aplikacji, więc będziemy musieli również użyć ekranu gry i
zarządzać wybranym numerem w tym komponencie aplikacji, ponieważ jest to jedyny składnik, który jest cały czas
na ekranie, poza nagłówkiem, ale
komponent aplikacji jest również składnikiem, który wkrótce będzie zawierał ekran startowy gry i ekran gry,
a zatem jest
to składnik, w którym możemy również przekazywać dane do ekranu startowego gry i
ekranu gry.
Zaimportujmy tutaj ekran gry z ekranu ekranu gry i oczywiście chcę tutaj wyrenderować ekran gry, ale nie, jeśli ekran
startowy gry jest nadal widoczny, chcę mieć jedną z dwóch i notatkę boczną, jest
też całkowicie inny sposób ładowania różnych komponentów, a my zajmiemy się
tym w osobnym module w module nawigacyjnym.
Teraz, gdy omówimy później różne rozwiązania nawigacyjne, istnieje obecnie sposób renderowania jednego z dwóch
ekranów, ale teraz mamy
również sposób renderowania tylko jednego z tych dwóch ekranów i do tego
nie potrzebujemy specjalnego narzędzia lub cokolwiek
podobnego, możemy użyć normalnej logiki React, możemy warunkowo renderować tę treść.
Wszystko, co musimy zrobić, to zarządzać jakimś stanem w naszym
komponencie aplikacji, musimy również tutaj zarządzać wybranym numerem.
Więc dodam tutaj stan użytkowania, a następnie po prostu użyję mojego stanu tutaj i zainicjuję to bez wartości na końcu, tam
chcę uzyskać wybrany numer lub numer użytkownika i ustawić numer użytkownika jako funkcję aktualizacji tutaj i początkowo to jest niezdefiniowane, a
teraz potrzebuję
funkcji, w której
możemy to zmienić, na przykład uruchomić
program obsługi gry, która
brzmi jak odpowiednia nazwa, ponieważ otrzymamy taką liczbę, jeśli użytkownik naciśnie tutaj przycisk uruchamiania gry
na ekranie startowym gry.
Zatem program obsługi gry startowej pobierze następnie wybraną liczbę jako dane wejściowe, to założenie, które
musimy tutaj zrobić i ustawić numer użytkownika na tę wybraną tutaj. Teraz, ilekroć ma to miejsce, ilekroć
mamy numer użytkownika, wiemy, że gra działa i wiemy,
że możemy renderować ekran gry zamiast ekranu startowego.
Więc tutaj możemy na przykład użyć zmiennej treści i powiedzieć, że naszą domyślną treścią jest ekran startowy gry, a
to
jest normalny kod React, tak jak znamy go z React For Web, możesz przechowywać takie komponenty w zmiennych,
a następnie po prostu wyprowadzać zmienną w dół tam też robimy
to już na ekranie startowym gry z potwierdzonym wyjściem. Tak więc ekran uruchamiania gier jest naszym
domyślnym
wyjściem, ale teraz możemy dodać sprawdzanie if i sprawdzanie, czy treść
jest prawdziwa, to właśnie to sprawdzenie sprawdza, więc początkowo będzie fałszywe,
jeśli jest niezdefiniowane, ale teraz, jeśli to prawda, można ustawić numer użytkownika, więc sprawdziłem, czy numer
użytkownika to prawda, jeśli
to prawda, to wiemy, że wybrano numer, będzie on niezdefiniowany, a zatem początkowo fałszywy, ale
jeśli jest to
prawda, jeśli wybrano numer, następnie ustawimy tutaj zawartość na ekran gry, a następnie wyrenderujemy wszystko, co
jest na dole, i będzie to ekran gry lub ekran uruchamiania gry.
Więc teraz, gdy klikniemy tutaj opcję Rozpocznij grę z innym wybranym, to powinno się tutaj przełączyć, jeśli i to jest
ważne, jeśli upewnimy się,
że można uruchomić program obsługi gry z poziomu ekranu początkowego gry. Teraz używamy domyślnego wzorca React, który przekazuje
odwołanie do tego modułu obsługi do tego komponentu, być może w propie onStartGame, co brzmi
dla mnie jak odpowiednia nazwa. Przekazujemy tutaj obsługę początkowej gry,
tylko referencję bez nawiasów, tylko referencję, wskaźnik w tej funkcji, a onStartGame jest
teraz właściwością, której możemy używać na ekranie startowym gry.
Więc tutaj na ekranie startowym gry, kiedy klikniemy tutaj przycisk rozpoczęcia gry, chcę w końcu uruchomić ten
rekwizyt.
Więc tutaj mam onPress, a na końcu chcę uruchomić onStartGame i przesłać tutaj aktualnie wybrany numer, który
jest zarządzany w stanie ekranu początkowego gry.
Więc przesyłam to dalej do onStartGame, a onStartGame jest powiązany z programem obsługi gry startowej, który
oczekuje, a następnie otrzymuje wybrany numer.
W ten sposób upewniamy się, że kliknięcie tego przycisku, aby uruchomić ekran gry, uruchamia tę metodę lub tę
funkcję tutaj,
a po uruchomieniu tej funkcji ustawiamy numer użytkownika, dzięki czemu
zawartość jest ekranem gry, dlatego powinniśmy zobaczyć ekran gry. Teraz brakującym elementem jest to,
że na ekranie gry potrzebuję wyboru użytkownika, aby wygenerować moją początkową liczbę losową i wykluczyć ten
wybór użytkowników dla pierwszej pierwszej liczby losowej, dlatego też musimy przekazać właściwość
o nazwie wybór użytkownika na ekran gry. Możemy więc dodać tutaj propozycję wyboru użytkownika
i przekazać numer użytkownika, którym jest stan, którym zarządzamy w komponencie aplikacji, czyli ten
wybrany numer, który przechowujemy w tym miejscu tutaj,
przekazujemy go do ekranu gry.
Mam więc nadzieję, że przepływ danych jest czysty, pobieramy wybraną liczbę z ekranu startowego gry, gdy ten przycisk jest
wciśnięty przycisk uruchamiania gry, a następnie przechowujemy
go w stanie komponentu aplikacji tutaj w stanie użycia numeru z pomoc w ustawieniu
numeru użytkownika, a następnie używamy tego numeru użytkownika, aby przekazać go do ekranu gry, który jest
renderowany tylko wtedy, gdy mamy numery użytkowników, więc jeśli gra jest uruchomiona, jeśli gra została
uruchomiona tak, że na ekranie gry, możemy użyć numeru użytkownika otrzymanego na proporze wyboru użytkownika, aby następnie wygenerować
nowy numer losowy, który komputer zgadł, gdy ten wybór użytkownika, ten numer użytkownika jest wykluczony, tak że
przy pierwszym zgadywaniu komputer nie może natychmiast zgadnij numer użytkownika. Dużo gadania, zachowajmy to wszystko i
spójrzmy na to.
Wpiszmy 55 i potwierdź i kliknij przycisk Rozpocznij grę, a my nie możemy znaleźć zmiennej w grze początkowej.
Problem polega na tym, że wykonuję, tak, powinny to być rekwizyty przy uruchamianiu gry tutaj, przy przycisku
uruchamiania gry w komponencie uruchamiania gry, ponieważ oczywiście jest to właściwość, którą
otrzymujemy, nie jest to funkcja
zdefiniowana tutaj, jest zdefiniowana
na rekwizytach, to w końcu ten rekwizyt.
Tak mała pomyłka, spróbujmy jeszcze raz
po naprawieniu tego, kliknij przycisk Rozpocznij grę
i to wygląda dobrze.
Teraz widzimy, jak
przeciwnicy zgadują i możemy podać kilka
wskazówek, które w tej chwili nie mają żadnego efektu, ale które wkrótce będą miały efekt, dlatego jesteśmy na następnym ekranie,
jesteśmy na ekranie gry.
Teraz upewnijmy się, że naprawdę możemy dać temu komputerowi kilka wskazówek i upewnij się, że komputer ma
szansę rozwiązać ten problem i zgadnąć nasz numer.