Wenn es darum geht, eine Liste zu gestalten, können wir natürlich sowohl die Listenelemente als auch die Liste selbst
formatieren.
Beginnen wir also mit den
Elementen und hier schneide ich diese Markierung hier sozusagen sozusagen ab, dass der JSX-Code für ein Element und ich
eine neue Funktion außerhalb der Komponentenfunktion hinzufügen, da wir eigentlich nichts davon benötigen Innerhalb
der Komponente und ich werde nur dieses Renderlistenelement benennen, liegt der Name bei Ihnen.
Es ist eine Funktion und diese Funktion sollte am Ende etwas jsx-Code hier zurückgeben,
also sollte sie diesen jsx-Code hier zurückgeben und um richtig zu funktionieren, muss sie natürlich unseren Wert
erhalten, den wir ausgeben möchten.
Hier verwende ich dann den Wert als Schlüssel und den Ausgabewert hier zwischen den Text-Tags. Jetzt können
wir das Renderlistenelement dort unten verwenden, wo wir
map aufrufen, und hier möchte ich einfach das Renderlistenelement für jedes Element ausführen, das wir verwenden Ich bin Mapping und
ich leite es als Wert in einem Renderlistenelement weiter.
Wenn wir das jetzt tun, sollten wir das gleiche
Ergebnis wie zuvor sehen, also nichts Besonderes hier, aber jetzt haben wir dort unten ein schlankeres
Markup, dort unten einen schlankeren JSX-Code und hier haben wir unseren Listenelement-JSX-Code.
Jetzt können wir dies stylen und natürlich möchte ich meine Ansicht hier stylen. Dazu füge ich hier einen
Stil aus dem Stylesheet hinzu, den ich benennen werde, und dort möchte ich eigentlich
jetzt zwei Textelemente haben und eines sollte Sei die Nummer der Runde und die
zweite sollte der
Wert sein, also brauche ich hier ein zusätzliches Argument, ich brauche den Wert, aber auch die Nummer der Runde oder numOfRound,
wie ich
es hier benenne, und ich möchte dies
hier vielleicht dynamisch ausgeben mit diesem Hash-Symbol davor nur aus stilistischen Gründen.
Jetzt haben wir diese beiden Texte hier und da in dieser
Liste. Ich möchte eigentlich nicht den Text, sondern den Text verwenden, damit ich mein Standardtext-Styling habe.
Importieren wir daher den Textkörper aus dem Textkörper der Komponenten und verwenden Sie den Textkörper anstelle des
normalen Textes hier in unserem Listenelement. Damit verwenden wir die richtige
Schriftart und fügen dieses Listenobjekt nun unserem Stylesheet hinzu, damit wir das Listenelement formatieren können. Eigentlich sollte dies
daher als Listenelement und nicht als Liste bezeichnet werden.
Fügen wir also jetzt ein Listenelement zum Stylesheet
hinzu, und jetzt können wir dies natürlich so gestalten,
wie Sie es möchten. Ich werde es hier auf relativ einfache Weise formatieren. Geben Sie ihm einfach eine Rahmenfarbe von
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
vertikalen Achse von 10, so dass wir
einen gewissen Abstand zwischen den Listenelementen haben und sie nicht direkt nebeneinander sitzen. Eine Hintergrundfarbe von Weiß vielleicht und
natürlich können
Sie hier verschiedene Farben verwenden, wenn Sie möchten.
Nun, das ist ein Anfang.
Wenn wir jetzt eine Rahmenfarbe festlegen, müssen wir hier auch die Rahmenbreite
festlegen.
Andernfalls wird kein Rahmen angezeigt, und ich werde diesen auf einen festlegen. Sehr wichtig, ich möchte diese haben
In meiner Ansicht befinden sich zwei Textkomponenten nebeneinander und nicht übereinander. Dies wäre die Standardeinstellung,
da eine Ansicht die Flexbox verwendet und eine Standard-Flexrichtung der Spalte verwendet, damit das Element
auf einer horizontalen Achse nebeneinander sitzt Flex Direction Row hier einfach so.
Und wenn wir dies speichern und die App neu erstellt, probieren wir es aus und sehen, wie das
aussieht. Ja, das sieht in Ordnung aus, aber es gibt noch Raum für Verbesserungen.
Zum Beispiel möchte ich eine Breite für dieses Listenelement festlegen, um sicherzustellen, dass es nicht nur so breit ist, wie
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.
Wenn
wir dies jedoch tun und dies auf beispielsweise 80% festlegen, werden Sie tatsächlich feststellen, dass sich dies nicht so verhält,
wie Sie es sich richtig verhalten
möchten nicht richtig aussehen,
jetzt ist der Inhalt irgendwie verschoben, aber der Artikel selbst ist sicherlich nicht breiter. Um eine Liste richtig zu formatieren, ist es am besten,
sie einfach in eine Ansicht zu verpacken und diese Ansicht dann zu formatieren.
Hier können wir also
eine Ansicht hinzufügen, ihr einen Stil wie
beispielsweise eine Liste geben. Hier beziehe ich mich also auf die Stile-Liste und füge dieses Listenobjekt jetzt wie folgt zu unserem
Stylesheet hinzu. In dieser Liste können wir jetzt eine Breite festlegen von 80% und entfernen Sie die Breite hier auf dem Listenelement.
Wenn wir dies mit dieser Umhüllungsansicht tun, sehen Sie jetzt, dass die Listenelemente das richtige Aussehen haben, und das ist
nur etwas, das Sie beachten sollten.
Wenn Sie die Höhe oder Breite Ihrer Liste und Ihrer Bildlaufansicht steuern möchten, fügen Sie den Stil nicht zu
den Listenelementen hinzu,
sondern fügen Sie ihn auch nicht unbedingt direkt zur Bildlaufansicht hinzu, da dies intern funktioniert Wickeln
Sie stattdessen einfach eine Ansicht um die Bildlaufansicht, in der Sie die gewünschte Breite und Höhe festlegen.
Was Sie jetzt bemerken werden, ist, dass es auf dem Listenelement schön wäre, wenn wir die
runde Nummer dort ausgeben würden und dann einen gewissen Abstand zwischen der runden Nummer und unserer tatsächlichen
Vermutung hätten und um dies zu erreichen, müssen
wir eine festlegen Als Stil hier auf dem Listenelement können wir justifyContent festlegen, der steuert, wie der Inhalt dieser Ansicht entlang der
Hauptachse angeordnet wird, die die Richtung als horizontale Achse widerspiegelt. Dort werde ich den Platz verwenden, um den
verfügbaren freien Platz um unseren zu verteilen Textelemente hier und jetzt, um auch die Nummer der Runde auszugeben, die
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
Funktion, das die Karte automatisch aufruft und das ist der Index des Elements, das wir ausgeben, also
könnten wir
diesen Index hier weiterleiten, um das Listenelement oder den Index plus 1 zu rendern, da er bei 0 beginnt und
wir wahrscheinlich einen für die erste Runde anstelle von 0 drucken möchten.
Wenn wir das hinzufügen, sieht das jetzt ein bisschen besser aus, und vielleicht wechseln wir diesen Look hier tatsächlich von Raum zu
Raum dazwischen. Ich denke, das sieht besser aus, aber bevor ich das speichere und aktualisiere, wirst
du es tun Beachten Sie auch, dass Sie ein Problem damit haben, dass die runde Nummer nicht korrekt
ist.
Die erste Runde ist die unterste Runde, da wir am Anfang der Liste neue Runden hinzufügen.
Daher ist der Index nicht das richtige Maß für die Routennummer, da der Index immer 0 ist, oder wenn wir
1 hinzufügen, ist es 1 für die erste Liste Element,
aber das erste Listenelement ist eigentlich nicht unsere erste
Runde. Da wir stattdessen neue Runden als erstes Listenelement hinzufügen, ist das erste Listenelement unsere letzte Runde und
sicherlich nicht die erste.
Um dies zu beheben, können wir hier Renderlistenelemente verwenden. Anstatt den Index zu verwenden, können wir hier natürlich unsere Liste mit
früheren Vermutungen verwenden und die Länge dieser Liste ermitteln und dann den Index davon abziehen, und das gibt uns tatsächlich
die richtige runde Nummer für ein bestimmtes Listenelement.
Wenn wir das jetzt tun und dies neu starten, sehen wir, dass Runde Nummer eins die Vermutung sieben ist und dass dies die
Nummer eins bleibt, wenn wir eine
weitere Vermutung hinzufügen, und jetzt scheint dies hier richtig zu funktionieren.
Sie werden auch sehen, dass wir, sobald wir hier unsere Grenzen überschreiten, natürlich durch die Liste scrollen können, und das
scheint auch so zu funktionieren, wie es sollte.
Probieren wir es hier auch mit Android aus, starten wir dort ein neues Spiel und hoffen, dass wir nicht zu
früh gewinnen. Ja, das scheint
zu funktionieren, aber dort kann ich eigentlich nicht scrollen.
Unter Android funktioniert dies also nicht richtig. Diese Liste
kann dort nicht gescrollt werden.
Also, was ist los auf Android?
Stellen Sie sicher, dass die in einer Ansicht
verschachtelte Bildlaufansicht auch unter Android gut gescrollt wird, während die Bildlaufansicht unter iOS einwandfrei funktioniert. Fügen Sie dies
also dem Listenstil hier hinzu,
auf den der Stil angewendet wird die Ansicht, die um die Bildlaufansicht
gewickelt ist.
Wenn wir dies jetzt unter Android erneut versuchen, werden Sie feststellen,
dass dies jetzt scrollbar ist, sobald Sie die Grenzen des Bildschirms überschreiten. Unter iOS sollte es weiterhin wie zuvor
funktionieren, und als iOS können wir dies Selbst
wenn Sie scrollen, ohne dass die Grenzen überschritten werden, ist dies
nur das Standardverhalten von iOS, mit dem Sie solche Listen ein wenig ausgleichen können.
Jetzt haben wir diese scrollbare Liste hier mit Bildlaufansicht und Karte und sie funktioniert sowohl auf Android als auch auf
iOS.