Guide Complet pour Styliser vos Composants React Native

Appliquer du style à mes composants
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 de :

  • Comprendre comment importer et utiliser StyleSheet dans React Native.
  • Apprendre à définir et appliquer des styles à des composants React.
  • Maîtriser l'utilisation de flexbox pour le layout des applications mobiles.
  • Apprendre à centrer du texte et d'autres éléments visuels dans une vue.

Dans cette leçon, vous allez apprendre à utiliser StyleSheet de React Native pour donner du style à vos composants, améliorer l'alignement de texte, et utiliser des propriétés comme flex1 et backgroundColor.

Cette leçon traite de l'utilisation de StyleSheet dans React Native pour styliser vos composants de manière efficace. Nous allons explorer comment créer une feuille de style, définir des clés de style, et appliquer ces styles à vos composants. Enfin, nous discuterons de certaines propriétés importantes comme flex1 et backgroundColor, ainsi que des méthodes pour centrer du texte à l'intérieur de vos vues.

Nous commencerons par importer le module StyleSheet de React Native et définirons une constante contenant nos styles. Ensuite, nous appliquerons ces styles aux composants via l'attribut style. Par la suite, nous verrons comment utiliser les propriétés de flexbox telles que justifyContent et alignItems pour aligner notre contenu de manière cohérente et professionnelle.

Enfin, cette leçon met en évidence certaines limitations de React Native en termes de styles comparativement au CSS traditionnel, et fournit des astuces pour contourner ces limitations dans vos projets de développement mobile.

Voir plus
Questions réponses
Qu'est-ce que 'flex1' fait dans un style React Native?
La propriété 'flex1' permet à un composant de prendre toute la largeur disponible dans la vue parent, de manière similaire à la propriété 'flex-grow: 1' en CSS flexbox.
Comment appliquer un style à un composant dans React Native?
Pour appliquer un style à un composant, vous devez utiliser l'attribut 'style' et passer une référence au style que vous avez défini dans votre feuille de style StyleSheet.
Quels sont certains des avantages d'utiliser le module StyleSheet dans React Native?
L'utilisation du module StyleSheet permet une meilleure gestion des styles de composants, une amélioration des performances grâce à la précompilation des styles, et une syntaxe familière pour ceux ayant des connaissances en CSS.
Alors ici je suis dans mon conteneur app, donc c'est un composant React tout simple et on va voir là comment on peut donner du style à notre composant. Je vous le rappelle, donc là maintenant on a une vue toute blanche avec un alignement de texte plutôt mauvais et ça nous convient pas du tout. Donc on va ouvrir notre fichier style et à l'intérieur de ce fichier on va pouvoir importer le fameux stylesheet qui vient de la dépendance React Native et qui nous permet de créer une feuille de style. Donc j'importe stylesheet et ça nous vient de React Native. Ensuite ici je vais définir une constante qui va être un espèce d'objet créé par cette dépendance stylesheet qui va contenir toutes les clés que je vais définir dans mon composant app et ensuite ces clés vont contenir un objet avec les styles que je veux appliquer dès que j'appelle cette clé. Donc la syntaxe c'est ici de dire que je rappelle stylesheet et j'appelle la méthode create et je lui passe un objet. Il va falloir que j'exporte par défaut ce fichier style pour que ici, souvenez vous, il soit importé correctement. Alors ici l'import est faux, il va falloir importer style depuis app.style donc ça correspond à celui là. Et pour appliquer du style à mes composants on va simplement utiliser style au singulier et ensuite définir de cette façon la clé style qui est définie dans ce fichier là et qui correspond au style que j'ai envie d'appliquer ici. Donc là j'appelle style et ensuite je vais lui donner une clé, par exemple app, ça correspond au conteneur de mon composant app et ici à l'intérieur de mon fichier style je vais y rajouter une clé app et comme dans un objet je vais définir son style et par exemple c'est commun d'utiliser la méthode flex1 Si vous avez quelques notions de CSS ça correspond à ce qu'on peut voir en flexbox et ça veut dire que ça va prendre toute la largeur disponible. Donc ici sur mon simulateur ça va prendre toute la largeur de haut en bas, de droite à gauche je veux que ma vue prenne cette largeur là. Si jamais j'ai deux conteneurs qui sont en flex1, ils vont chacun prendre la moitié etc etc c'est à moi de définir un petit peu les proportions et pour que ça soit un petit peu plus parlant je vais mettre une background color et on va mettre je sais pas un espèce de jaune comme ceci. Donc ça ça veut dire que la clé app je veux qu'elle soit en flex1 et qu'elle ait un background color qui correspond à ce code hexadécimal, un petit peu comme en CSS Sauf que les clés des des styles ne comportent pas de tirer ou d'espace ou quoi que ce soit c'est toujours des clés qui sont écrits en camel case comme ça, donc la color a une majuscule. Par contre faites attention vous n'avez pas toutes les clés, tous les styles qui sont disponibles en CSS, ils ne sont pas forcément accessibles en React Native. Vous avez que très peu de choses qui sont acceptables en React Native, on va dire de l'ordre de 15 à 20 % des propriétés mais en général pour simplement du mobile ça va suffire. Donc là je vais sauvegarder mon style et ensuite sauvegarder ici mon app Voilà si jamais comme moi ça ne s'actualise pas vous vous forcez un peu en ressauvegardant une deuxième fois pour que Watchman reconnaisse qu'il y a eu une modification sur le code et donc là j'ai bien mon application qui est en flex 1 et qui est de couleur jaune on voit qu'elle est en flex 1 parce que toute la hauteur et toute la largeur est de couleur jaune. Ce qu'on va vouloir faire aussi par exemple ça va être de mettre un style sur le texte pour éviter qu'il vienne se mettre ici on va vouloir que par exemple il soit centré comme tout à l'heure dans notre application. Alors ensuite pour centrer mon texte juste ici je vais avoir besoin donc de définir un nouveau style qui va être spécifique au texte pour lui dire de s'aligner. Le texte doit être aligné par rapport au reste et ensuite sur ma vue principale sur la clé app je vais devoir lui dire de justifier le contenu et de le centrer Donc pour ce faire donc on va garder la clé app et ici on va ajouter toujours style au singulier une nouvelle clé qu'on va appeler titre. Dans ma feuille de style je vais dire que ma clé app elle doit aligner le le contenu au centre comme ça donc c'est toujours une chaîne de caractère avec l'alignement et la propriété justifi content qui veut dire Justifie moi le contenu de app au milieu, au centre Ensuite je vais avoir besoin de la clé titre et à l'intérieur de la clé titre je vais aligner mon texte pareil au centre et si j'actualise j'ai bien ma nouvelle vue donc tout est jaune, mon conteneur n'a pas changé, on voit bien mon opérateur réseau qui est revenu et ma nouvelle vue c'est indiqué au centre, c'est justifié au centre et le texte est aligné au centre

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