1 00:00:02,320 --> 00:00:08,260 Wenn es darum geht, eine Liste zu gestalten, können wir natürlich sowohl die Listenelemente als auch die Liste selbst 2 00:00:08,260 --> 00:00:08,810 formatieren. 3 00:00:08,840 --> 00:00:10,830 Beginnen wir also mit den 4 00:00:10,840 --> 00:00:17,440 Elementen und hier schneide ich diese Markierung hier sozusagen sozusagen ab, dass der JSX-Code für ein Element und ich 5 00:00:17,440 --> 00:00:22,420 eine neue Funktion außerhalb der Komponentenfunktion hinzufügen, da wir eigentlich nichts davon benötigen Innerhalb 6 00:00:22,420 --> 00:00:27,380 der Komponente und ich werde nur dieses Renderlistenelement benennen, liegt der Name bei Ihnen. 7 00:00:27,490 --> 00:00:33,850 Es ist eine Funktion und diese Funktion sollte am Ende etwas jsx-Code hier zurückgeben, 8 00:00:33,850 --> 00:00:41,320 also sollte sie diesen jsx-Code hier zurückgeben und um richtig zu funktionieren, muss sie natürlich unseren Wert 9 00:00:41,690 --> 00:00:44,320 erhalten, den wir ausgeben möchten. 10 00:00:44,320 --> 00:00:50,950 Hier verwende ich dann den Wert als Schlüssel und den Ausgabewert hier zwischen den Text-Tags. Jetzt können 11 00:00:50,950 --> 00:00:54,240 wir das Renderlistenelement dort unten verwenden, wo wir 12 00:00:54,250 --> 00:01:01,850 map aufrufen, und hier möchte ich einfach das Renderlistenelement für jedes Element ausführen, das wir verwenden Ich bin Mapping und 13 00:01:01,880 --> 00:01:05,410 ich leite es als Wert in einem Renderlistenelement weiter. 14 00:01:05,440 --> 00:01:08,620 Wenn wir das jetzt tun, sollten wir das gleiche 15 00:01:08,630 --> 00:01:13,720 Ergebnis wie zuvor sehen, also nichts Besonderes hier, aber jetzt haben wir dort unten ein schlankeres 16 00:01:13,730 --> 00:01:17,690 Markup, dort unten einen schlankeren JSX-Code und hier haben wir unseren Listenelement-JSX-Code. 17 00:01:17,870 --> 00:01:23,930 Jetzt können wir dies stylen und natürlich möchte ich meine Ansicht hier stylen. Dazu füge ich hier einen 18 00:01:23,930 --> 00:01:28,640 Stil aus dem Stylesheet hinzu, den ich benennen werde, und dort möchte ich eigentlich 19 00:01:28,650 --> 00:01:33,600 jetzt zwei Textelemente haben und eines sollte Sei die Nummer der Runde und die 20 00:01:33,600 --> 00:01:34,710 zweite sollte der 21 00:01:34,710 --> 00:01:41,940 Wert sein, also brauche ich hier ein zusätzliches Argument, ich brauche den Wert, aber auch die Nummer der Runde oder numOfRound, 22 00:01:41,940 --> 00:01:42,980 wie ich 23 00:01:43,080 --> 00:01:45,640 es hier benenne, und ich möchte dies 24 00:01:45,720 --> 00:01:49,800 hier vielleicht dynamisch ausgeben mit diesem Hash-Symbol davor nur aus stilistischen Gründen. 25 00:01:50,250 --> 00:01:54,030 Jetzt haben wir diese beiden Texte hier und da in dieser 26 00:01:54,030 --> 00:01:59,350 Liste. Ich möchte eigentlich nicht den Text, sondern den Text verwenden, damit ich mein Standardtext-Styling habe. 27 00:01:59,370 --> 00:02:06,030 Importieren wir daher den Textkörper aus dem Textkörper der Komponenten und verwenden Sie den Textkörper anstelle des 28 00:02:06,030 --> 00:02:10,860 normalen Textes hier in unserem Listenelement. Damit verwenden wir die richtige 29 00:02:10,860 --> 00:02:17,730 Schriftart und fügen dieses Listenobjekt nun unserem Stylesheet hinzu, damit wir das Listenelement formatieren können. Eigentlich sollte dies 30 00:02:17,730 --> 00:02:21,040 daher als Listenelement und nicht als Liste bezeichnet werden. 31 00:02:21,040 --> 00:02:25,030 Fügen wir also jetzt ein Listenelement zum Stylesheet 32 00:02:25,390 --> 00:02:29,490 hinzu, und jetzt können wir dies natürlich so gestalten, 33 00:02:29,860 --> 00:02:38,800 wie Sie es möchten. Ich werde es hier auf relativ einfache Weise formatieren. Geben Sie ihm einfach eine Rahmenfarbe von 34 00:02:38,800 --> 00:02:47,080 beispielsweise Schwarz oder vielleicht dies hier leicht graue Farbe. Ein Auffüllen in alle Richtungen von beispielsweise 15, um einen gewissen Abstand zu haben, ein Rand auf der 35 00:02:47,500 --> 00:02:49,360 vertikalen Achse von 10, so dass wir 36 00:02:49,360 --> 00:02:55,480 einen gewissen Abstand zwischen den Listenelementen haben und sie nicht direkt nebeneinander sitzen. Eine Hintergrundfarbe von Weiß vielleicht und 37 00:02:55,480 --> 00:02:57,280 natürlich können 38 00:02:57,280 --> 00:03:01,210 Sie hier verschiedene Farben verwenden, wenn Sie möchten. 39 00:03:01,290 --> 00:03:03,060 Nun, das ist ein Anfang. 40 00:03:03,060 --> 00:03:07,650 Wenn wir jetzt eine Rahmenfarbe festlegen, müssen wir hier auch die Rahmenbreite 41 00:03:07,650 --> 00:03:08,370 festlegen. 42 00:03:08,370 --> 00:03:14,850 Andernfalls wird kein Rahmen angezeigt, und ich werde diesen auf einen festlegen. Sehr wichtig, ich möchte diese haben 43 00:03:14,850 --> 00:03:20,220 In meiner Ansicht befinden sich zwei Textkomponenten nebeneinander und nicht übereinander. Dies wäre die Standardeinstellung, 44 00:03:20,430 --> 00:03:25,830 da eine Ansicht die Flexbox verwendet und eine Standard-Flexrichtung der Spalte verwendet, damit das Element 45 00:03:25,830 --> 00:03:30,540 auf einer horizontalen Achse nebeneinander sitzt Flex Direction Row hier einfach so. 46 00:03:30,540 --> 00:03:35,990 Und wenn wir dies speichern und die App neu erstellt, probieren wir es aus und sehen, wie das 47 00:03:36,030 --> 00:03:40,320 aussieht. Ja, das sieht in Ordnung aus, aber es gibt noch Raum für Verbesserungen. 48 00:03:40,320 --> 00:03:46,320 Zum Beispiel möchte ich eine Breite für dieses Listenelement festlegen, um sicherzustellen, dass es nicht nur so breit ist, wie 49 00:03:46,350 --> 00:03:54,360 es der Inhalt benötigt, sondern auch so breit, wie wir es sagen. Um nun eine Breite hinzuzufügen, können Sie hier die Breite zum Listenelement hinzufügen. 50 00:03:54,420 --> 00:03:54,940 Wenn 51 00:03:55,020 --> 00:04:01,200 wir dies jedoch tun und dies auf beispielsweise 80% festlegen, werden Sie tatsächlich feststellen, dass sich dies nicht so verhält, 52 00:04:01,200 --> 00:04:03,110 wie Sie es sich richtig verhalten 53 00:04:03,110 --> 00:04:04,570 möchten nicht richtig aussehen, 54 00:04:04,680 --> 00:04:13,260 jetzt ist der Inhalt irgendwie verschoben, aber der Artikel selbst ist sicherlich nicht breiter. Um eine Liste richtig zu formatieren, ist es am besten, 55 00:04:13,260 --> 00:04:18,510 sie einfach in eine Ansicht zu verpacken und diese Ansicht dann zu formatieren. 56 00:04:18,510 --> 00:04:20,000 Hier können wir also 57 00:04:20,010 --> 00:04:22,290 eine Ansicht hinzufügen, ihr einen Stil wie 58 00:04:22,290 --> 00:04:29,130 beispielsweise eine Liste geben. Hier beziehe ich mich also auf die Stile-Liste und füge dieses Listenobjekt jetzt wie folgt zu unserem 59 00:04:29,130 --> 00:04:36,240 Stylesheet hinzu. In dieser Liste können wir jetzt eine Breite festlegen von 80% und entfernen Sie die Breite hier auf dem Listenelement. 60 00:04:36,240 --> 00:04:41,880 Wenn wir dies mit dieser Umhüllungsansicht tun, sehen Sie jetzt, dass die Listenelemente das richtige Aussehen haben, und das ist 61 00:04:41,880 --> 00:04:43,620 nur etwas, das Sie beachten sollten. 62 00:04:43,740 --> 00:04:50,430 Wenn Sie die Höhe oder Breite Ihrer Liste und Ihrer Bildlaufansicht steuern möchten, fügen Sie den Stil nicht zu 63 00:04:50,430 --> 00:04:51,650 den Listenelementen hinzu, 64 00:04:51,690 --> 00:04:57,450 sondern fügen Sie ihn auch nicht unbedingt direkt zur Bildlaufansicht hinzu, da dies intern funktioniert Wickeln 65 00:04:57,450 --> 00:05:03,250 Sie stattdessen einfach eine Ansicht um die Bildlaufansicht, in der Sie die gewünschte Breite und Höhe festlegen. 66 00:05:03,290 --> 00:05:09,320 Was Sie jetzt bemerken werden, ist, dass es auf dem Listenelement schön wäre, wenn wir die 67 00:05:09,360 --> 00:05:15,630 runde Nummer dort ausgeben würden und dann einen gewissen Abstand zwischen der runden Nummer und unserer tatsächlichen 68 00:05:15,630 --> 00:05:18,590 Vermutung hätten und um dies zu erreichen, müssen 69 00:05:18,720 --> 00:05:26,670 wir eine festlegen Als Stil hier auf dem Listenelement können wir justifyContent festlegen, der steuert, wie der Inhalt dieser Ansicht entlang der 70 00:05:26,670 --> 00:05:33,070 Hauptachse angeordnet wird, die die Richtung als horizontale Achse widerspiegelt. Dort werde ich den Platz verwenden, um den 71 00:05:33,210 --> 00:05:40,260 verfügbaren freien Platz um unseren zu verteilen Textelemente hier und jetzt, um auch die Nummer der Runde auszugeben, die 72 00:05:40,260 --> 00:05:48,360 wir als Argument hier im Renderlistenelement erwarten, können wir zu unserer Kartenfunktion gehen und dort erhalten wir tatsächlich ein zweites Argument in dieser 73 00:05:48,360 --> 00:05:54,510 Funktion, das die Karte automatisch aufruft und das ist der Index des Elements, das wir ausgeben, also 74 00:05:54,510 --> 00:05:55,680 könnten wir 75 00:05:55,680 --> 00:06:03,030 diesen Index hier weiterleiten, um das Listenelement oder den Index plus 1 zu rendern, da er bei 0 beginnt und 76 00:06:03,030 --> 00:06:07,560 wir wahrscheinlich einen für die erste Runde anstelle von 0 drucken möchten. 77 00:06:07,560 --> 00:06:15,300 Wenn wir das hinzufügen, sieht das jetzt ein bisschen besser aus, und vielleicht wechseln wir diesen Look hier tatsächlich von Raum zu 78 00:06:15,300 --> 00:06:20,980 Raum dazwischen. Ich denke, das sieht besser aus, aber bevor ich das speichere und aktualisiere, wirst 79 00:06:20,980 --> 00:06:27,390 du es tun Beachten Sie auch, dass Sie ein Problem damit haben, dass die runde Nummer nicht korrekt 80 00:06:27,390 --> 00:06:27,970 ist. 81 00:06:28,020 --> 00:06:33,030 Die erste Runde ist die unterste Runde, da wir am Anfang der Liste neue Runden hinzufügen. 82 00:06:33,030 --> 00:06:39,390 Daher ist der Index nicht das richtige Maß für die Routennummer, da der Index immer 0 ist, oder wenn wir 83 00:06:39,450 --> 00:06:42,620 1 hinzufügen, ist es 1 für die erste Liste Element, 84 00:06:42,650 --> 00:06:45,700 aber das erste Listenelement ist eigentlich nicht unsere erste 85 00:06:45,780 --> 00:06:51,330 Runde. Da wir stattdessen neue Runden als erstes Listenelement hinzufügen, ist das erste Listenelement unsere letzte Runde und 86 00:06:51,330 --> 00:06:52,940 sicherlich nicht die erste. 87 00:06:52,980 --> 00:07:02,670 Um dies zu beheben, können wir hier Renderlistenelemente verwenden. Anstatt den Index zu verwenden, können wir hier natürlich unsere Liste mit 88 00:07:02,880 --> 00:07:12,300 früheren Vermutungen verwenden und die Länge dieser Liste ermitteln und dann den Index davon abziehen, und das gibt uns tatsächlich 89 00:07:12,370 --> 00:07:16,810 die richtige runde Nummer für ein bestimmtes Listenelement. 90 00:07:17,500 --> 00:07:24,310 Wenn wir das jetzt tun und dies neu starten, sehen wir, dass Runde Nummer eins die Vermutung sieben ist und dass dies die 91 00:07:24,310 --> 00:07:26,230 Nummer eins bleibt, wenn wir eine 92 00:07:26,260 --> 00:07:29,520 weitere Vermutung hinzufügen, und jetzt scheint dies hier richtig zu funktionieren. 93 00:07:29,560 --> 00:07:36,180 Sie werden auch sehen, dass wir, sobald wir hier unsere Grenzen überschreiten, natürlich durch die Liste scrollen können, und das 94 00:07:36,310 --> 00:07:39,430 scheint auch so zu funktionieren, wie es sollte. 95 00:07:39,430 --> 00:07:48,280 Probieren wir es hier auch mit Android aus, starten wir dort ein neues Spiel und hoffen, dass wir nicht zu 96 00:07:48,280 --> 00:07:51,000 früh gewinnen. Ja, das scheint 97 00:07:51,010 --> 00:07:54,640 zu funktionieren, aber dort kann ich eigentlich nicht scrollen. 98 00:07:54,640 --> 00:07:57,820 Unter Android funktioniert dies also nicht richtig. Diese Liste 99 00:07:57,820 --> 00:07:59,850 kann dort nicht gescrollt werden. 100 00:07:59,860 --> 00:08:01,320 Also, was ist los auf Android? 101 00:08:01,510 --> 00:08:04,930 Stellen Sie sicher, dass die in einer Ansicht 102 00:08:04,930 --> 00:08:12,490 verschachtelte Bildlaufansicht auch unter Android gut gescrollt wird, während die Bildlaufansicht unter iOS einwandfrei funktioniert. Fügen Sie dies 103 00:08:12,820 --> 00:08:15,080 also dem Listenstil hier hinzu, 104 00:08:15,100 --> 00:08:20,320 auf den der Stil angewendet wird die Ansicht, die um die Bildlaufansicht 105 00:08:20,320 --> 00:08:21,570 gewickelt ist. 106 00:08:21,820 --> 00:08:25,120 Wenn wir dies jetzt unter Android erneut versuchen, werden Sie feststellen, 107 00:08:28,940 --> 00:08:34,700 dass dies jetzt scrollbar ist, sobald Sie die Grenzen des Bildschirms überschreiten. Unter iOS sollte es weiterhin wie zuvor 108 00:08:34,700 --> 00:08:37,460 funktionieren, und als iOS können wir dies Selbst 109 00:08:37,580 --> 00:08:40,810 wenn Sie scrollen, ohne dass die Grenzen überschritten werden, ist dies 110 00:08:40,820 --> 00:08:45,090 nur das Standardverhalten von iOS, mit dem Sie solche Listen ein wenig ausgleichen können. 111 00:08:45,710 --> 00:08:51,800 Jetzt haben wir diese scrollbare Liste hier mit Bildlaufansicht und Karte und sie funktioniert sowohl auf Android als auch auf 112 00:08:51,800 --> 00:08:52,310 iOS.