1
00:00:02,340 --> 00:00:08,370
Maintenant que nous éliminons ces bases et avant de plonger plus profondément dans React Native et aussi comment

2
00:00:08,370 --> 00:00:13,920
nous pouvons styler nos applications de manière un peu plus belle, car évidemment notre style ici a

3
00:00:13,950 --> 00:00:18,260
certainement encore un certain potentiel positif pour le mettre comme ça, avant de

4
00:00:18,420 --> 00:00:23,790
plonger tout cela, permettez-moi de vous montrer un autre composant passionnant qui est intégré dans React

5
00:00:23,790 --> 00:00:29,970
Native et qui montre également à quel point vous pouvez facilement ajouter des fonctionnalités intéressantes aux applications React Native

6
00:00:30,150 --> 00:00:32,010
et c'est le composant modal.

7
00:00:32,010 --> 00:00:38,310
Vous le trouverez bien sûr dans la documentation officielle dans ce guide des composants et

8
00:00:38,310 --> 00:00:42,650
des API ici et là, vous trouverez un modal là-bas.

9
00:00:43,420 --> 00:00:50,470
Maintenant, c'est sous d'autres et ici, ce modal est un joli composant qui vous permet d'ajouter

10
00:00:50,740 --> 00:00:55,780
une super superposition, superposition en plein écran avec un peu d'effort.

11
00:00:55,900 --> 00:01:00,490
Ajoutons maintenant un modal pour héberger réellement notre entrée d'objectif, en ce moment, l'entrée d'objectif

12
00:01:00,490 --> 00:01:04,020
est ici en haut et c'est très bien, mais je veux

13
00:01:04,540 --> 00:01:10,480
en fait le déplacer dans un modal afin que nous l'avons à la fin sur une superposition plein écran et

14
00:01:10,660 --> 00:01:12,790
nous n'avons qu'un bouton ici en

15
00:01:12,790 --> 00:01:16,480
haut, donc à la place de l'entrée d'objectif qui ouvre ce modal.

16
00:01:16,630 --> 00:01:19,000
Passons donc à la saisie des objectifs

17
00:01:19,000 --> 00:01:19,780
et

18
00:01:19,810 --> 00:01:25,000
là, je veux envelopper cela dans un modal. Je vais donc importer du modal à

19
00:01:25,000 --> 00:01:27,600
partir de React Native parce que c'est

20
00:01:27,640 --> 00:01:34,020
un composant livré avec React Native et là, je veux utiliser ce modal autour de ma vue ici,

21
00:01:34,040 --> 00:01:38,080
alors juste comme ça pour l'instant et maintenant sauvegardons cela et voyons

22
00:01:38,180 --> 00:01:41,150
si cela change déjà quelque chose un peu oui,

23
00:01:41,180 --> 00:01:42,740
notre style est éteint,

24
00:01:42,740 --> 00:01:46,700
nous perdons le rembourrage que nous avons configuré à l'origine, non?

25
00:01:46,710 --> 00:01:52,370
Dans l'application. js, nous avons ce remplissage général sur notre vue d'écran

26
00:01:52,370 --> 00:01:58,430
qui est cette vue extérieure, il n'est certainement plus appliqué sur les deux plates-formes, sur les deux appareils parce que notre

27
00:01:58,430 --> 00:02:03,800
contenu est bien en dehors de cet écran, de sorte que le modal fait déjà quelque chose et bien

28
00:02:03,800 --> 00:02:08,480
sûr, nous ne voyons pas vraiment beaucoup. Maintenant, pour le modal, donc pour ce composant

29
00:02:09,020 --> 00:02:14,030
modal, vous pouvez définir une clé visible qui définit si elle est actuellement visible ou non

30
00:02:14,030 --> 00:02:19,730
et qui prend un booléen si nous la définissons sur false par exemple et ensuite si nous jetons un

31
00:02:19,730 --> 00:02:21,020
œil à nos

32
00:02:21,080 --> 00:02:25,880
applications, nous bien sûr vu un écran vide. Au fait, dans le cas où Android ne devrait

33
00:02:25,900 --> 00:02:32,660
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

34
00:02:32,660 --> 00:02:37,080
votre processus là-bas, le processus de démarrage npm, appuyez à nouveau sur a pour redémarrer sur Android.

35
00:02:37,100 --> 00:02:39,650
Alors maintenant, nous avons un écran vide lorsque cela est défini

36
00:02:39,650 --> 00:02:42,410
sur false, maintenant nous codons en dur ce n'est pas la solution.

37
00:02:42,410 --> 00:02:47,990
Au lieu de cela dans l'application. js, je veux maintenant avoir un bouton qui nous permet d'ouvrir ce modal et

38
00:02:47,990 --> 00:02:49,340
ensuite nous fermerons le modal de

39
00:02:49,350 --> 00:02:55,760
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

40
00:02:55,760 --> 00:03:00,530
cela, nous pouvons bien sûr aussi nous débarrasser de ces importations que nous n'utilisons pas

41
00:03:00,560 --> 00:03:01,480
ici en

42
00:03:01,550 --> 00:03:06,400
ce moment, alors laissez simplement le bouton importer ici avec les autres importations que nous

