Bevor wir dieses Modul abschließen, kehren wir zu einigen Listen und zu scrollbaren Inhalten zurück, da wir in dieser Anwendung
überhaupt keine solchen Inhalte haben und
es für Sie von entscheidender Bedeutung ist, zu verstehen, wie Sie mit Listen arbeiten und
welche davon Besondere
Macken sind, wenn es um Listen geht. Nehmen wir also an, wir möchten hier die vorherigen
Vermutungen protokollieren, die der Computer gemacht hat. Wir möchten dies hier unter unserer Plus- und Minus-Schaltfläche in diesem weißen leeren Bereich hier protokollieren.
Dazu müssen wir natürlich alle vom Computer gemachten Vermutungen registrieren und dann in der Liste ausgeben.
Beginnen wir also auf dem Spielbildschirm damit, dies zu registrieren.
Derzeit zählen wir hier nur Runden. Das
Ziel muss jedoch sein, dass wir nicht nur Runden zählen, sondern auch die Runden speichern. Wir
haben also eine Vermutung gespeichert, die in jeder Runde gemacht
wurde, und dies hier in unseren Runden zu erreichen Zustand, wir können einfach ein Array anstelle einer Zahl verwalten und ich
werde diese vergangenen Vermutungen benennen, um wirklich klar zu sein, was dort drin
ist, und dies wird daher als Set Past-Vermutungen bezeichnet.
Das Ziel ist es nun, diesem Array eine neue Vermutung hinzuzufügen, wenn wir eine neue Zufallszahl
generieren, also hier im nächsten Vermutungshandler. Dort, wo wir die Runden setzen, anstatt die
Runden wie diese zu setzen, die wir nicht mehr verwalten, müssen wir
unsere früheren Vermutungen setzen und dort müssen wir unsere vorherigen Vermutungen verwenden und hier tatsächlich eine neue Vermutung hinzufügen.
Jetzt können wir hier dieses Funktionsformular verwenden, in dem wir die curPastGuesses erhalten, die ein bisschen seltsam sind, aber einfach
bedeuten, dass dies unser aktueller Status ist und wir diesen aktualisieren möchten oder es
ist unser neuester Status, um genau zu sein, und wir Ich möchte das aktualisieren und wir möchten es aktualisieren,
indem wir ein neues Array zurückgeben, das unser neuer Status ist. Dies sollte natürlich unsere
aktuellen früheren Vermutungen berücksichtigen und dort neue Vermutungen hinzufügen.
Jetzt können wir entweder am Ende dieser Liste oder am Anfang eine neue Vermutung hinzufügen, und ich werde
sie tatsächlich am Anfang hinzufügen, sodass unsere letzte Vermutung immer ganz oben auf der Liste steht, wenn wir sie später auf dem
Bildschirm rendern .
Hier können wir also die nächste Zahl hinzufügen, die unsere neue aktuelle Vermutung ist, die wir hier
generieren, und das müssen wir hier als Element hinzufügen, oder? Damit fügen wir diesem Array mit jeder Vermutung neue Elemente hinzu.
Vergessen Sie jetzt nicht, dass wir auch mit einer Vermutung
beginnen. Wir generieren hier eine erste Vermutung. Ich
möchte mit dieser Vermutung in der Liste beginnen und daher müssen wir sie hier zur Liste hinzufügen,
damit ich sie extrahieren kann Rufen Sie hier unseren Funktionsaufruf use state auf und erstellen Sie eine neue konstante anfängliche Schätzung, bei der
es sich um diese zufällig generierte Zahl handelt. Jetzt ist es diese anfängliche Schätzung, die ich hier hinzufüge, um state zu verwenden, und es ist
auch die anfängliche Schätzung, die ich als erstes Element zu diesem Array in hinzufüge Verwenden Sie in unseren früheren
Vermutungen die Zustandsinitialisierung.
Vergessen Sie jetzt nicht, dass der Verwendungsstatus hier erneut ausgeführt wird, wenn diese Komponente erneut gerendert wird. Die Funktionsweise des Verwendungsstatus
ist jedoch so, dass React erkennt, dass ein Status für diese Komponente bereits initialisiert wurde, sodass nur der Status
festgelegt
wird Geben Sie diese anfängliche Vermutung zum ersten Mal an, wenn diese Komponente gerendert wird, und
nicht für nachfolgende Renderings. Dort wird
diese anfängliche Vermutung zwar neu erstellt, aber aufgrund der getrennten Statusbehandlung, bei der React
herausfindet, dass wir bereits einen Status haben, nicht verwendet.
Damit initialisieren wir dies, wir initialisieren unsere Vermutung auch hier in dieser Liste und fügen der
Liste unten hier eine neue Vermutung hinzu. Mit all dem sollten wir einige
frühere Vermutungen haben, die wir in einer Liste ausgeben können,
und jetzt haben wir hier zwei Möglichkeiten, dies auszugeben, mit einer FlatList oder mit der Bildlaufansicht, und
ich werde wieder mit einer Bildlaufansicht dafür beginnen.
Hier unter der Karte füge ich eine Bildlaufansicht hinzu. Dazu müssen Sie die Bildlaufansicht aus React Native importieren. Führen Sie dies hier
aus,
scrollen Sie die Ansicht, importieren
Sie sie aus React Native und geben Sie sie unter der Liste aus Dies ist
ein scrollbarer Inhalt, da ich dort meinen
dynamischen Inhalt habe, meine früheren Vermutungen verwende und diesen in eine Liste von Komponenten abbilde.
Hier habe ich also sozusagen
meine individuelle Vermutung und dies sollte nun eine Komponente innerhalb dieser Kartenfunktion zurückgeben, und eine
solche Vermutungskomponente könnte eine Ansicht sein, sagen wir, mit einem Text darin, in dem ich einfach die Vermutung
ausgebe, also Hier rendere ich diese Vermutung, die ich bekomme, und da ich meine Vermutungen hier direkt so zum Array hinzufüge, ist
die Vermutung, die ich dort habe, nur die Vermutungsnummer und ich kann sie hier einfach so ausgeben.
Jetzt haben Sie gelernt, dass Sie für Elemente, die wir so zuordnen, auch einen Schlüssel hinzufügen müssen, und
wir könnten unsere Vermutung hier als Schlüssel verwenden, wenn
wir garantiert eindeutig wären, aber mit unserer aktuellen Logik ist dies tatsächlich nicht der Fall Da in unserer aktuellen
Logik das Generieren eines Zufalls zwischen tatsächlich eine neue Zufallszahl generiert, bei der die obere Grenze, dieser hohe Wert hier, ausgeschlossen
ist, die untere Grenze jedoch enthalten ist, können wir diese untere Grenze als neuen Zufallswert erhalten.
Der Nachteil dabei ist, dass wir hier, wo wir unsere neue untere Grenze setzen, dies auf die aktuelle
Vermutung setzen, was bedeutet, dass dies in einer zukünftigen Zufallszahl wiederholt werden kann, und wir haben dies
manchmal auch
in diesem Modul gesehen Der Computer errät eine Zahl, die bereits einige Runden zuvor erraten wurde.
Es ist kein großes Problem, aber jetzt liegt es daran, dass wir jetzt unsere Vermutung garantieren müssen,
einzigartig sein müssen und die Lösung einfach ist. Wir können hier einfach eine hinzufügen, wenn wir unsere neue untere
Grenze festlegen, denn indem wir hier eine hinzufügen, stellen wir sicher dass die neue untere Grenze, die in der Zufallszahlengenerierung enthalten ist, tatsächlich
eine höhere ist als die aktuelle Vermutung, die falsch war, sonst wären
wir nicht hierher gekommen.
Jetzt setzen wir eine neue untere Grenze, die in Zukunft generiert werden kann, die wir aber zuvor nicht
generiert haben.
Dies ist also eine kleine Korrektur in der Logik, die
in keiner Weise schadet, und es ist besonders wichtig, wenn Sie die Vermutung hier als eindeutigen Schlüssel verwenden möchten.
Mal sehen,
ob das funktioniert.
Speichern wir das und probieren wir es hier unter iOS aus,
starten das Spiel
und wir sehen unsere anfängliche Vermutung, 57, es ist nicht
gut formatiert, aber wir sehen es hier. Jetzt ist 57 zu hoch, wenn ich niedriger sage,
sehen wir die neue Vermutung oben auf der Liste und ich habe dort gelogen und das scheint zu funktionieren.
Jetzt bekommen wir natürlich einen Fehler, wenn das Spiel vorbei ist, weil wir dort versuchen, unsere Runden zu bekommen, und wir
verwalten dies nicht mehr als Staat. Also müssen wir das
beheben, aber die Ausgabe der Liste funktioniert.
Beheben wir nun unseren Rundenfehler,
der einfach von useEffect kommt, wo ich Runden an onGameOver weitergebe. Dort muss ich am Ende die Anzahl der Runden weiterleiten, die
der Computer benötigt hat, um unsere Anzahl zu erraten.
Früher hatten wir hier eine Rundenvariable, einen Rundenzustand, jetzt haben wir nur vergangene
Vermutungen, was ein Array ist, so dass wir vergangene Vermutungen wie diese nicht weiterleiten können, weil am Ende des Spiels
am Ende eine Zahl benötigt
wird, aber natürlich können wir die weiterleiten Länge der vergangenen Vermutungen, die nur die Anzahl der Runden ist, die der
Computer benötigt hat.
Wenn wir dies tun, sollten wir nun tatsächlich in der Lage sein, das Spiel auch erfolgreich zu beenden.
Wenn wir es hier kurz versuchen und das Spiel lösen, ja,
das funktioniert.
Jetzt haben wir es also geschafft.
Wenden wir uns nun wieder der Bildlaufansicht und den Listenelementen zu und stellen
sicher, dass wir dort das richtige Styling haben.