Maintenant que nous éliminons ces bases et avant de plonger plus profondément dans React Native et aussi comment
nous pouvons styler nos applications de manière un peu plus belle, car évidemment notre style ici a
certainement encore un certain potentiel positif pour le mettre comme ça, avant de
plonger tout cela, permettez-moi de vous montrer un autre composant passionnant qui est intégré dans React
Native et qui montre également à quel point vous pouvez facilement ajouter des fonctionnalités intéressantes aux applications React Native
et c'est le composant modal.
Vous le trouverez bien sûr dans la documentation officielle dans ce guide des composants et
des API ici et là, vous trouverez un modal là-bas.
Maintenant, c'est sous d'autres et ici, ce modal est un joli composant qui vous permet d'ajouter
une super superposition, superposition en plein écran avec un peu d'effort.
Ajoutons maintenant un modal pour héberger réellement notre entrée d'objectif, en ce moment, l'entrée d'objectif
est ici en haut et c'est très bien, mais je veux
en fait le déplacer dans un modal afin que nous l'avons à la fin sur une superposition plein écran et
nous n'avons qu'un bouton ici en
haut, donc à la place de l'entrée d'objectif qui ouvre ce modal.
Passons donc à la saisie des objectifs
et
là, je veux envelopper cela dans un modal. Je vais donc importer du modal à
partir de React Native parce que c'est
un composant livré avec React Native et là, je veux utiliser ce modal autour de ma vue ici,
alors juste comme ça pour l'instant et maintenant sauvegardons cela et voyons
si cela change déjà quelque chose un peu oui,
notre style est éteint,
nous perdons le rembourrage que nous avons configuré à l'origine, non?
Dans l'application. js, nous avons ce remplissage général sur notre vue d'écran
qui est cette vue extérieure, il n'est certainement plus appliqué sur les deux plates-formes, sur les deux appareils parce que notre
contenu est bien en dehors de cet écran, de sorte que le modal fait déjà quelque chose et bien
sûr, nous ne voyons pas vraiment beaucoup. Maintenant, pour le modal, donc pour ce composant
modal, vous pouvez définir une clé visible qui définit si elle est actuellement visible ou non
et qui prend un booléen si nous la définissons sur false par exemple et ensuite si nous jetons un
œil à nos
applications, nous bien sûr vu un écran vide. Au fait, dans le cas où Android ne devrait
pas être mis à jour pour vous après avoir défini ce paramètre sur false, fermez simplement l'application ici à l'aide du tiroir de l'application et ensuite dans
votre processus là-bas, le processus de démarrage npm, appuyez à nouveau sur a pour redémarrer sur Android.
Alors maintenant, nous avons un écran vide lorsque cela est défini
sur false, maintenant nous codons en dur ce n'est pas la solution.
Au lieu de cela dans l'application. js, je veux maintenant avoir un bouton qui nous permet d'ouvrir ce modal et
ensuite nous fermerons le modal de
l'intérieur du modal lorsque nous appuierons sur le bouton d'ajout. Maintenant, nous importons déjà le bouton ici dans l'application. js et maintenant que je vois
cela, nous pouvons bien sûr aussi nous débarrasser de ces importations que nous n'utilisons pas
ici en
ce moment, alors laissez simplement le bouton importer ici avec les autres importations que nous
utilisons et maintenant ici tout en haut , nous pouvons ajouter le bouton, c'est une balise à fermeture
automatique et définir le titre pour ajouter un nouvel objectif peut-être, quelque chose comme ça. Si nous le faisons, nous devrions bien sûr voir ce bouton ici en haut et
le
voici et maintenant, lorsque
nous appuyons sur ce bouton, nous voulons montrer ce modal, non? Maintenant, pour cela, nous devons gérer plus
d'État.
Donc ici, en plus de gérer les objectifs du cours, je vais maintenant aussi gérer si nous sommes actuellement en mode d'ajout
de cours ou si nous ne le sommes pas.
Donc au départ, nous ne sommes pas si l'état initial que je définis est faux et je vais nommer
mon état ici et
bien sûr, cela dépend entièrement de vous, je vais le nommer isAddMode et setIsAddMode.
Encore une fois, ces
noms vous appartiennent, j'ai juste une convention ici que vous trouverez également dans les documents officiels de React où ici nous essayons de
donner à l'état que nous contrôlons un nom approprié, puis nous prenons essentiellement ce nom et ajoutons un
ensemble en face d'elle pour indiquer clairement que c'est la fonction de changer cet état.
Donc, setIsAddMode est ce que nous devons finalement appeler lorsque ce bouton est enfoncé et ici
nous pouvons utiliser une fonction en ligne ou utiliser une fonction nommée et ajouter simplement le gestionnaire ici, tout ce
que vous voulez.
Je vais utiliser la fonction inline et appeler set isAddMode et définir cela sur
true ici lorsque ce bouton est appelé afin d'ouvrir le modal. Maintenant, nous pouvons prendre cet état isAddMode que nous changeons et
le passer à l'entrée d'objectif pour ensuite modifier la visibilité du modal. Donc ici, nous pourrions ajouter un accessoire visible, mais ce
nom d'accessoire dépend de vous, car il se trouve sur notre propre composant et je passe l'isAddMode,
c'est donc l'état
que nous contrôlons, en mode visible, de sorte
que la valeur stockée dans isAddMode est passée comme valeur à l'hélice visible.
Maintenant, dans la saisie de l'objectif, nous pouvons donc maintenant utiliser cet
accessoire visible, donc ici nous pouvons utiliser les accessoires
visibles, se référant maintenant à l'accessoire visible que nous avons obtenu sur l'entrée de l'objectif que nous
transmettons ensuite à l'accessoire visible du modal. Si nous enregistrons maintenant cela et que nous jetons un
œil à notre application, si j'appuie sur Ajouter un nouvel objectif ici, en effet, vous voyez à nouveau ce contenu modal ici.
Maintenant, évidemment, ce n'est pas si beau
ici, donc nous devrions
changer cela et une autre chose que je veux changer, c'est qu'une animation serait bien ici pour ouvrir le modal, non?
Donc, ici, ajoutons un type d'animation qui est une belle propriété que nous pouvons définir ici et vous pouvez définir cela sur une chaîne et là vous avez
trois options - aucune n'est la valeur par défaut mais vous pouvez définir cela sur slide et
maintenant le modal devrait réellement apparaître en glissant vers le haut.
Donc, si vous appuyez sur Ajouter un nouvel objectif, cela
glisse maintenant, également sur Android.
C'est donc une meilleure expérience utilisateur, je dirais, la prochaine étape consiste à nous assurer que notre contenu
dans le modal est présenté de manière plus agréable, peut-être centré ici au milieu du modal.