43
00:03:06,490 --> 00:03:12,260
utilisons et maintenant ici tout en haut , nous pouvons ajouter le bouton, c'est une balise à fermeture

44
00:03:12,260 --> 00:03:22,160
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

45
00:03:22,160 --> 00:03:22,750
le

46
00:03:22,750 --> 00:03:24,040
voici et maintenant, lorsque

47
00:03:24,140 --> 00:03:31,000
nous appuyons sur ce bouton, nous voulons montrer ce modal, non? Maintenant, pour cela, nous devons gérer plus

48
00:03:31,000 --> 00:03:31,920
d'État.

49
00:03:31,990 --> 00:03:38,350
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

50
00:03:38,410 --> 00:03:41,220
de cours ou si nous ne le sommes pas.

51
00:03:41,260 --> 00:03:48,220
Donc au départ, nous ne sommes pas si l'état initial que je définis est faux et je vais nommer

52
00:03:48,220 --> 00:03:50,100
mon état ici et

53
00:03:50,140 --> 00:03:55,460
bien sûr, cela dépend entièrement de vous, je vais le nommer isAddMode et setIsAddMode.

54
00:03:55,660 --> 00:03:56,860
Encore une fois, ces

55
00:03:56,860 --> 00:04:03,220
noms vous appartiennent, j'ai juste une convention ici que vous trouverez également dans les documents officiels de React où ici nous essayons de

56
00:04:03,220 --> 00:04:08,110
donner à l'état que nous contrôlons un nom approprié, puis nous prenons essentiellement ce nom et ajoutons un

57
00:04:08,110 --> 00:04:12,430
ensemble en face d'elle pour indiquer clairement que c'est la fonction de changer cet état.

58
00:04:12,430 --> 00:04:17,230
Donc, setIsAddMode est ce que nous devons finalement appeler lorsque ce bouton est enfoncé et ici

59
00:04:17,230 --> 00:04:22,750
nous pouvons utiliser une fonction en ligne ou utiliser une fonction nommée et ajouter simplement le gestionnaire ici, tout ce

60
00:04:22,750 --> 00:04:23,700
que vous voulez.

61
00:04:24,130 --> 00:04:28,450
Je vais utiliser la fonction inline et appeler set isAddMode et définir cela sur

62
00:04:28,480 --> 00:04:35,800
true ici lorsque ce bouton est appelé afin d'ouvrir le modal. Maintenant, nous pouvons prendre cet état isAddMode que nous changeons et

63
00:04:35,800 --> 00:04:43,760
le passer à l'entrée d'objectif pour ensuite modifier la visibilité du modal. Donc ici, nous pourrions ajouter un accessoire visible, mais ce

64
00:04:43,760 --> 00:04:50,120
nom d'accessoire dépend de vous, car il se trouve sur notre propre composant et je passe l'isAddMode,

65
00:04:50,120 --> 00:04:51,680
c'est donc l'état

66
00:04:51,680 --> 00:04:54,800
que nous contrôlons, en mode visible, de sorte

67
00:04:54,800 --> 00:04:59,660
que la valeur stockée dans isAddMode est passée comme valeur à l'hélice visible.

68
00:04:59,660 --> 00:05:03,710
Maintenant, dans la saisie de l'objectif, nous pouvons donc maintenant utiliser cet

69
00:05:03,710 --> 00:05:06,670
accessoire visible, donc ici nous pouvons utiliser les accessoires

70
00:05:06,740 --> 00:05:12,080
visibles, se référant maintenant à l'accessoire visible que nous avons obtenu sur l'entrée de l'objectif que nous

71
00:05:12,230 --> 00:05:17,170
transmettons ensuite à l'accessoire visible du modal. Si nous enregistrons maintenant cela et que nous jetons un

72
00:05:17,310 --> 00:05:22,440
œil à notre application, si j'appuie sur Ajouter un nouvel objectif ici, en effet, vous voyez à nouveau ce contenu modal ici.

73
00:05:22,590 --> 00:05:25,020
Maintenant, évidemment, ce n'est pas si beau

74
00:05:25,020 --> 00:05:26,590
ici, donc nous devrions

75
00:05:26,700 --> 00:05:33,450
changer cela et une autre chose que je veux changer, c'est qu'une animation serait bien ici pour ouvrir le modal, non?

76
00:05:33,450 --> 00:05:40,740
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

77
00:05:40,740 --> 00:05:45,210
trois options - aucune n'est la valeur par défaut mais vous pouvez définir cela sur slide et

78
00:05:45,420 --> 00:05:48,450
maintenant le modal devrait réellement apparaître en glissant vers le haut.

79
00:05:48,490 --> 00:05:51,760
Donc, si vous appuyez sur Ajouter un nouvel objectif, cela

80
00:05:51,760 --> 00:05:53,430
glisse maintenant, également sur Android.

81
00:05:53,430 --> 00:05:59,130
C'est donc une meilleure expérience utilisateur, je dirais, la prochaine étape consiste à nous assurer que notre contenu

82
00:05:59,130 --> 00:06:04,410
dans le modal est présenté de manière plus agréable, peut-être centré ici au milieu du modal.