Découvrez React Native Elements pour des Interfaces Mobiles Simples et Rápides

Travailler avec une librairie externe
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 les avantages de React Native Elements.


- Savoir comment installer et configurer la librairie.


- Apprendre à utiliser divers composants pour améliorer l'interface de votre application.

Apprenez à utiliser React Native Elements pour accélérer la création de vos interfaces mobiles en utilisant des composants réutilisables et stylisés.

Dans cette leçon, nous vous présentons React Native Elements, une librairie populaire dans la communauté React Native qui vous permet de créer des interfaces utilisateur rapidement et efficacement. Vous y apprendrez :


- Comment installer et configurer la librairie dans votre projet.


- Les différents composants disponibles, telles que les boutons, textes et icônes, et comment les utiliser.


- L'utilisation des attributs et des styles pour personnaliser les éléments UI.


Cette librairie est idéale pour les développeurs cherchant à gagner du temps et à améliorer l'esthétique de leurs applications mobiles sans réinventer la roue.

Voir plus
Questions réponses
Qu'est-ce que React Native Elements ?
React Native Elements est une librairie de composants UI pour React Native permettant de créer des interfaces utilisateur rapidement et efficacement.
Quels sont les principaux avantages de React Native Elements ?
Les principaux avantages de React Native Elements incluent la simplicité d'utilisation, une collection de composants stylisés prêts à l'emploi, et la possibilité de personnalisation via des styles et des props.
Comment installer React Native Elements dans un projet ?
Pour installer React Native Elements, vous pouvez utiliser la commande npm i react-native-elements ou yarn add react-native-elements, puis suivre les instructions pour inclure les librairies d'icônes si nécessaire.
Je vais vous parler ici de React Native Element, c'est une librairie qui est assez connue dans dans le monde de React Native, c'est pas la plus connue qui fait ça mais elle a le mérite d'être assez simple à utiliser. Il y a beaucoup de librairies React Native dans la communauté React Native que vous allez pouvoir réutiliser sur vos projets, ça va vous éviter de réinventer la roue à chaque fois et ça va vous permettre d'avoir des éléments qui sont beaux, qui sont déjà stylisés et ça va vous permettre de prototyper rapidement dans le cas où vous voudriez avoir un résultat assez vite. Donc on l'a vu tout à l'heure, la barre de navigation qu'on a créée, elle est approximative, on pourrait vraiment faire mieux. Le bouton qui nous permet d'ajouter un tweet, il est c'est du texte simple, c'est ce que propose la librairie de base React Native. Ici on voit qu'on a des petits boutons sympas, on a des petites icônes, on a des éléments de liste, on a même, je sais pas si vous voyez, mais une espèce de barre de navigation avec des icônes qui a l'air beaucoup plus sympa. Donc on va regarder un petit peu la doc, on voit qu'il y a une vingtaine de composants qu'on va pouvoir réutiliser simplement. On va installer cette librairie sur notre projet et puis on va essayer d'améliorer ça. Alors pour installer cette librairie, on va aller dans l'onglet installation pour voir les instructions d'installation. Et si vous regardez un petit peu les instructions d'installation, vous allez voir que on voit souvent donc npm i qui correspond à npm install, c'est une abréviation. Vous allez avoir des fois yarn add. Yarn c'est un gestionnaire de dépendance qui a été développé par Facebook pour combler certaines petites lacunes de npm. Je vous invite à regarder comment ça marche. Pour le moment, nous on va rester sur npm, ça suffit. Et j'attire votre attention sur une dernière commande. Sur la step 1, on va avoir la commande react native, link et une petite librairie. React native link, il faut savoir quelque chose, c'est que là, comme vous travaillez avec Expo, vous avez une espèce de couche d'abstraction par-dessus un projet react native classique. Mais normalement, on va utiliser une dépendance qui s'appelle react-native-cli CLI. Et cette dépendance va pouvoir nous permettre d'utiliser la ligne de commande react native pour justement ici linker une librairie. On va avoir besoin de temps en temps, quand on va utiliser une librairie externe, de linker une librairie dans notre projet pour que, à la compilation, la librairie soit incluse dans notre projet. Ici, on va utiliser une librairie externe d'icônes. Qui s'appelle Ionicone, et que je vous recommande très fortement. Et du coup, on va pas linker de de librairies supplémentaires pour les icônes. Donc pour l'installation, on va uniquement utiliser cette commande. Une fois l'installation terminée, donc on va regarder, on va revenir dans l'API. Et on va regarder un petit peu les composants qu'on va pouvoir installer. Le premier composant, qu'on voit là, c'est texte, qui ressemble fortement aux composants texte de react native. Et ça, en fait, c'est un composant réutilisable. Qui est une surcouche des composants react native, avec du style et des propriétés en plus. Vous pouvez vous-même créer votre propre librairie. On a vu qu'on avait créé un tweet, et c'est un élément de liste qui peut parfaitement parfaitement arriver dans ce genre de librairie. Alors react native élément, c'est une librairie qui est plutôt sympa à l'œil. Vous verrez qu'à force de manipuler le style, vous allez réussir à créer à peu près le même genre de composants. Mais pour l'instant, évitons de réinventer la roue, on va se servir de cette librairie. Comme ça, vous allez voir un petit peu comment ça marche. Et il n'y a rien de très compliqué. Le premier élément, donc, texte, on va pouvoir on va pouvoir essayer de l'appliquer à notre container app. On va essayer de rajouter un titre. On voit là qu'on peut mettre h1, h2, h3. Ça fait référence un petit peu à ce qu'on voit en html. Alors juste dans mon package.json, donc j'ai le nom de la librairie. C'est à partir de là qu'on va importer on va importer les composants. Et ici, dans mon container app, je vais par exemple importer texte. Attention, il faut bien qu'il n'y ait aucun conflit avec le texte de React Native. Donc moi, je n'utilise pas dans mon JSX le composant texte de React Native. Donc je peux utiliser le composant texte de React Native Element. Donc ça s'importe comme ça. Et ensuite, si vous avez besoin d'autre chose, je sais pas, un autre composant, vous l'importez comme ça. Composant 1, composant 2, etc. Donc là, pour l'instant, j'ai besoin uniquement de texte et on va regarder comment ça marche juste au dessus de ma tweetbox. Donc au dessus, ici, là, j'ai envie d'afficher le nom de l'application. Donc rien de surprenant pour vous ici. Vous avez vu comment ça marchait texte tout à l'heure et fort heureusement, ici, ça marche exactement de la même façon. Donc on va écrire le nom de l'application. Comme le style est centré, normalement, ça devrait me faire quelque chose de potable. Ah, pas du tout. Mais ce qui va nous intéresser ici, c'est d'utiliser les propriétés du composant. Donc on voit ici, alors on a toujours le style qui va permettre de centrer notre composant. Et on a des attributs, comme ça, qui vont donner un style. Donc là, on voit font size 34, font size 40, etc. Et du coup, on va avoir des polices plus ou moins grosses. Alors, du coup, ici, je vais rajouter le fameux style pour centrer. Voilà, par exemple. Et alors, bien sûr, ça n'existe pas encore. On va le créer. Eh bien, écoutez, j'avais déjà un textaline center sur titre. Et comme je crois que je n'utilise plus titre, je vais pouvoir réutiliser, ici, la classe titre. Alors, c'est style avec un S. Voilà, donc mon petit texte, là-haut, est bien centré. Et du coup, j'ai envie de tester, par exemple, H1. Voilà, donc là, j'ai un texte assez gros. J'ai pas du tout touché au style. Si je fais H2, ça va réduire un tout petit peu la taille. H3, pareil. Et c'est dégressif, comme ça. Alors, comment ça marche ? Ici, vous voyez que vous avez le nom d'une propriété. Vous voyez que, par défaut, elle n'existe pas. Et que c'est du type booléen. Et après, vous avez une petite description. Et vous expliquez ce que ça fait. Donc, concrètement, du côté du composant, du côté du code de cette librairie, on va avoir une propriété, une props, qui va s'appeler H1. Et qui, par défaut, n'est pas définie et n'est pas forcément requise. En javascript, dans la mesure où vous ne fournissez pas la propriété et qu'elle n'est pas requise, à partir du moment où la propriété n'existe pas, elle est fausse. Donc, comme ici, c'est un booléen, et que vous n'avez pas, dans votre code, le tweet.ly, là, est écrit en H3. Donc, en H1, c'est faux. Donc, vous ne pouvez pas retrouver le style du H1, parce que sa valeur va être à faux. Par contre, j'ai écrit H3. Et du coup, H3, la propriété existe. Et je n'ai pas besoin d'écrire H3 égale true. La propriété est forcément vraie, à partir du moment où on l'indique dans les propriétés de l'élément. C'est pour ça qu'on va pouvoir l'indiquer comme ceci. Après, vous avez donc font-family, si vous avez envie d'utiliser autre chose que la font-family de base de iOS ou de Android. Alors, maintenant, on va essayer, par exemple, d'ajouter le bouton ajouter un nouveau tweet. On va essayer de le rendre un petit peu plus sympa. Et ensuite, on s'attaquera rapidement à la barre de navigation. Donc, ici, on a plusieurs composants. Et on a surtout button, qui nous donne quelque chose d'un peu sympa, comme ça. Et si on descend, on voit un petit peu le code. On voit comment ça marche. Donc, on voit toujours l'import qui nous permet d'aller chercher le composant réutilisable button dans la librairie React Native Element. Il y a quelques exemples. Et juste en dessous, on voit les props. Donc là, il y en a un petit peu plus. On a des trucs un peu particuliers. Par exemple, on long press, qui permet de définir une action à partir du moment où l'utilisateur va laisser son doigt posé sur le bouton. On press, c'est dès qu'il va cliquer. On a des icônes, si on a envie d'avoir une petite icône, ici, comme ça, sur la gauche. Voilà, ce genre de choses. Et du coup, on va s'inspirer très fortement de ça. Moi, je vais avoir besoin d'un bouton de couleur primaire, comme ça, une espèce de bleu ciel. Je veux que son titre, donc on voit, ça doit être title, soit ajouté à un nouveau tweet. Et j'ai envie que mon icône... Alors, je vous disais, je vais utiliser les icônes de Ionicone. Donc là, dans le type de l'icône, je vais pouvoir mettre Ionicone. Et ici, le nom de mon icône. Large, si j'ai envie d'avoir un bouton un peu plus large. Sinon, si j'ai envie d'avoir un bouton un petit peu plus standard, comme ça. Et du coup, je vais avoir un petit plus, probablement, à côté d'ajouter un nouveau tweet. Ou alors, peut-être, un petit oiseau si c'est fourni dans la librairie Ionicone. Donc, on va voir ça tout de suite. Ici, je vais avoir besoin de modifier directement le composant tweetbox. Ici, je vais importer le bouton de React Native Element. Et ensuite, on va regarder un exemple. Donc, moi, je veux un bouton large avec une icône. Ici, j'ai déjà un objet qui est passé à l'intérieur de l'icône. Et j'ai déjà un titre. Donc, c'est parfait. Je vais, en plus, avoir besoin de la propriété onPress. Qui est exactement la même que la propriété onPress du bouton qu'on avait déjà, qu'on avait déjà, ici, créé. Donc, onPress, vous pourrez réutiliser exactement la même chose. Et je vais, peut-être, avoir besoin d'une propriété couleur. Et si on regarde, est-ce qu'on a une propriété couleur ? Voilà, on a une propriété couleur qui prend en paramètres une chaîne de caractère, qui va probablement être un code hexadécimal. Donc, on va pouvoir tester. Et il y a plein de petites propriétés. On peut rendre le bouton inaccessible, peut-être, si... D'ailleurs, on va le faire. On va rendre le bouton inaccessible s'il n'y a pas de caractère à l'intérieur de ma value, à l'intérieur de mon champ de texte. Et voilà, tout ça, plein de petites propriétés sympas. Et oui, je voulais attirer votre attention sur icône. Donc, si on cherche icône, ici, on voit que le type est un petit peu compliqué. Mais, globalement, il nous donne des indications. Il nous dit que ça peut être un objet et qu'on veut le nom de l'icône, la couleur de l'icône, sa size, si jamais l'icône n'est pas de taille adaptée. Et le type, donc, c'est une librairie qui vous permet d'importer le type d'icône que vous avez envie. Donc, il y a des icônes assez connues, des icônes matérielles, les icônes font awesome, octicone, ionicone. Donc, ça, c'est ce que moi, je vais utiliser. Fondation, Evil Icon, etc. Donc, il y a plein de librairies qui sont déjà linkées avec React Native Element. Donc, à vous d'utiliser celle qui vous plaît. Donc, je vous disais, on va prendre celui-ci. On va pas s'embêter, on va pas s'embêter à le retaper. Et on va l'importer juste là. Voilà, comme ceci. Alors, ici, on va avoir un petit problème, c'est que button, c'est la même chose que button. Et, nous, on n'a pas envie qu'il y ait un conflit. Donc, exactement comme avec texte sur le conteneur app, on va devoir supprimer button de React Native, parce que c'est pas celui-là qu'on a envie d'utiliser. Je vais pouvoir récupérer la propriété onPress, qui va exactement être la même. La propriété color, parce que je vais avoir ma couleur primaire. On verra ce que ça donne, si jamais c'est moche, on le changera. Et la propriété title. Voilà, je vais pouvoir changer ici. J'ai pas envie que ça soit large with right icon. Voilà, comme ceci. Et ensuite, dans mon icône, là, on va on va changer deux, trois petites choses pour que ça soit sympa. Comme je vous disais, dans les propriétés de l'icône, moi, je veux que ça soit une IonIcon. Donc ici, mon type, ça va être IonIcon. Et ensuite, on va aller très rapidement sur le site d'IonIcon. Et on voit ici tout un tas de petites icônes hyper sympa, avec un moteur de recherche. Donc, par exemple, si je tape tweet, ça ne donne rien. Voilà. Tweet, ici, j'ai Twitter. J'ai un petit oiseau. Je peux taper add, par exemple, si j'ai envie d'avoir un plus. Comme ça, ajouter un nouveau tweet. D'ailleurs, on va utiliser plutôt celle-ci. Donc, celle qui vous plaît. Par exemple, voilà, celle-là. Et ensuite, ici, on a un petit nom. On va prendre pour le mettre à l'intérieur de notre code, ici, dans le nom de l'icône. Normalement, si je sauvegarde, je vais avoir un bouton qui va apparaître. Voilà. Donc là, j'ai un bouton qui apparaît. J'ai un petit problème, par contre, sur la couleur de l'icône. On va essayer de regarder pourquoi. Ma couleur primaire, normalement, ça va être une chaîne de caractères. C'est ce qu'attend le bouton. Juste, je vais enlever large parce que je trouve que c'est un petit peu trop gros. Voilà. La taille, ça sera très bien. J'ai toujours mon on press, voilà, qui va effectuer quelque chose. Voyez, le bouton clignote légèrement. Ça veut dire que le bouton est cliqué. Si je mets la fonction disable, voilà, donc le bouton est légèrement éclairci. Et vous voyez, ça ne clignote pas quand j'essaie d'effectuer une action. Donc c'est normal, là, le bouton n'est pas actif. Ce bouton-là, c'est un bouton... enfin, cette propriété, pardon. Cette propriété-là, c'est une propriété qui est un booléen, donc ça attend vrai ou faux. Mais on peut aussi lui passer une condition qui va définir si elle est vraie ou si elle est fausse.

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