Lorsqu'il s'agit de styliser une liste, nous pouvons bien sûr styliser les éléments de la liste et également la liste
elle-même.
Commençons donc par les éléments et ici
je vais en fait couper cette marque ici pour ainsi dire, de sorte que le code jsx pour un élément et j'ajouterai une nouvelle fonction en
dehors de la fonction du composant parce que nous n'avons pas vraiment besoin de quoi que ce soit de à
l'intérieur du composant et je vais juste nommer cet élément de liste de rendu, le nom dépend de vous.
C'est une fonction et cette fonction à la fin devrait retourner du code jsx ici,
donc elle devrait retourner ce code jsx ici et pour fonctionner correctement, elle doit bien sûr obtenir disons
notre valeur que nous voulons sortir.
Donc ici, je vais ensuite utiliser la valeur comme clé et la valeur de sortie ici entre les balises de texte et maintenant
nous pouvons utiliser l'élément de liste de rendu là-bas où
nous appelons la carte et ici, là, je veux simplement exécuter l'élément de liste de rendu pour chaque élément que nous 'mapper et je transmets deviner
à cela comme une valeur dans un élément de liste de rendu.
Maintenant, si nous faisons cela, nous devrions voir le même
résultat qu'avant, donc rien de trop sophistiqué ici, mais maintenant nous avons un balisage plus léger là-bas, un
code jsx plus bas là-bas et notre code d'élément de liste jsx ici.
Maintenant, nous pouvons styliser ceci et bien sûr, je veux styliser ma vue ici, pour cela je vais ajouter un
style ici à partir de la feuille de style que je nommerai et là-dedans, je
veux maintenant avoir deux éléments de texte et un devrait être le numéro du tour et
le second devrait
être la valeur, donc ici j'ai besoin d'un argument supplémentaire, j'ai besoin de la valeur mais aussi du numéro du tour ou numOfRound comme
je le
nomme ici et je veux le sortir dynamiquement
ici, peut-être avec ce symbole de hachage devant juste pour des raisons stylistiques.
Alors maintenant, nous avons ces deux textes dans cette liste ici et là,
je ne veux pas utiliser le texte, mais le corps du texte afin d'avoir mon style de texte par défaut.
Donc pour cela, importons le texte du corps à partir du texte du corps des composants et utilisons le texte du corps au lieu du
texte normal ici dans notre élément de liste. Avec cela, nous utilisons la bonne police
et maintenant ajoutons cet objet de liste à notre feuille de style afin que nous puissions styliser l'élément de liste, en fait
cela devrait être appelé élément de liste et non liste.
Alors ajoutons maintenant un élément de liste à la
feuille de style, comme ça et maintenant bien sûr, nous
pouvons le styler de la manière que vous voulez, je vais le styler d'une manière relativement facile ici, donnez-lui simplement une couleur
de bordure disons noir ou peut-être cela légère couleur grisâtre ici. Un rembourrage dans toutes les directions de disons 15 pour avoir un certain espacement, une marge sur l'axe vertical de 10 afin
que nous ayons un certain espacement entre les éléments
de la liste et qu'ils ne soient pas assis les uns à côté des autres. Une couleur de fond de blanc peut-être
et bien sûr, vous
pouvez utiliser différentes couleurs ici si vous le souhaitez.
Maintenant, c'est un début, maintenant quand
nous définissons une couleur de bordure, nous devons également configurer la largeur de la bordure ici,
sinon nous
ne verrons pas de bordure et je vais la définir sur une seule et très importante, je veux avoir ces deux composants de texte
dans ma vue sont assis côte à côte et non au-dessus l'un de l'autre, ce qui serait la valeur par
défaut, car une vue utilise flexbox et utilise une direction de flexion par défaut de la colonne pour que l'élément
soit assis côte à côte sur un axe horizontal, nous ajoutons flex direction ligne ici comme ça.
Et avec cela, si nous enregistrons cela et que la reconstruction de l'application, essayons et voyons à quoi
cela ressemble, oui cela semble correct, mais il y a encore place à amélioration.
Par exemple, je veux définir une largeur sur cet élément de liste pour m'assurer qu'il n'est pas seulement aussi large
que son contenu en a besoin, mais aussi large que nous le disons. Maintenant, pour ajouter une largeur, vous pouvez ajouter de la largeur ici pour répertorier l'élément,
mais
si nous le faisons et le définissons à 80%, vous verrez en fait que cela ne se comporte pas de la manière que
vous souhaitez qu'il se comporte correctement, donc
cela ne pas l'air bien,
maintenant le contenu est en quelque sorte déplacé mais l'élément lui-même n'est certainement pas plus large. Pour styliser une liste correctement, la meilleure façon
est de simplement l'envelopper dans une vue, puis de styliser cette vue.
Donc ici, nous pouvons
ajouter une vue, lui donner un style de
liste disons, donc ici je fais référence à la liste des styles et ajouter cet objet de liste à notre feuille de style maintenant,
comme ceci et sur cette liste, nous pouvons maintenant définir une largeur de 80% et se débarrasser de la largeur ici sur l'élément de liste.
Si nous faisons cela avec cette vue d'habillage, vous voyez maintenant que les éléments de la liste ont le bon aspect et
c'est juste quelque chose à savoir.
Si vous voulez contrôler la hauteur ou la largeur de votre liste, de votre vue de défilement, alors n'ajoutez pas le style aux éléments
de la liste, ne
l'ajoutez pas nécessairement directement à la vue de défilement en raison de la façon dont cela fonctionne en interne,
mais placez simplement une vue autour de la vue de défilement où vous définissez la largeur et la hauteur souhaitées.
Maintenant, ce que vous remarquerez, c'est que sur l'élément de liste, ce serait bien si nous avions le
numéro rond en sortie là-bas et que nous avions ensuite un certain espacement entre le numéro rond et notre
supposition réelle et pour y parvenir, pour celui
que nous devons définir un style ici sur l'élément de liste, nous pouvons définir justificationContenu qui contrôle la façon dont le contenu de cette vue
est disposé le long de l'axe principal qui reflète la direction comme l'axe horizontal et là, je vais utiliser
l'espace autour pour distribuer l'espace libre disponible autour de notre les éléments de texte ici et maintenant pour afficher également le numéro
du tour que nous attendons comme argument ici dans l'élément de liste de rendu, nous pouvons descendre dans notre fonction de carte et là, nous
obtenons en fait un deuxième argument dans cette fonction que la carte appelle automatiquement et c'est l'index de l'élément
que nous générons,
nous pourrions donc transférer cet index ici pour rendre l'élément de liste ou l'index plus 1 car il commencera à 0 et nous
voulons probablement en imprimer un pour le premier tour au lieu de 0.
Maintenant, avec cela à l'écart, si nous ajoutons ceci, maintenant cela semble un peu mieux et peut-être que nous passons en fait ce regard ici de
l'espace autour à l'espace entre, je pense que cela semble plus joli mais avant de l'enregistrer et de le
mettre à jour, vous notez également que l'un des problèmes que vous rencontrez est que le chiffre rond n'est pas réellement
correct.
Le premier tour est le tour le plus bas car nous ajoutons de nouveaux tours au début de
la liste, donc l'index n'est pas la bonne mesure pour le numéro de l'itinéraire car l'index est toujours 0 ou si nous ajoutons 1,
c'est 1, pour la première liste mais le premier élément de la
liste n'est en fait pas notre premier tour, mais comme nous
ajoutons de nouveaux tours comme premier élément de la liste, le premier élément de la liste est notre dernier tour
et certainement pas le premier.
Donc, pour résoudre ce problème, ce que nous pouvons faire est ici dans les éléments de la liste de rendu, au lieu d'utiliser l'index, nous pouvons
bien sûr utiliser notre liste de suppositions passées ici et obtenir la longueur de cette liste, puis déduire l'index de cela et cela nous donne en
fait le bon numéro rond pour un élément de liste donné.
Alors maintenant, si nous faisons cela et que nous recommençons, maintenant, nous voyons que le premier tour est le septième et qui
reste le premier si nous
ajoutons une autre supposition et maintenant cela semble fonctionner correctement ici.
Vous verrez également que dès que nous dépassons nos limites ici, bien sûr, nous pouvons faire défiler la liste et
cela semble également fonctionner comme il se doit.
Essayons également ceci sur Android ici, commençons un nouveau jeu là-bas et espérons que nous ne gagnerons pas trop
tôt, oui cela semble fonctionner
mais là, je ne peux pas faire défiler.
Donc, sur Android, cela ne fonctionne pas correctement, cette
liste n'est pas disponible ici.
Alors, qu'est-ce qui ne va pas sur Android?
Maintenant, bien qu'il défile bien sur iOS, pour que la
vue de défilement imbriquée dans une vue défile bien également sur Android, assurez-vous que la vue environnante utilise réellement flex one, alors
ajoutez ceci au style de liste
ici qui est le style appliqué à la vue qui est enroulée autour de la
vue de défilement.
Avec cela ajouté, si nous essayons maintenant à nouveau sur Android,
vous remarquerez maintenant que maintenant cela peut défiler dès que vous dépassez les limites de l'écran et sur iOS,
cela devrait toujours fonctionner comme avant et qu'iOS,
nous pouvons même défiler sans dépasser les limites, c'est juste
le comportement iOS par défaut que vous pouvez équilibrer un peu de telles listes.
Alors maintenant, nous avons cette liste déroulante ici avec vue de défilement et carte et cela fonctionne à la fois sur Android et
iOS.