1 00:00:02,180 --> 00:00:06,770 Jetzt verwende ich hier natürlich eine Bildlaufansicht und Sie haben gelernt, dass eine FlatList besser ist, wenn Sie eine 2 00:00:06,770 --> 00:00:10,160 Liste haben, in der Sie nicht wissen, wie viele Elemente Sie dort haben. 3 00:00:10,190 --> 00:00:16,490 Für unser Spiel ist eine Bildlaufansicht in Ordnung, denn ja, wir wissen nicht, wie viele 4 00:00:16,490 --> 00:00:24,320 Gegenstände es sein werden, und theoretisch werden wir, wenn wir sehr schlecht raten, ungefähr 100 Gegenstände darin haben, aber 5 00:00:24,380 --> 00:00:34,020 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 6 00:00:34,110 --> 00:00:38,480 zu Leistungsproblemen. Die Verwendung einer Bildlaufansicht hier ist absolut in Ordnung, 7 00:00:38,520 --> 00:00:45,210 da es sich um eine Liste mit mehreren Elementen handelt. Das wird unsere Bildschirmgrenzen überschreiten, aber 8 00:00:45,450 --> 00:00:52,140 es wird selten eine Liste mit vielen Gegenständen sein. Aufgrund der Funktionsweise unseres Spiels wird es 9 00:00:52,140 --> 00:00:56,370 niemals eine Liste mit mehr als 100 Gegenständen sein. 10 00:00:56,370 --> 00:01:01,770 Eine Bildlaufansicht wäre hier also in Ordnung, aber falls Sie dennoch eine FlatList verwenden möchten, lassen Sie mich 11 00:01:01,800 --> 00:01:03,050 dies auch zeigen. 12 00:01:03,060 --> 00:01:08,460 Dafür können wir FlatList hier hinzufügen und das bedeutet natürlich, dass wir FlatList aus 13 00:01:08,460 --> 00:01:13,020 React Native importieren müssen. Hier importiere ich FlatList also so und mit 14 00:01:13,020 --> 00:01:19,590 FlatList importiert haben Sie gelernt, dass FlatList eine Datenstütze nimmt, die auf die zeigt Daten, die Sie 15 00:01:19,670 --> 00:01:22,630 eingeben möchten, und in unserem Fall hier, 16 00:01:22,680 --> 00:01:31,710 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 17 00:01:31,860 --> 00:01:37,350 eingeben, ausgeben können Komponenten für jedes Element in den Daten und hier kann ich 18 00:01:37,350 --> 00:01:38,250 auf 19 00:01:38,250 --> 00:01:42,870 Renderlistenelement zeigen, das aufgerufen werden sollte. Im Moment funktioniert 20 00:01:42,870 --> 00:01:48,390 dies aus mehreren Gründen nicht. Zum einen erwartet das Renderlistenelement zwei 21 00:01:48,750 --> 00:01:55,620 Werte, aber das Renderelement hier auf FlatList leitet nur ein Element weiter. Dies sind die Elementdaten, die Informationen 22 00:01:55,620 --> 00:01:59,950 zum Index und zu dem Element enthalten, das gedruckt werden soll. 23 00:01:59,970 --> 00:02:03,510 Die andere Sache, die uns Probleme bereiten wird, ist der Schlüssel. 24 00:02:03,540 --> 00:02:10,710 Möglicherweise erinnern Sie sich, dass FlatList erwartet, Objekte in dem Array zu erhalten, das Sie übergeben, wobei jedes Objekt über eine 25 00:02:10,740 --> 00:02:16,130 Schlüsseleigenschaft verfügt, die es extrahieren und als Schlüssel für ein effizientes erneutes Rendern verwenden kann. 26 00:02:16,140 --> 00:02:21,880 Jetzt haben wir hier kein Array von Objekten, wir haben ein Array von Zahlen und das wird nicht funktionieren. 27 00:02:21,960 --> 00:02:28,680 Jetzt können wir FlatList hier einen Schlüsselextraktor hinzufügen, um dessen Standard zu überschreiben. Der Schlüsselextraktor übernimmt eine Funktion, die unseren 28 00:02:28,770 --> 00:02:35,070 Artikel am Ende abruft, und dann müssen wir FlatList mitteilen, wo sich unser Schlüssel befindet, und standardmäßig sucht er 29 00:02:35,070 --> 00:02:38,170 nach Artikel. Schlüssel oder für Artikel. id, hier 30 00:02:38,280 --> 00:02:41,860 wollen wir ihm sagen, dass der Gegenstand selbst der Schlüssel ist. 31 00:02:42,090 --> 00:02:46,580 Jetzt möchte FlatList jedoch einen Schlüssel, der eine Zeichenfolge und keine Zahl ist, da 32 00:02:46,590 --> 00:02:48,510 sonst eine Warnung angezeigt wird. 33 00:02:48,510 --> 00:02:54,480 Das nächste, was wir tun müssen, ist, dass die bisherigen Vermutungen, die wir verwalten, Zeichenfolgen sein sollten, und das ist 34 00:02:54,480 --> 00:02:58,800 kein Problem, da wir sie sowieso nur zum Drucken auf dem Bildschirm verwenden. Es 35 00:02:58,800 --> 00:03:03,750 ist uns also egal, ob sie technisch sind Als Zahl oder als Zeichenfolge gespeichert. Wenn wir also 36 00:03:03,750 --> 00:03:09,630 eine neue Vermutung hinzufügen, können wir einfach toString aufrufen, eine integrierte Javascript-Methode für die Zahl, um sie in einen Zeichenfolgentyp 37 00:03:09,630 --> 00:03:16,490 zu konvertieren und dasselbe für den Anfangswert von zu tun Kurs. Hier, wo ich meine anfängliche Vermutung hinzufüge, rufe dort 38 00:03:16,500 --> 00:03:19,140 auch String auf, und jetzt haben 39 00:03:19,140 --> 00:03:26,030 wir Zeichenfolgen, die daher als Zahlen verwendet werden können. Wie ich bereits sagte, erwartet das Renderlistenelement die falschen 40 00:03:26,030 --> 00:03:31,940 Argumente. NumOfRound funktioniert nicht so. Der Wert funktioniert auch nicht so. Stattdessen erhalten wir die Elementdaten 41 00:03:31,940 --> 00:03:34,430 und können dennoch ein zusätzliches 42 00:03:34,550 --> 00:03:42,440 Argument erwarten. Dies muss dann jedoch als erstes Argument erwartet werden, da wir jetzt einfach nach unten gehen können, um das Element 43 00:03:42,740 --> 00:03:49,280 hier in der FlatList zu rendern und Argumente zu binden, die übergeben werden sollen, sodass wir neben dem 44 00:03:49,460 --> 00:03:55,330 Standardargument, das übergeben wird, weitere Argumente hinzufügen können. Jetzt erwartet bind dies als erstes Argument, damit wir festlegen, worauf 45 00:03:55,350 --> 00:04:00,210 sich dies in der von uns aufgerufenen Funktion beziehen soll. Es ist uns hier egal, also füge ich es 46 00:04:00,210 --> 00:04:00,920 einfach hinzu. 47 00:04:00,920 --> 00:04:03,720 Sie können es auch auf null setzen spielt keine Rolle. 48 00:04:03,750 --> 00:04:10,350 Das zweite Argument, das wir hier hinzufügen, ist das erste Argument, das von dieser 49 00:04:10,350 --> 00:04:14,830 Funktion empfangen wird, und das sollte unsere runde Zahl sein, 50 00:04:14,860 --> 00:04:21,510 die pastGuesses sein sollte. Länge. Früher habe ich den Index hier abgezogen, aber das funktioniert 51 00:04:21,510 --> 00:04:23,640 nicht mehr, da ich keinen Zugriff mehr auf den 52 00:04:23,640 --> 00:04:27,430 Index habe. Wir werden nicht manuell zugeordnet. Also übergebe ich einfach die 53 00:04:27,700 --> 00:04:34,170 Länge dort und das Gute ist, dass ich den Index innerhalb des Renderelements aus den Artikeldaten herausholen kann. 54 00:04:34,170 --> 00:04:39,780 Dieses Standardargument wird auch von React übergeben und das Standardargument wird automatisch an das letzte 55 00:04:39,840 --> 00:04:40,960 Argument übergeben. 56 00:04:41,010 --> 00:04:43,890 Die ersten Argumente sind also die Argumente, die 57 00:04:43,890 --> 00:04:45,840 Sie in bind eingerichtet 58 00:04:45,830 --> 00:04:52,620 haben. In diesem Fall ist dies nur ein Argument, unsere Anzahl von Runden oder unsere Länge des Arrays. Alle 59 00:04:52,620 --> 00:04:58,500 Standardargumente, die normalerweise übergeben worden wären, werden als zusätzliche Argumente hinzugefügt am Ende Ihrer Argumentliste hier. 60 00:04:58,500 --> 00:05:01,500 Hier ist die Anzahl der Runden 61 00:05:01,500 --> 00:05:07,530 auch kein passender Name mehr, sondern die Listenlänge, die sich nach einem besseren Namen 62 00:05:07,580 --> 00:05:13,970 anhört, weil wir das bekommen, aber hier können wir unsere Anzahl der Runden anhand der 63 00:05:13,970 --> 00:05:20,120 Listenlänge und dann berechnen durch Abzug von itemData. Index, da die Artikeldaten, die Sie automatisch von React Native erhalten, ein Objekt sind, das 64 00:05:20,120 --> 00:05:27,440 auch eine Indexeigenschaft hat, die der Index des Elements ist, das Sie ausgeben, und Sie auch itemData erhalten. Artikel und das ist der Artikel 65 00:05:27,920 --> 00:05:31,740 selbst, was in unserem Fall die Vermutung ist. 66 00:05:32,000 --> 00:05:37,700 Wir müssen hier jetzt auch keinen Schlüssel mehr hinzufügen, da diese Eingabe dank der FlatList 67 00:05:37,700 --> 00:05:41,740 von React Native vorgenommen wird. Das war also viel Arbeit, jetzt 68 00:05:41,750 --> 00:05:43,940 sollten wir wieder eine Liste ausgeben können. 69 00:05:43,940 --> 00:05:46,590 Speichern wir das also und probieren wir es 70 00:05:46,590 --> 00:05:48,860 hier aus und das scheint zu 71 00:05:49,320 --> 00:05:55,440 funktionieren, aber natürlich haben wir jetzt die Positionierung verloren. Zuvor haben wir der Bildlaufansicht den Inhalt des Inhaltscontainers und 72 00:05:55,440 --> 00:05:58,300 die Liste der Stile hinzugefügt. Das Gute ist, 73 00:05:58,320 --> 00:06:04,200 dass Sie dies auch in der FlatList tun können. Während Sie einen Stil wie in der Bildlaufansicht hinzufügen 74 00:06:04,200 --> 00:06:10,320 können, können Sie mit diesem Stil beispielsweise einen Rand um die Liste hinzufügen, aber Sie können den Inhalt innerhalb der 75 00:06:10,320 --> 00:06:12,510 Liste nicht ausrichten. Verwenden Sie 76 00:06:12,510 --> 00:06:16,900 stattdessen den Inhaltscontainer-Stil, der auch von FlatList unterstützt wird. Daher können wir 77 00:06:16,980 --> 00:06:22,200 hier auch auf die Liste der Stile verweisen. Daher sollte dies jetzt genauso funktionieren wie 78 00:06:22,200 --> 00:06:23,750 zuvor in unserer Bildlaufansicht. 79 00:06:23,760 --> 00:06:32,650 Probieren wir es aus und Sie werden sehen, dass wir hier unten beginnen und jetzt Elemente hinzufügen können. 80 00:06:32,650 --> 00:06:35,390 Nun wollen wir sehen, ob das Scrollen auch so 81 00:06:36,050 --> 00:06:39,820 funktioniert, wie es sollte, ja, und wir können das neueste und das älteste Element 82 00:06:39,950 --> 00:06:43,400 sehen und ja, es stimmt etwas nicht mit der Positionierung der Elemente im 83 00:06:43,420 --> 00:06:49,010 Listenelement, und ich werde darauf zurückkommen, aber Im Allgemeinen funktioniert dies. Testen wir es auch auf Android, also fangen 84 00:06:49,010 --> 00:06:50,130 wir an zu 85 00:06:50,150 --> 00:06:54,610 raten und hoffen, dass wir das nicht zu früh lösen, nein, das 86 00:06:54,630 --> 00:06:55,740 funktioniert und 87 00:06:55,740 --> 00:07:02,200 hier können wir auch scrollen, wie Sie sehen können. Das funktioniert also auch mit der FlatList. 88 00:07:02,200 --> 00:07:08,160 Was ist nun mit dieser seltsamen Verteilung von Inhalten hier in unseren Listenelementen? 89 00:07:08,170 --> 00:07:15,070 Nun, Sie werden feststellen, dass die Listenelemente selbst größer sind als zuvor. 90 00:07:15,160 --> 00:07:21,010 Der Inhalt wird so verteilt, als würde das Listenelement hier enden, und das ist in der Tat das Problem. 91 00:07:21,010 --> 00:07:27,910 Wir haben eine Breite von 60% des Listenelements und unser Inhalt respektiert dies, aber unsere Grenzen tun 92 00:07:27,910 --> 00:07:29,510 dies seltsamerweise nicht. 93 00:07:29,590 --> 00:07:34,870 Um dieses seltsame FlatList-Verhalten zu beheben, können Sie zu Ihrem Listencontainer gehen, der 94 00:07:34,870 --> 00:07:41,110 die Gesamtliste enthält, und dort die Breite auf die gewünschte Listenbreite am Ende einstellen, z. B. 95 00:07:41,860 --> 00:07:45,810 60%, und Ihren Listenelementen eine Breite geben von 100%. 96 00:07:45,820 --> 00:07:52,300 Jetzt ist der Listencontainer insgesamt kleiner, weniger breit und daher nehmen die Listenelemente diese Breite an und haben dieselbe 97 00:07:52,300 --> 00:07:53,850 Breite. Da Sie selten 98 00:07:53,950 --> 00:07:58,840 den Fall verwenden müssen, in dem Ihr Listencontainer breiter sein muss als die 99 00:07:59,230 --> 00:08:04,150 Listenelemente, weil was sonst wäre dort im Listencontainer sollte das eine gute Lösung sein. 100 00:08:04,180 --> 00:08:11,300 Wenn Sie das jetzt tun, werden Sie feststellen, dass die Breite besser aussieht, aber tatsächlich ist die Positionierung jetzt ein Problem. 101 00:08:11,320 --> 00:08:17,080 Nun, da wir jetzt die Breite für den externen Listencontainer gesteuert haben, können wir das 102 00:08:17,080 --> 00:08:20,740 Ausrichten von Elementen hier in der Liste selbst entfernen. 103 00:08:20,740 --> 00:08:25,760 Vergessen Sie also nicht, dass der Stil dem Stil des Inhaltscontainers hinzugefügt wurde. 104 00:08:25,810 --> 00:08:30,810 Wir behalten den Stil dort bei, aber ich habe das Ausrichten von Elementen in 105 00:08:31,060 --> 00:08:35,050 der Mitte entfernt, da jetzt nichts mehr zu zentrieren ist. Wir 106 00:08:35,050 --> 00:08:41,890 haben die Breite für den Listencontainer und nicht für die Listenelemente festgelegt. Dank ihrer 100% -Zentrierung werden sie automatisch 107 00:08:41,890 --> 00:08:45,070 zentriert, da sie übernommen werden Wenn wir dies 108 00:08:45,070 --> 00:08:52,420 noch einmal versuchen, scheint dies jetzt viel besser zu funktionieren, und die Listenelemente sind tatsächlich so angeordnet, wie sie sein sollten. 109 00:08:52,420 --> 00:08:57,940 Wenn wir also eine andere hier haben, die vielleicht etwas länger dauert, ja, sie sieht gut aus, dann 110 00:08:57,940 --> 00:09:04,230 können wir hier sehen, dass wir das gleiche Verhalten wie zuvor haben, wir bekommen den schönen Stil und wir haben auch 111 00:09:04,240 --> 00:09:09,760 das andere Verhalten umgangen, das FlatList uns gibt. Probieren wir es hier auch mit Android aus und 112 00:09:09,760 --> 00:09:10,930 starten dort ein neues 113 00:09:12,670 --> 00:09:14,290 Spiel. Oh, das wird kein langes 114 00:09:16,120 --> 00:09:17,020 Spiel, lange 115 00:09:17,020 --> 00:09:19,800 genug, also funktioniert auch dort alles so, wie es sollte. 116 00:09:19,960 --> 00:09:25,780 Und so könnten Sie dies mit FlatList tun, da Sie sehen, dass es etwas anders funktioniert. Wir 117 00:09:25,780 --> 00:09:27,600 müssen das unterschiedliche Verhalten dort 118 00:09:27,610 --> 00:09:33,550 umgehen, wenn es darum geht, die Breite der Listenelemente anzupassen, aber letztendlich funktioniert dies jetzt auch und Daher 119 00:09:34,090 --> 00:09:40,330 haben Sie jetzt gelernt, wie Sie Ihre Sachen mit FlatList anlegen, mit Bildlaufansicht, was das Besondere an diesen 120 00:09:40,330 --> 00:09:46,990 Listenansichten oder diesen scrollbaren Ansichten im Allgemeinen ist und wie Sie Ihre Sachen immer noch so gestalten können, wie Sie 121 00:09:46,990 --> 00:09:47,970 es möchten.