Utilisation de l'API Alert dans React Native

Utiliser l'API Alert
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

Maîtriser l'API Alert de React Native et savoir intégrer des alertes interactives dans une application mobile pour améliorer l'expérience utilisateur.

Apprenez à utiliser l'API Alert de React Native pour gérer les interactions utilisateur dans vos applications mobiles.

Cette leçon explore l'utilisation de l'API Alert de React Native, une méthode permettant d'afficher des alertes interactives dans les applications mobiles. Vous apprendrez comment intégrer cette API, créer des alertes avec des titres et des messages personnalisés, et ajouter des boutons avec des actions spécifiques. L'exemple pratique montre comment afficher une alerte lorsqu'un utilisateur appuie sur un composant tweet. En utilisant TouchableWithoutFeedback pour rendre les composants cliquables, nous enveloppons le tweet et utilisons la méthode alert pour afficher une alerte. Vous verrez également comment personnaliser les alertes avec plusieurs boutons et utiliser des fonctionnalités spécifiques aux plateformes iOS et Android. Ce tutoriel est essentiel pour intégrer des feedbacks utilisateur et améliorer l'interactivité des applications React Native.

Voir plus
Questions réponses
Qu'est-ce que l'API Alert de React Native?
L'API Alert de React Native est une méthode permettant d'afficher des alertes interactives avec des titres, messages et boutons personnalisés dans les applications mobiles.
Pourquoi utiliser <strong>TouchableWithoutFeedback</strong> pour gérer les interactions utilisateur?
TouchableWithoutFeedback permet de rendre un composant cliquable sans apporter de modifications visuelles ou tactiles, donc idéal pour rendre des sections de l'interface utilisateur interactives.
Comment personnaliser les boutons d'alerte?
Les boutons d'alerte peuvent être personnalisés en définissant des objets avec des propriétés comme text pour le libellé du bouton et onPress pour la fonction à exécuter lorsqu'il est pressé.
Alors on va essayer d'utiliser ici l'API Alert, et pas Alert iOS, qui je vous le rappelle est spécifique pour iOS. On va regarder un petit peu comment ça fonctionne, mais globalement, Alert possède une seule méthode, qui va être également Alert, et va prendre plusieurs arguments. Les arguments qui possèdent un point d'interrogation sont des arguments qui sont facultatifs, et les arguments sans point d'interrogation, ici Title, sont des arguments requis. On a un petit exemple au-dessus, Alert qui correspond au module de l'API React Native qu'on va importer, et ensuite un point Alert pour accéder à cette méthode statique, et ici on voit un titre, on voit un message, et on voit un tableau de boutons, avec plusieurs objets qui possèdent une clé texte et une clé on-press, on devine assez facilement ce que ça fait, et ensuite on a des options, etc. On va essayer de lancer une alerte, par exemple quand on appuie sur un tweet, je vais retourner dans le code, et on va aller sur le composant tweet, et ici dans React Native, tout simplement comme un composant, je vais importer Alert, et à partir du moment où on va cliquer sur un tweet, j'ai envie d'afficher quelque chose. Souvenez-vous, le composant View ne possède pas de propriété on-press, donc je ne vais pas pouvoir faire grand-chose avec ce composant-là, donc je vais devoir englober tout mon tweet à l'intérieur d'un nouveau composant qu'on a vu la dernière fois, qui s'appelle TouchableWithoutFeedback, c'est un petit peu long à retenir, mais globalement ça veut dire qu'on a envie d'avoir une zone tactile active, et qu'on ne veut aucun retour, vous allez voir qu'il y a des composants qui vont peut-être faire vibrer le téléphone, ou d'autres qui vont changer la couleur de l'élément, là on veut simplement accéder à une propriété on-press. Donc j'importe également ce composant-là, et on va englober notre tweet. Voilà, comme ceci, et ici je vais avoir une propriété on-press. On va pouvoir tester tout de suite avec simplement une alerte de base, avec uniquement le paramètre requis. Et quand je reviens dans mon application, je peux cliquer sur mon tweet, et j'ai bien une alerte qui s'affiche avec mon titre, et un bouton par défaut qui s'appelle OK, qui va permettre de revenir à l'écran en dessous. Sur Android, vous pouvez cliquer sur la zone grisée, ça va également supprimer l'alerte. Voilà, ça marche sur n'importe quel bouton. On va essayer quand même de développer un peu cette alerte, et de faire un petit peu comme sur la dock, pour voir comment on peut avoir une alerte un petit peu plus sympa. Donc là, on va simplement recopier ça, et on va essayer de le customiser un petit peu. Souvenez-vous, le premier paramètre, ça va être le titre. Moi ce que j'ai envie, c'est par exemple d'avoir les infos du tweet. On va l'écrire en français d'ailleurs. Voilà, information du tweet. Ici, dans mon message, plutôt que de passer une chaîne de caractère, j'ai envie peut-être de passer directement le tweet. Et ici, j'ai une liste de boutons qui me sont proposés, qui vont à chaque fois effectuer quelque chose. On peut avoir envie par exemple d'avoir un bouton qui va me permettre de supprimer mon tweet, ou ce genre de choses. Vous pouvez mettre absolument tout ce que vous voulez, à partir du moment où vous passez des propriétés dans tweet. Si c'est des fonctions, vous allez pouvoir les passer facilement. Ici, dans l'objet, cette espèce de tableau qui contient des objets, pour les boutons. Donc on va tester rapidement. A partir du moment où je clique sur un tweet, j'ai bien le titre qui s'affiche, information du tweet. J'ai bien le tweet en dessous, donc il y a ma variable tweet qui s'affiche. Et ensuite, j'ai mes trois boutons qui me permettent d'effectuer des actions au onPress. Alors, notez que les boutons ne sont pas ordonnés comme moi je les ai ordonnés dans mon objet. C'est à cause de la propriété style, ici, cancel. Donc on a décidé que le bouton où c'était écrit cancel, c'était un bouton qui allait supprimer simplement l'alerte. Donc sur iOS, il est systématiquement en bas.

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