Alors stylons ces composants là-bas et pour cela, nous voulons appliquer un certain style aux composants de texte.
Le composant texte prend en charge la propriété style comme vous pouvez
le vérifier dans les documents officiels, mais le composant texte prend en charge moins de fonctionnalités de style que la vue et donc, je
vais envelopper
cela dans un autre composant vue et c'est juste le composant vue que nous importez de React
Native, c'est aussi la partie que je voulais dire avec vous n'a que quelques composants de base, mais ils
vous mèneront très loin car vous travaillez avec des vues, des boutons et des textes tout le temps.
Alors ici, je vais envelopper ce texte avec le composant de vue d'ouverture et de fermeture ici et maintenant ici, nous avons
plus d'options de style.
Encore une fois, je n'irai pas ici pour les styles en ligne,
mais ajouter des styles à la feuille
de style, par exemple, nous pourrions nommer cet élément de liste, mais le nom dépend de vous et disons ici que nous voulons avoir un
remplissage de 10, peut-être donner lui une couleur d'arrière-plan de ce code hexadécimal gris ici, lui donner une couleur de bordure de noir et aussi une largeur de bordure d'un et maintenant assignons l'élément de liste
comme style à cette vue en se référant aux styles. listItem ici et avec cela si nous
l'enregistrons, notre élément de liste devrait maintenant être un peu mieux, apprenez React Native, voici
à quoi il ressemble. Maintenant, un certain espacement serait probablement également agréable, nous
pouvons y arriver avec une marge, le rembourrage est un espacement entre la bordure et le contenu, la marge est un espacement entre la bordure et
le contenu environnant, donc les autres éléments
autour de lui et là, nous pourrions ajouter une marge 10 pour ajouter une marge dans toutes les directions, nous pourrions
aussi simplement ajouter une marge en haut ou juste en bas ou et c'est quelque
chose qui n'existe pas en CSS, vous pouvez ajouter une marge verticale de 10 pour avoir une marge en haut et en bas
mais pas à gauche et à droite et c'est
d'ailleurs un exemple de la façon dont cela est basé sur CSS mais ce n'est pas la même chose car la marge verticale ne serait
pas une propriété que vous avez en CSS, vous l'avez dans React Native. Donc, si nous enregistrons maintenant cela et
que nous ajoutons apprendre React Native ici, vous voyez maintenant qu'il y a
un certain espacement entre ces éléments et bien sûr également sur iOS si nous le faisons là-bas.
Donc, cela ajoute maintenant nos articles et bien que nous ne remportions probablement toujours pas de prix de beauté, c'est un bon début au moins et nous
approfondirons le style et tout ce que vous pourrez y faire plus tard dans ce cours,
nous devons simplement obtenir là, étape par étape, bien sûr.
Maintenant, une chose que nous devons régler maintenant en passant, la clé ici doit toujours être sur l'élément racine de votre liste, donc l'élément que vous
répétez et
nous ne répétons plus seulement le texte, au lieu de cela, nous sommes maintenant répétition de
la vue entière, donc la
clé doit être ajoutée à la vue ici, pas au texte dans la vue. C'est pourquoi j'ai reçu cet avertissement, cette erreur à nouveau, maintenant
avec la clé
déplacée vers la vue au lieu du texte, cela devrait disparaître.