Stylisation des Composants dans React Native

Styliser un composant
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre React Native - Les fondamentaux
Revoir le teaser Je m'abonne
1,0
Transcription

49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
1,0
49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :

  • Apprendre à gérer des variables de couleur de manière efficace.
  • Utiliser les propriétés flexbox pour structurer les composants.
  • Créer des composants réutilisables avec un style cohérent.
  • Optimiser l'affichage des éléments avec des marges et du padding.

Découvrez comment appliquer des styles à des composants dans React Native en utilisant des variables de couleur et des propriétés flexbox.

Dans cette leçon, nous allons apprendre à styliser un composant Tweet dans une application React Native. Nous commencerons par supprimer le fond jaune par défaut et découvrirons comment charger des couleurs depuis un fichier de style.

Nous définirons des couleurs réutilisables basées sur la palette Twitter, ce qui nous permettra d'appliquer des styles cohérents à travers l'application. Ensuite, nous verrons comment utiliser les flexbox pour organiser le contenu du composant Tweet, en disposant l'avatar à gauche et le contenu à droite.

Nous aborderons également comment appliquer des bordures temporaires pour mieux visualiser les éléments, ajouter des marges pour espacer les informations, et ajuster la largeur des éléments pour éviter les dépassements.

Finalement, nous créerons un composant Tweet réutilisable avec un style harmonieux, en ajoutant des éléments spécifiques comme un fond blanc, des bordures grises ou bleues, et du padding pour améliorer l'affichage général.

