CATALOGUE Code & Data Formation ReactJS Apprendre React Native - Les fondamentaux

Affichage d'un Avatar avec React Native

Retour à la formation
Chapitre 4 Leçon 3
Précédent
Suivant

Apprenez à afficher des avatars en utilisant le composant image de React Native et à définir des styles pour une meilleure présentation.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer comment afficher correctement un avatar en utilisant le composant image de React Native. Contrairement à une balise HTML traditionnelle, nous utilisons la propriété source au lieu de src. Ce composant n'a pas de propriété enfant, ce qui signifie qu'il se ferme automatiquement. Afin de garantir que l'image s'affiche correctement sans prendre trop de place, nous appliquerons des styles directement dans le fichier JSX, en définissant des valeurs spécifiques pour la largeur et la hauteur de l'image. Vous apprendrez également à styler vos composants pour éviter que des images de haute résolution n'affectent la mise en page globale de votre application.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de vous apprendre à :

- Utiliser le composant image de React Native

- Définir la propriété source correctement

- Appliquer des styles pour ajuster la taille des images

Prérequis pour cette leçon

Pour cette vidéo, il est recommandé d'avoir des connaissances de base en React Native et une compréhension élémentaire de JSX et JavaScript.

Métiers concernés

Les compétences abordées dans cette leçon sont particulièrement utiles pour les développeurs d'applications mobiles travaillant dans des entreprises de développement logiciel, des start-ups technologiques, ou en indépendant.

Alternatives et ressources

Bien que cette vidéo se concentre sur React Native, des alternatives comme Flutter ou Swift peuvent également être utilisées pour le développement d'applications mobiles avec des composants image similaires.

Questions & Réponses

En React Native, la propriété source est spécifique au composant image car elle est conçue pour fonctionner dans l'environnement natif, tandis que src est utilisé en HTML.
On peut définir la taille d'une image en utilisant la propriété style sur le composant image et en passant un objet avec des valeurs pour la largeur et la hauteur.
Le composant image de React Native utilise la propriété source au lieu de src, n'a pas de contenu enfant, et permet d'appliquer des styles directement via des objets JavaScript.