Jetzt verwende ich hier natürlich eine Bildlaufansicht und Sie haben gelernt, dass eine FlatList besser ist, wenn Sie eine
Liste haben, in der Sie nicht wissen, wie viele Elemente Sie dort haben.
Für unser Spiel ist eine Bildlaufansicht in Ordnung, denn ja, wir wissen nicht, wie viele
Gegenstände es sein werden, und theoretisch werden wir, wenn wir sehr schlecht raten, ungefähr 100 Gegenstände darin haben, aber
das wird fast nie passieren und Daher enthält diese Liste normalerweise nicht mehr als 10, 15, 20 Elemente. Daher führt dies höchstwahrscheinlich nie
zu Leistungsproblemen. Die Verwendung einer Bildlaufansicht hier ist absolut in Ordnung,
da es sich um eine Liste mit mehreren Elementen handelt. Das wird unsere Bildschirmgrenzen überschreiten, aber
es wird selten eine Liste mit vielen Gegenständen sein. Aufgrund der Funktionsweise unseres Spiels wird es
niemals eine Liste mit mehr als 100 Gegenständen sein.
Eine Bildlaufansicht wäre hier also in Ordnung, aber falls Sie dennoch eine FlatList verwenden möchten, lassen Sie mich
dies auch zeigen.
Dafür können wir FlatList hier hinzufügen und das bedeutet natürlich, dass wir FlatList aus
React Native importieren müssen. Hier importiere ich FlatList also so und mit
FlatList importiert haben Sie gelernt, dass FlatList eine Datenstütze nimmt, die auf die zeigt Daten, die Sie
eingeben möchten, und in unserem Fall hier,
das wäre unser bisheriges Vermutungsarray, und Sie haben dann eine Renderelement-Requisite, mit der Sie die Elemente für jedes Element in den Daten, die Sie
eingeben, ausgeben können Komponenten für jedes Element in den Daten und hier kann ich
auf
Renderlistenelement zeigen, das aufgerufen werden sollte. Im Moment funktioniert
dies aus mehreren Gründen nicht. Zum einen erwartet das Renderlistenelement zwei
Werte, aber das Renderelement hier auf FlatList leitet nur ein Element weiter. Dies sind die Elementdaten, die Informationen
zum Index und zu dem Element enthalten, das gedruckt werden soll.
Die andere Sache, die uns Probleme bereiten wird, ist der Schlüssel.
Möglicherweise erinnern Sie sich, dass FlatList erwartet, Objekte in dem Array zu erhalten, das Sie übergeben, wobei jedes Objekt über eine
Schlüsseleigenschaft verfügt, die es extrahieren und als Schlüssel für ein effizientes erneutes Rendern verwenden kann.
Jetzt haben wir hier kein Array von Objekten, wir haben ein Array von Zahlen und das wird nicht funktionieren.
Jetzt können wir FlatList hier einen Schlüsselextraktor hinzufügen, um dessen Standard zu überschreiben. Der Schlüsselextraktor übernimmt eine Funktion, die unseren
Artikel am Ende abruft, und dann müssen wir FlatList mitteilen, wo sich unser Schlüssel befindet, und standardmäßig sucht er
nach Artikel. Schlüssel oder für Artikel. id, hier
wollen wir ihm sagen, dass der Gegenstand selbst der Schlüssel ist.
Jetzt möchte FlatList jedoch einen Schlüssel, der eine Zeichenfolge und keine Zahl ist, da
sonst eine Warnung angezeigt wird.
Das nächste, was wir tun müssen, ist, dass die bisherigen Vermutungen, die wir verwalten, Zeichenfolgen sein sollten, und das ist
kein Problem, da wir sie sowieso nur zum Drucken auf dem Bildschirm verwenden. Es
ist uns also egal, ob sie technisch sind Als Zahl oder als Zeichenfolge gespeichert. Wenn wir also
eine neue Vermutung hinzufügen, können wir einfach toString aufrufen, eine integrierte Javascript-Methode für die Zahl, um sie in einen Zeichenfolgentyp
zu konvertieren und dasselbe für den Anfangswert von zu tun Kurs. Hier, wo ich meine anfängliche Vermutung hinzufüge, rufe dort
auch String auf, und jetzt haben
wir Zeichenfolgen, die daher als Zahlen verwendet werden können. Wie ich bereits sagte, erwartet das Renderlistenelement die falschen
Argumente. NumOfRound funktioniert nicht so. Der Wert funktioniert auch nicht so. Stattdessen erhalten wir die Elementdaten
und können dennoch ein zusätzliches
Argument erwarten. Dies muss dann jedoch als erstes Argument erwartet werden, da wir jetzt einfach nach unten gehen können, um das Element
hier in der FlatList zu rendern und Argumente zu binden, die übergeben werden sollen, sodass wir neben dem
Standardargument, das übergeben wird, weitere Argumente hinzufügen können. Jetzt erwartet bind dies als erstes Argument, damit wir festlegen, worauf
sich dies in der von uns aufgerufenen Funktion beziehen soll. Es ist uns hier egal, also füge ich es
einfach hinzu.
Sie können es auch auf null setzen spielt keine Rolle.
Das zweite Argument, das wir hier hinzufügen, ist das erste Argument, das von dieser
Funktion empfangen wird, und das sollte unsere runde Zahl sein,
die pastGuesses sein sollte. Länge. Früher habe ich den Index hier abgezogen, aber das funktioniert
nicht mehr, da ich keinen Zugriff mehr auf den
Index habe. Wir werden nicht manuell zugeordnet. Also übergebe ich einfach die
Länge dort und das Gute ist, dass ich den Index innerhalb des Renderelements aus den Artikeldaten herausholen kann.
Dieses Standardargument wird auch von React übergeben und das Standardargument wird automatisch an das letzte
Argument übergeben.
Die ersten Argumente sind also die Argumente, die
Sie in bind eingerichtet
haben. In diesem Fall ist dies nur ein Argument, unsere Anzahl von Runden oder unsere Länge des Arrays. Alle
Standardargumente, die normalerweise übergeben worden wären, werden als zusätzliche Argumente hinzugefügt am Ende Ihrer Argumentliste hier.
Hier ist die Anzahl der Runden
auch kein passender Name mehr, sondern die Listenlänge, die sich nach einem besseren Namen
anhört, weil wir das bekommen, aber hier können wir unsere Anzahl der Runden anhand der
Listenlänge und dann berechnen durch Abzug von itemData. Index, da die Artikeldaten, die Sie automatisch von React Native erhalten, ein Objekt sind, das
auch eine Indexeigenschaft hat, die der Index des Elements ist, das Sie ausgeben, und Sie auch itemData erhalten. Artikel und das ist der Artikel
selbst, was in unserem Fall die Vermutung ist.
Wir müssen hier jetzt auch keinen Schlüssel mehr hinzufügen, da diese Eingabe dank der FlatList
von React Native vorgenommen wird. Das war also viel Arbeit, jetzt
sollten wir wieder eine Liste ausgeben können.
Speichern wir das also und probieren wir es
hier aus und das scheint zu
funktionieren, aber natürlich haben wir jetzt die Positionierung verloren. Zuvor haben wir der Bildlaufansicht den Inhalt des Inhaltscontainers und
die Liste der Stile hinzugefügt. Das Gute ist,
dass Sie dies auch in der FlatList tun können. Während Sie einen Stil wie in der Bildlaufansicht hinzufügen
können, können Sie mit diesem Stil beispielsweise einen Rand um die Liste hinzufügen, aber Sie können den Inhalt innerhalb der
Liste nicht ausrichten. Verwenden Sie
stattdessen den Inhaltscontainer-Stil, der auch von FlatList unterstützt wird. Daher können wir
hier auch auf die Liste der Stile verweisen. Daher sollte dies jetzt genauso funktionieren wie
zuvor in unserer Bildlaufansicht.
Probieren wir es aus und Sie werden sehen, dass wir hier unten beginnen und jetzt Elemente hinzufügen können.
Nun wollen wir sehen, ob das Scrollen auch so
funktioniert, wie es sollte, ja, und wir können das neueste und das älteste Element
sehen und ja, es stimmt etwas nicht mit der Positionierung der Elemente im
Listenelement, und ich werde darauf zurückkommen, aber Im Allgemeinen funktioniert dies. Testen wir es auch auf Android, also fangen
wir an zu
raten und hoffen, dass wir das nicht zu früh lösen, nein, das
funktioniert und
hier können wir auch scrollen, wie Sie sehen können. Das funktioniert also auch mit der FlatList.
Was ist nun mit dieser seltsamen Verteilung von Inhalten hier in unseren Listenelementen?
Nun, Sie werden feststellen, dass die Listenelemente selbst größer sind als zuvor.
Der Inhalt wird so verteilt, als würde das Listenelement hier enden, und das ist in der Tat das Problem.
Wir haben eine Breite von 60% des Listenelements und unser Inhalt respektiert dies, aber unsere Grenzen tun
dies seltsamerweise nicht.
Um dieses seltsame FlatList-Verhalten zu beheben, können Sie zu Ihrem Listencontainer gehen, der
die Gesamtliste enthält, und dort die Breite auf die gewünschte Listenbreite am Ende einstellen, z. B.
60%, und Ihren Listenelementen eine Breite geben von 100%.
Jetzt ist der Listencontainer insgesamt kleiner, weniger breit und daher nehmen die Listenelemente diese Breite an und haben dieselbe
Breite. Da Sie selten
den Fall verwenden müssen, in dem Ihr Listencontainer breiter sein muss als die
Listenelemente, weil was sonst wäre dort im Listencontainer sollte das eine gute Lösung sein.
Wenn Sie das jetzt tun, werden Sie feststellen, dass die Breite besser aussieht, aber tatsächlich ist die Positionierung jetzt ein Problem.
Nun, da wir jetzt die Breite für den externen Listencontainer gesteuert haben, können wir das
Ausrichten von Elementen hier in der Liste selbst entfernen.
Vergessen Sie also nicht, dass der Stil dem Stil des Inhaltscontainers hinzugefügt wurde.
Wir behalten den Stil dort bei, aber ich habe das Ausrichten von Elementen in
der Mitte entfernt, da jetzt nichts mehr zu zentrieren ist. Wir
haben die Breite für den Listencontainer und nicht für die Listenelemente festgelegt. Dank ihrer 100% -Zentrierung werden sie automatisch
zentriert, da sie übernommen werden Wenn wir dies
noch einmal versuchen, scheint dies jetzt viel besser zu funktionieren, und die Listenelemente sind tatsächlich so angeordnet, wie sie sein sollten.
Wenn wir also eine andere hier haben, die vielleicht etwas länger dauert, ja, sie sieht gut aus, dann
können wir hier sehen, dass wir das gleiche Verhalten wie zuvor haben, wir bekommen den schönen Stil und wir haben auch
das andere Verhalten umgangen, das FlatList uns gibt. Probieren wir es hier auch mit Android aus und
starten dort ein neues
Spiel. Oh, das wird kein langes
Spiel, lange
genug, also funktioniert auch dort alles so, wie es sollte.
Und so könnten Sie dies mit FlatList tun, da Sie sehen, dass es etwas anders funktioniert. Wir
müssen das unterschiedliche Verhalten dort
umgehen, wenn es darum geht, die Breite der Listenelemente anzupassen, aber letztendlich funktioniert dies jetzt auch und Daher
haben Sie jetzt gelernt, wie Sie Ihre Sachen mit FlatList anlegen, mit Bildlaufansicht, was das Besondere an diesen
Listenansichten oder diesen scrollbaren Ansichten im Allgemeinen ist und wie Sie Ihre Sachen immer noch so gestalten können, wie Sie
es möchten.