Voir plus
Questions réponses
Pourquoi utiliser des variables de couleur dans React Native ?
Utiliser des variables de couleur permet de centraliser et de réutiliser des couleurs définies, facilitant ainsi la maintenance et la cohérence des styles à travers l'application.
Comment appliquer une flex-direction en React Native ?
Pour appliquer une flex-direction en React Native, vous devez utiliser la propriété 'flexDirection' dans un objet de style et assigner la valeur 'row' ou 'column' selon la disposition souhaitée.
Quelle est l'importance d'ajuster les marges et le padding des éléments ?
Ajuster les marges et le padding des éléments est crucial pour améliorer l'esthétique et la lisibilité de l'interface utilisateur, en évitant les chevauchements et en créant de l'espace entre les éléments.
Alors là maintenant on va essayer de styliser un peu notre composante tweet, et déjà pour commencer on va retirer le fond jaune. L'application Twitter n'est pas du tout jaune, on verra tout à l'heure comment on peut... On va même, non, on va même voir tout de suite comment on va pouvoir charger depuis le dossier style, on va pouvoir charger des codes couleurs. Donc ici à l'intérieur on va créer un fichier variable.js Et à l'intérieur on va créer nos couleurs qu'on va pouvoir importer de partout sans forcément s'embêter à chaque fois à retenir le code hexadécimal. Alors après c'est à vous de définir les couleurs. Alors je vais avoir par exemple ma couleur primaire. Alors c'est les codes couleurs de Twitter que j'ai trouvé sur internet, si vous tapez palette Twitter ou n'importe quel autre nom d'entreprise, vous allez trouver facilement les couleurs qui sont utilisées sur le site. Donc moi ce qui m'intéresse ça va être les couleurs de Twitter, donc ça ça va être la couleur primaire de Twitter, cette espèce de bleu, de bleu un peu flash. Ensuite chez Twitter ils ont une couleur un peu bleu ciel, je vais l'appeler light blue. Ils ont du blanc, alors vous n'êtes pas obligé de l'indiquer dans vos couleurs. Parce que le code couleur du blanc il est plutôt simple. Mais si jamais vous avez envie d'avoir une couleur un peu crème ou ce genre de choses, à la place d'un blanc pur, vous allez pouvoir le modifier directement ici plutôt que de changer tout le code hexadécimal de votre blanc. Ensuite vous avez un bleu très foncé. Et pour finir encore un autre bleu. Qu'on va appeler blue cette fois-ci tout simplement. Voilà donc là j'ai défini une espèce de constante, mais dans mon dossier style, et ça va être ça va être un objet avec mes variables de couleurs que je vais pouvoir répercuter sur mes composants. Donc on va commencer par le composant app, le composant principal, pour voir tout de suite si ça marche. Donc je vais importer mes couleurs depuis le dossier style, et bien sûr le fichier variable. Et ici on va utiliser la propriété background color, mais cette fois-ci on va utiliser la variable background et light blue. Voilà donc j'ai un fond de couleurs bleues très claires qui vient du code de la palette de Twitter. C'est probablement pas le fond qu'on gardera pour l'application finale, mais bon pour l'instant ça nous permet de vérifier que nos couleurs marchent. On va tout de suite voir comment on va styliser notre composant tweet. Donc là on va styliser notre composant tweet. Je vous rappelle pour l'instant ça ressemble à ça. On va enlever notre style ici, image, et on va récupérer le style avatar. Du coup ça on va pouvoir le répercuter dans la clé avatar. Donc pour l'instant, souvenez-vous, on importe stylesheet depuis React Native. On va en profiter pour importer nos couleurs. Et on va créer une constante style qui va être un objet stylesheet.create. Voilà, dans lequel on va passer un objet avec toutes les clés de notre composant. On n'oublie pas d'exporter pour ne pas avoir d'erreurs. Alors ici mon composant principal ça va être tweet. Et souvenez-vous, tweet j'ai envie qu'il ait une partie gauche et une partie droite. Donc tweet il va falloir lui donner, un petit peu comme avec les flexbox en CSS, il va falloir lui donner une direction, on l'appelle la flexdirection. Et du coup ça s'écrit comme ça, sans surprise, flexdirection. Et ça prend une chaîne de caractères, soit colonne. Donc l'un au dessus de l'autre, soit row comme une ligne. Donc l'un à côté de l'autre. Donc là c'est vraiment ce qu'on veut, on veut que l'avatar soit à côté du contenu. Donc on va utiliser row. Donc si j'actualise, on voit bien que l'avatar, qui est à l'intérieur de la vue left, et bien sur la gauche, et ensuite le right, et bien sur la droite. Et les deux vues, exactement comme en HTML, sont sur une seule et même ligne. Donc pour avoir un petit peu plus de visuel sur ce que c'est, sur comment ça fonctionne, on va pouvoir définir, par exemple, une couleur de bordure sur la vue left et sur la vue right, pour vraiment voir comment elles sont disposées. C'est quelque chose de temporaire, qu'on va pas forcément garder. Donc pour ajouter une bordure, il faut lui définir une taille de bordure, par exemple 2, et ensuite une couleur de bordure. Comme ceci. Alors, on va mettre l'avatar en rouge. Et pour la partie droite, on va se mettre en vert. Voilà, donc là on voit bien que la vue de gauche est en ligne avec la vue de droite, et que l'avatar s'adapte en hauteur à la taille du contenu. Ce qui va être intéressant également, c'est ce qu'on avait vu tout à l'heure, on a envie que sur la vue de droite, ici, on ait une partie en haut qui aligne la date et le username. Donc ça va être exactement la même chose que flex-direction. Donc flex-direction sur top, on va avoir envie que ça soit en haut. Donc ici, j'utilise la clé top. Donc ici, j'utilise la clé top. Voilà, donc là on a la date, et ensuite le username qui s'affiche. Ce qui m'embête un petit peu ici, c'est que la date et le username sont collés, et moi j'aimerais bien qu'il y ait un petit peu d'espace. Donc on va pouvoir dire que, par exemple, sur la date ou sur le username, on va pouvoir lui mettre une margine, pour qu'il y ait une petite marge de temps de pixels, soit à droite, soit à gauche. Donc on va faire par exemple la date. Et on va lui mettre une margine, cette fois-ci à droite. Et on va mettre par exemple 10. Voilà, donc la date et le username sont légèrement écartés, pour qu'on puisse mieux lire. Alors notre conteneur principal app, souvenez-vous, on lui avait mis la propriété flex-1 qui avait permis, étant donné que la flex-direction par défaut est colonne, qui a permis que de haut en bas, on ait notre conteneur app qui prenne toute la hauteur. Ici, le tweet, il est en flex-direction row, ça veut dire qu'on s'intéresse à ce qui est en ligne. Et si vous regardez bien, le premier tweet, la phrase du tweet est coupée ici, et pour les tweets juste en dessous, on a un problème. On voit bien que le tweet ne prend pas systématiquement toute la largeur. Etant donné que tweet est en flex-direction row, à partir du moment où on va appliquer la propriété flex-1 sur soit right, soit left, ce morceau de la vue va prendre toute la place disponible dans la flex-direction. Ici, on est en ligne, donc si j'applique sur right un flex-1, tout ce qui est entouré de vert va prendre toute la direction, et si ça dépasse un petit peu, ça va empêcher que ça dépasse. Ici, par exemple, sur la partie droite, la partie gauche sera tout le temps fixe parce que c'est une image. Voilà, on voit bien que là maintenant, tout fait exactement la même taille, le premier tweet n'est plus coupé et passé sur deux lignes correctement, et on voit même la bordure verte à la fin de chaque partie right. Donc ce qu'on va vouloir maintenant, c'est récupérer notre style avatar, et ça, on va le déporter dans le fichier style. Notez bien qu'à l'intérieur des fichiers style, ça reste un objet javascript, donc on peut nester les propriétés de l'objet, vous allez pouvoir avoir left qui va avoir une nouvelle propriété, qui va avoir une nouvelle propriété, etc. Mais il n'y a pas, comme en CSS, ce côté d'héritage. Si par exemple avatar est ici ou ici, ça ne changera strictement rien, donc on va tout le temps avoir des clés sur une seule dimension. Donc avatar, je lui fais récupérer les propriétés qu'on avait attribuées en dur dans le composant tweet, donc tout marche bien. Et maintenant, ce qui va m'intéresser éventuellement, c'est d'avoir une couleur de background particulière, et éventuellement un bord, je ne sais pas, gris ou bleu en haut et en bas, pour pouvoir éventuellement envisager de créer une liste avec le composant réutilisable tweet. Donc pour y voir plus clair, on avait rajouté une bordure verte et rouge, on va pouvoir l'enlever, donc ça concernait left et right. Notre tweet, je veux lui mettre un background color blanc, par exemple. Là on va pouvoir aller taper dans les couleurs qu'on a définies tout à l'heure. Ah oui, j'ai mis un point-virgule juste ici. Donc c'est un objet JavaScript, on ne peut pas de point-virgule, des virgules uniquement. Donc là j'ai toujours mon conteneur principal qui est bleu, on verra la couleur plus tard. Ici j'ai ma liste de tweet et le background est blanc. On va éventuellement mettre une taille de bordure. Aussi étonnant que ça puisse paraître, on peut mettre des demi-bordures, ça va donner des bordures très très fines. Je pense qu'étant donné le côté rétina de l'écran, on a la valeur qui est définie comme étant 1 pixel, qui correspond en fait à plusieurs pixels rétina, et c'est pour ça qu'on peut définir une taille de bordure inférieure à 1. Et ensuite on va lui mettre une petite couleur. Et ici par exemple on va mettre un bleu classique. Et ce qu'on va faire c'est qu'on va mettre un petit peu de marge en bas pour séparer, que ça respire un petit peu. Voilà donc j'ai plus besoin de ces propriétés là. Voilà donc un petit peu ce que ça donne, ça veut dire que là à chaque fois que vous allez appeler le composant tweet, vous allez avoir cette forme de tweet qui va s'afficher. Voilà et donc pour terminer, on va faire ressortir le tweet en lui mettant un font-weight bold pour que le tweet soit en gras. Et pour éviter que ça se colle ici, on va mettre un petit peu de padding. Alors on va mettre un petit peu de padding global. Voilà un par exemple pour pas que ça touche les bords. Oui c'est très peu, on va mettre peut-être un petit peu plus, 4. Voilà très bien et sur la partie droite, donc le right, on va mettre également un petit peu de padding, donc plutôt du padding sur la gauche. Voilà donc là on a un composant tweet qui n'est pas trop mal. Éventuellement, ce qu'on peut faire c'est que devant le username, ce que Twitter a l'habitude de faire, c'est de mettre un petit arrobas. Donc username ici, on va pouvoir rajouter un petit arrobas. Et du coup sur la propriété username, on va mettre un color et cette fois-ci on va le mettre en primarie. Voilà donc là j'ai mon petit arrobas qui s'est affiché, j'ai la couleur et j'ai un composant réutilisable. On va voir tout de suite comment on peut éviter d'aller chercher la clé dans un tableau et utiliser une seule fois un composant réutilisable pour afficher plusieurs fois la même donnée.

Programme détaillé de la formation

1 commentaire
1,0
1 vote
5
4
3
2
1
bchirazi
Il y a 3 years
Commentaire
Plus du tout à jour, doit dater de 2017
Dommage parce le contenu semble etre de qualité
Nos dernières formations ReactJS