Wir haben viel Zeit auf diesem ersten Bildschirm verbracht, aber natürlich geht es in
diesem Kurs aus gutem Grund darum, React Native zu lernen, und Sie haben viel über Layouting, Styling, Verbinden von
Komponenten, Verwenden mehrerer Komponenten und Konfigurieren von integrierten Komponenten gelernt Das ist ein zentraler Bestandteil von React
Native und ermöglicht es Ihnen, am Ende echte Apps zu erstellen. Trotzdem ist es jetzt an der Zeit, weiter an dieser App
zu arbeiten. Bevor wir uns eingehender mit anderen Dingen
befassen, die wir später stylen könnten, möchte ich sicherstellen, dass diese Schaltfläche zum Starten
des Spiels funktioniert, da wir im Moment immer daran festhalten Starten Sie den Spielbildschirm, aber
jetzt füge ich dem Bildschirmordner eine zweite Komponente hinzu, den Spielbildschirm selbst, also den Bildschirm, den Inhalt, den ich auf
dem Bildschirm anzeigen möchte, wenn das Spiel ausgeführt wird, und das ist der Bildschirm, der dafür verantwortlich ist Zeigen
Sie die Vermutung des Computers an und lassen Sie den Benutzer dem Computer mitteilen, ob dies richtig
oder falsch ist, ob der Wert niedriger oder größer sein sollte. Das
ist hier also das Ziel.
Wie ich bereits erwähnt habe, ist es dennoch eine reguläre
Komponente, daher müssen wir React auf jeden Fall importieren und wir werden auch einige Dinge aus React Native importieren,
vor allem natürlich die Ansicht und den Text, mit denen kann man nichts falsch machen. Auch
das Stylesheet braucht man normalerweise immer.
Dann können wir hier unsere Funktionskomponente für den Spielbildschirm hinzufügen und
das Styles-Objekt hier mithilfe von Stylesheet erstellen. Erstellen Sie so und exportieren Sie am Ende unseren Spielbildschirm hier als Standard und
entfernen Sie dieses Plus hier oben.
Jetzt haben wir diese Spielbildschirmkomponente hier definiert und jetzt lassen
Sie uns kurz innehalten und darüber nachdenken, was hier passieren muss.
Am Ende muss nun geschehen, dass der Computer eine Vermutung anstellen muss und zunächst
eine Vermutung
anstellen muss, wenn dieser Bildschirm zum ersten Mal geladen wird, aber auch dann, wenn der Benutzer im Grunde die Taste "Dies
ist
zu niedrig" oder "Zu hoch"
drückt. Wann immer der Benutzer einen Hinweis darauf gibt, ob diese Vermutung ist, in welche Richtung der reellen
Zahl diese Vermutung sozusagen ist, wann immer dies geschieht, möchten wir eine neue Vermutung generieren.
Jetzt sollte die Vermutung selbst eine Zufallszahl sein. Daher erstelle ich jetzt eine neue Funktion außerhalb meiner Funktionskomponente,
da dort
keine Daten verwendet werden. Daher sollte sie nicht bei jedem erneuten Rendern neu erstellt werden
Wenn Sie sich nicht auf Requisiten
oder Status verlassen, können Sie auch einfach eine Funktion haben, die sich außerhalb Ihrer
Komponente befindet, und ich werde diese Generierung
zufällig zwischen nennen,
da diese Funktion dies bewirkt.
Es ist eine Funktion, die eine Zufallszahl zwischen einem Minimum und einem Maximum generiert
und die es uns
auch ermöglicht, bestimmte Zahlen auszuschließen. Beispielsweise sollte die erste Zahl, die wir generieren, die Lösung ausschließen, damit das Gerät, die
App, niemals die Wahl des Benutzers erraten kann beim ersten Versuch.
Jetzt hier wird das Minimum auf Mathe normalisiert. Ceil Minimum, um hier im Grunde
genommen eine Ganzzahl zu haben, wenn eine Nicht-Ganzzahl eingegeben und aufgerundet wird, und Max wird auf den Boden
gelegt, um dasselbe zu tun, aber abgerundet. Dann habe ich meine Zufallszahl, die ich mit Mathe generiere. zufällig und Math.
random gibt uns eine Zufallszahl zwischen 0 und 1, um eine Zahl zwischen min und max zu haben, müssen wir diese mit max - min multiplizieren
und dann am Ende auch hier min hinzufügen, aber auch sicherstellen, dass Sie Math aufrufen. Boden auf das Ergebnis dieser gesamten Operation hier und dies gibt
Ihnen eine Zufallszahl zwischen diesem Minimum und Maximum.
Nachdem dies generiert
wurde, möchte ich überprüfen, ob die Zufallszahl gleich der Zahl ist, die wir ausschließen möchten. Dies wäre natürlich ein
sehr seltener Zufall, kann aber vorkommen. In diesem Fall werde ich das Ergebnis eines anderen generierten Zufalls zwischen zurückgeben Rufen Sie an, wo
ich einfach min, max weiterführe und ausschließe, was wir haben, also wiederhole ich einfach, generiere zufällig
zwischen und gebe den Wert dieses wiederholten Laufs zurück, wenn wir dort den ausgeschlossenen Wert erneut erhalten, werden wir
ihn noch einmal wiederholen, also letztendlich wir Ich werde dort ankommen und wenn
wir nicht die ausgeschlossene Nummer haben, was in den meisten Fällen der Fall sein sollte, dann
werde ich diese Zufallszahl sofort zurückgeben.
Das ist also jetzt eine Funktion, die uns eine Zufallszahl generiert.
Jetzt hier auf dem Spielbildschirm möchte ich einen Status verwalten, also importiere ich den useState-Hook aus React und initialisiere hier einen Status mit der
Zufallszahl, da der Status, den ich hier verwalten möchte, die Vermutung des
Computers ist, der aktuelle erraten und das erfordert
auch eine eingestellte aktuelle Vermutungsfunktion, damit wir dies ändern können, wenn der Benutzer einen neuen
Hinweis gibt.
Hier können wir also Generate Random zwischen aufrufen, um einen Anfangszustand zu generieren, der gespeichert wird. Dieser wird
dann nur als Anfangszustand betrachtet. Wenn
diese Komponente neu erstellt wird und daher der Verwendungsstatus erneut aufgerufen wird, generieren wir eine
weitere Zufallszahl Dies wird diesen Status dann jedoch nicht überschreiben, da der einmal festgelegte Status nicht erneut
überschrieben wird, indem der hier abgeleitete Wert hinzugefügt wird.
Dies wird von React nur berücksichtigt, wenn wir noch keinen Anfangszustand haben. Danach wird dieser Anfangszustand oder
aktualisierte Zustand getrennt von der Komponente verwaltet und durch diesen Aufruf hier nicht erneut überschrieben.
Wie auch immer wir diesen Anruf tätigen müssen, wir möchten zunächst eine Zufallszahl zwischen 1 und 100 erhalten.
100 wird mit der Logik, die wir
dort geschrieben haben, ausgeschlossen. Es wird also eine Zahl zwischen 1 und 99, 99 enthalten
sein, und ich möchte ausschließen die Wahl des Benutzers.
Ich erwarte, dass dies hier auf meine Requisiten kommt,
daher könnte die Benutzerauswahl ein Requisitenname sein, den wir hier verwenden, und das ist der Wert, den ich ausführen möchte, da
dies am
Ende die Lösung ist und wir die Lösung nicht sofort erraten können. das
wäre ein bisschen unfair.