Étapes de Stylisation
Objectifs
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.
Résumé
Découvrez comment appliquer des styles à des composants dans React Native en utilisant des variables de couleur et des propriétés flexbox.
Description
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.
Questions fréquentes
Programme détaillé
Module 1 - Intro React Native
Module 2 - Environnement de travail
Module 3 - Environnement de travail
Module 4 - Mon premier composant réutilisable en React Native
Module 5 - Mon premier composant stateful
Module 6 - Créer un menu de navigation
Module 7 - Aller plus loin
Module 8 - Déployer son application
Dommage parce le contenu semble etre de qualité