1 00:00:02,310 --> 00:00:08,520 Alors stylons ces composants là-bas et pour cela, nous voulons appliquer un certain style aux composants de texte. 2 00:00:09,120 --> 00:00:12,780 Le composant texte prend en charge la propriété style comme vous pouvez 3 00:00:12,780 --> 00:00:19,680 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 4 00:00:19,710 --> 00:00:20,610 vais envelopper 5 00:00:20,970 --> 00:00:26,030 cela dans un autre composant vue et c'est juste le composant vue que nous importez de React 6 00:00:26,040 --> 00:00:31,560 Native, c'est aussi la partie que je voulais dire avec vous n'a que quelques composants de base, mais ils 7 00:00:31,560 --> 00:00:36,960 vous mèneront très loin car vous travaillez avec des vues, des boutons et des textes tout le temps. 8 00:00:37,530 --> 00:00:44,730 Alors ici, je vais envelopper ce texte avec le composant de vue d'ouverture et de fermeture ici et maintenant ici, nous avons 9 00:00:44,730 --> 00:00:46,090 plus d'options de style. 10 00:00:46,290 --> 00:00:50,730 Encore une fois, je n'irai pas ici pour les styles en ligne, 11 00:00:50,730 --> 00:00:54,000 mais ajouter des styles à la feuille 12 00:00:54,210 --> 00:01:03,810 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 13 00:01:03,810 --> 00:01:17,750 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 14 00:01:17,880 --> 00:01:25,720 comme style à cette vue en se référant aux styles. listItem ici et avec cela si nous 15 00:01:25,770 --> 00:01:34,380 l'enregistrons, notre élément de liste devrait maintenant être un peu mieux, apprenez React Native, voici 16 00:01:34,610 --> 00:01:39,620 à quoi il ressemble. Maintenant, un certain espacement serait probablement également agréable, nous 17 00:01:39,620 --> 00:01:46,850 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 18 00:01:46,850 --> 00:01:49,270 le contenu environnant, donc les autres éléments 19 00:01:49,280 --> 00:01:55,130 autour de lui et là, nous pourrions ajouter une marge 10 pour ajouter une marge dans toutes les directions, nous pourrions 20 00:01:55,460 --> 00:01:59,600 aussi simplement ajouter une marge en haut ou juste en bas ou et c'est quelque 21 00:01:59,720 --> 00:02:06,050 chose qui n'existe pas en CSS, vous pouvez ajouter une marge verticale de 10 pour avoir une marge en haut et en bas 22 00:02:06,050 --> 00:02:08,560 mais pas à gauche et à droite et c'est 23 00:02:08,720 --> 00:02:15,770 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 24 00:02:15,860 --> 00:02:23,210 pas une propriété que vous avez en CSS, vous l'avez dans React Native. Donc, si nous enregistrons maintenant cela et 25 00:02:23,210 --> 00:02:29,840 que nous ajoutons apprendre React Native ici, vous voyez maintenant qu'il y a 26 00:02:30,030 --> 00:02:38,430 un certain espacement entre ces éléments et bien sûr également sur iOS si nous le faisons là-bas. 27 00:02:38,550 --> 00:02:46,440 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 28 00:02:46,440 --> 00:02:51,050 approfondirons le style et tout ce que vous pourrez y faire plus tard dans ce cours, 29 00:02:51,060 --> 00:02:54,090 nous devons simplement obtenir là, étape par étape, bien sûr. 30 00:02:54,090 --> 00:03:00,750 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 31 00:03:00,750 --> 00:03:01,460 répétez et 32 00:03:01,500 --> 00:03:05,730 nous ne répétons plus seulement le texte, au lieu de cela, nous sommes maintenant répétition de 33 00:03:05,730 --> 00:03:07,020 la vue entière, donc la 34 00:03:07,320 --> 00:03:14,430 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 35 00:03:14,430 --> 00:03:15,520 avec la clé 36 00:03:15,600 --> 00:03:19,230 déplacée vers la vue au lieu du texte, cela devrait disparaître.