Bevor wir weitere Logik hinzufügen, arbeiten wir an der Benutzeroberfläche und an der Ausgabe.
Also hier werde ich am Ende eine
Ansicht zurückgeben und in dieser Ansicht möchte ich einen Text haben, in dem ich sage, dass Gegner raten, also was der Computer erraten hat, und dann können
wir den Zahlencontainer wiederverwenden, um diese erratene Zahl schön darzustellen.
Das ist ein großer Vorteil solcher wiederverwendbaren Komponenten, weil Sie sie wiederverwenden können, denke ich. Genau
das tun wir hier.
Wir werden diesen Zahlencontainer wieder verwenden, unterhalb dessen der Gegner den Text hier errät, um unseren eigenen Zahlencontainer
zu haben und die aktuelle Vermutung
hier gut auszugeben. Die aktuelle Vermutung ist unser
Zustand. Denken Sie daran, dass wir dies hier initialisieren und dass wir es bald auch ändern können.
Das ist es also, was hier ausgegeben wird. Darunter können wir jetzt vielleicht auch unsere Karte mit zwei Tasten präsentieren, mit denen der Benutzer dem
Computer einen Hinweis geben kann.
Hier importiere ich also eine Karte von einer Komponentenkarte, um diese Schaltflächen dort einzuwickeln. Daher können wir bereits eine Schaltfläche von
React Native importieren, da wir diese ebenfalls in einer Sekunde benötigen
und dann einfach unsere Karte hier und in dieser Karte haben Ich möchte eine Schaltfläche mit dem Titel "niedriger" und eine weitere Schaltfläche, bei
der wir "größer" sagen. Dies sind zwei Richtungen, in die wir einen Hinweis geben können. Ist also die Zahl, die
Sie als zu niedrig erraten haben, zu
hoch, dann können wir die Computer einen Hinweis mit diesen Tasten und onPress, ich werde im Moment nur
eine leere Funktion registrieren, die nichts tut, die sich natürlich bald
ändern wird und effektiv eine neue Zufallszahl generiert und damit ist es jetzt Zeit hinzuzufügen einige Stile hier.
Ich möchte einen Stil für meinen gesamten Bildschirm haben, und wie zuvor wird dieser
flexibel, um den gesamten verfügbaren Platz auf dem Bildschirm unter der
Kopfzeile, die wir oben haben, zu belegen. Fügen Sie einen Abstand von 10
hinzu, um etwas Platz um den Inhalt zu haben Damit es nicht direkt an den Rändern sitzt und hier auch Ausrichtungselemente verwendet, um unseren Inhalt horizontal zu zentrieren,
und diese Bildschirmeigenschaft in der umgebenden Ansicht hier verwendet wird, um dort Stile hinzuzufügen, sodass
der Inhalt auf diesem Gesamtbildschirm gut positioniert ist. Für diese Schaltflächen wäre es schön, wenn sie nebeneinander sitzen würden.
Auf der Karte können wir also einen Stil hinzufügen, möglicherweise den Schaltflächencontainer hier als Namen verwenden und daher denselben Namen hier in
unserem Stylesheet hinzufügen, da dies der Fall ist Wir beziehen uns hier
auf die Flex-Richtung und setzen sie auf Zeile. Wir können hier eine Flex-Richtung festlegen, da ich dies auf meiner Karte
mache. Wenn
wir uns diese Karte ansehen, verteilen wir diese Stile auf eine Ansicht und eine view verwendet die Flexbox, damit wir
hier eine Flexrichtung festlegen können, und genau das mache ich dort. Dabei stelle ich die Flexrichtung
auf die Reihe ein, um Elemente horizontal nebeneinander zu positionieren. Rechtfertigen Sie den Inhalt mit dem Leerzeichen um,
um den freien Speicherplatz um die Schaltflächen links und rechts gleichmäßig zu verteilen und einen Rand von 20 hinzuzufügen, damit
diese Karte mit unseren Schaltflächen nicht direkt neben der erratenen Zahl sitzt, sondern vorhanden ist Einige Abstände dazwischen
und möglicherweise auch eine Breite von 300 und eine maximale Breite von 80%, um sicherzustellen, dass
dies niemals die Grenzen der übergeordneten Ansicht überschreiten kann. Wenn wir dies speichern, wäre es schön, das zu
sehen, und dafür brauchen wir eine Möglichkeit, zum Spielbildschirm zu gelangen.
Jetzt verwenden wir den Startbildschirm in der App-Komponente. Daher müssen wir dort auch den Spielbildschirm verwenden und
die ausgewählte Nummer in dieser App-Komponente verwalten, da dies die einzige Komponente ist, die ständig auf dem Bildschirm
angezeigt wird. Nun, neben dem Header,
aber die App-Komponente ist auch die Komponente, die den Startspielbildschirm und den Spielbildschirm bald enthalten wird,
und daher ist es
die Komponente, in der wir auch Daten an den Startspielbildschirm und an den Spielbildschirm
weitergeben können.
Importieren wir also den Spielbildschirm hier vom Bildschirm des Spielbildschirms und natürlich möchte ich meinen Spielbildschirm hier rendern, aber nicht, wenn der
Startbildschirm noch sichtbar ist, möchte ich eine der beiden und eine Randnotiz haben, es gibt
auch eine total verschiedene Arten des Ladens verschiedener Komponenten und wir werden
in einem separaten Modul im Navigationsmodul darauf eingehen.
Während wir später verschiedene Navigationslösungen behandeln werden, gibt es derzeit eine Möglichkeit, einen der beiden Bildschirme
zu rendern. Wir haben
auch die Möglichkeit, derzeit nur einen dieser beiden Bildschirme zu rendern, und dafür
benötigen wir kein spezielles Werkzeug oder so
etwas, wir können normale Reaktionslogik verwenden, wir können diesen Inhalt bedingt rendern.
Alles, was wir dafür tun müssen, ist, dass wir einen Status in unserer
App-Komponente verwalten müssen. Wir müssen auch hier die ausgewählte Nummer verwalten.
Also werde ich hier den Verwendungsstatus hinzufügen und dann einfach meinen Status hier verwenden und diesen am Ende ohne Wert initialisieren. Dort möchte ich
die
ausgewählte Nummer oder die Benutzernummer abrufen und habe hier und anfänglich die Benutzernummer als Aktualisierungsfunktion festgelegt Das ist undefiniert und jetzt brauche
ich eine Funktion,
mit der wir dies ändern
können, wie z. B. den Startspiel-Handler,
der sich
wie ein
passender Name anhört, da wir eine solche Nummer haben, wenn der Benutzer hier im Startspielbildschirm die Schaltfläche
zum Starten des Spiels drückt.
Der Handler des Startspiels erhält dann die ausgewählte Nummer als Eingabe. Dies ist eine Annahme, die wir
hier treffen und die Benutzernummer hier auf diese ausgewählte Nummer setzen müssen. Wann immer dies der Fall ist, wann
immer wir eine Benutzernummer haben, wissen wir, dass das Spiel läuft
und dass wir den Spielbildschirm anstelle des Startspielbildschirms rendern können.
Hier können wir beispielsweise eine Inhaltsvariable verwenden und sagen, unser Standardinhalt ist der Startbildschirm des Spiels. Dies ist normaler
React-Code,
wie Sie ihn auch aus React For Web kennen. Sie können solche Komponenten in Variablen speichern und die
Variable dann einfach nach unten ausgeben dort ist es auch das,
was wir bereits im Startbildschirm mit der bestätigten Ausgabe machen. Der Startbildschirm ist also unsere Standardausgabe, aber jetzt können
wir eine
if-Prüfung hinzufügen und prüfen, ob der Inhalt wahr ist. Dies wird durch diese
Prüfung überprüft. Daher ist er zunächst falsch, wenn er nicht definiert ist, aber
jetzt, wenn er wahr ist, werden wir kann die Benutzernummer festlegen, also habe ich überprüft, ob die Benutzernummer wahr
ist, wenn das wahr ist,
dann wissen wir, dass eine Nummer ausgewählt wurde, sie ist undefiniert und daher anfangs falsch, aber wenn sie
wahr ist, wenn
a Nummer wurde ausgewählt, dann setzen wir den Inhalt hier als Spielbildschirm und rendern dann alles, was sich dort
unten im Inhalt befindet, und das wird entweder der Spielbildschirm oder der Startspielbildschirm sein.
Wenn wir jetzt hier mit einem anderen ausgewählten auf Spiel starten klicken, sollte dies hier umgeschaltet werden, wenn und
das ist wichtig, wenn
wir sicherstellen, dass der Startspiel-Handler vom Startbildschirm aus ausgelöst werden kann. Dafür verwenden wir ein Standardreaktionsmuster, bei dem
ein Verweis auf diesen Handler an diese Komponente weitergegeben wird, möglicherweise auf der onStartGame-Requisite, was für mich
nach einem passenden Namen klingt. Wir leiten den Startspiel-Handler weiter,
nur die Referenz ohne Klammern hier, nur eine Referenz, einen Zeiger auf diese Funktion und
onStartGame ist jetzt eine Eigenschaft, die wir im Startspielbildschirm verwenden können.
Wenn wir hier im Startbildschirm auf die Schaltfläche zum Starten des Spiels klicken, möchte ich diese Requisite am Ende
auslösen.
Hier habe ich also onPress und dort möchte ich am Ende onStartGame ausführen und die aktuell ausgewählte Nummer hier
weiterleiten, die im Status des Startspielbildschirms verwaltet wird.
Hier leite ich dies an onStartGame weiter und onStartGame ist an den Startspiel-Handler gebunden, der diese
ausgewählte Nummer erwartet und dann empfängt.
Auf diese Weise stellen wir sicher, dass das Klicken auf diese Schaltfläche zum Starten des Spielbildschirms diese Methode oder diese Funktion hier auslöst.
Wenn diese Funktion
ausgelöst wird, legen wir die Benutzernummer fest. Dadurch wird sichergestellt, dass der
Inhalt der Spielbildschirm ist und daher angezeigt werden sollte der Spielbildschirm. Ein fehlendes Teil ist nun,
dass ich auf dem Spielbildschirm die Benutzerauswahl benötige, um meine anfängliche Zufallszahl zu generieren und diese
Benutzerauswahl für diese erste Zufallszahl korrekt auszuschließen. Daher müssen wir eine
Eigenschaft namens Benutzerauswahl an den Spielbildschirm übergeben. Daher können wir hier die Benutzerauswahl-Requisite hinzufügen und
die Benutzernummer übergeben, die der Status ist, den wir in der App-Komponente verwalten. Dies ist die ausgewählte
Nummer, die wir in dem Status hier speichern. Geben
Sie diese an den Spielbildschirm weiter.
Ich hoffe also, dass der Datenfluss klar ist. Wir erhalten diese ausgewählte Nummer vom Startbildschirm, wenn diese Schaltfläche gedrückt wird. Die
Schaltfläche zum Starten des Spiels wird gedrückt. Wir speichern
sie dann im Status der App-Komponente hier im Status der Verwendungsnummer mit dem Hilfe der eingestellten
Benutzernummer und wir verwenden diese Benutzernummer dann, um sie an den Spielbildschirm weiterzugeben, der nur gerendert wird, wenn
wir eine Benutzernummer haben. Wenn also das Spiel läuft, wenn das Spiel so gestartet wurde, dass auf
dem Spielbildschirm Wir können die Benutzernummer verwenden, die auf der Benutzerauswahl-Requisite empfangen wird, um dann die neue Zufallszahl zu generieren,
die der Computer erraten hat, wo diese Benutzerauswahl, diese Benutzernummer, ausgeschlossen ist, so dass der Computer bei der allerersten
Computerschätzung dies nicht kann Erraten Sie sofort die Nummer des Benutzers. Viel reden, lasst uns das alles speichern und
es uns ansehen.
Geben Sie 55 ein und bestätigen Sie und klicken Sie auf Spiel starten. Wir können beim Startspiel keine Variable finden.
Das Problem hier ist also, dass ich hier ausführe, ja, das sollten Requisiten beim Startspiel sein, auf der
Schaltfläche "Startspiel" in der Startspielkomponente, da dies natürlich eine Eigenschaft ist, die wir erhalten.
Es ist keine hier definierte
Funktion, sondern definiert Auf
den Requisiten ist es am Ende diese Requisite.
Also kleiner Fehler, lass es uns noch einmal
versuchen, nachdem du das behoben hast, klicke auf Spiel
starten und das sieht gut aus.
Jetzt sehen wir,
wie die Gegner raten, und wir können
hier einige Hinweise geben, die momentan keine Wirkung haben, aber bald eine Wirkung haben werden, und deshalb sind wir auf dem nächsten Bildschirm,
wir sind auf dem Spielbildschirm.
Stellen wir nun sicher, dass wir dem Computer hier tatsächlich einige Hinweise geben können und dass der Computer die Möglichkeit
hat, dies zu lösen und unsere Anzahl zu erraten.