1 00:00:02,150 --> 00:00:09,140 Commençons donc avec l'implémentation de l'authentification et une étape très importante vers cela est que nous ajoutons un nouvel écran, l'écran 2 00:00:09,140 --> 00:00:16,370 d'authentification qui est l'écran qui devrait présenter un formulaire de connexion ou d'inscription que l'utilisateur peut utiliser pour se connecter ou 3 00:00:16,370 --> 00:00:19,910 s'inscrire et donc ici dans l'écran d'authentification, je vais importer 4 00:00:20,130 --> 00:00:24,080 réagir de réagir et je vais aussi importer certaines choses de 5 00:00:24,260 --> 00:00:31,070 React Native parce qu'à partir de là, de React Native, je veux avoir la vue de défilement parce que nous 6 00:00:31,070 --> 00:00:36,740 allons construire un formulaire et je veux assurez-vous que les utilisateurs de toutes les tailles d'appareils 7 00:00:36,740 --> 00:00:38,420 peuvent interagir avec lui. 8 00:00:38,480 --> 00:00:42,290 Je vais ajouter une feuille de style ici et ça devrait être le cas pour le moment, nous pouvons 9 00:00:42,290 --> 00:00:44,690 toujours en ajouter plus si nous en avons besoin de plus. 10 00:00:44,960 --> 00:00:50,990 Nous pouvons également déjà inclure une vue et le clavier en évitant la vue, je suppose pour nous assurer que 11 00:00:51,050 --> 00:00:52,970 toutes les entrées sont toujours accessibles. 12 00:00:52,970 --> 00:00:58,160 Parlant maintenant des entrées, bien sûr, nous allons ajouter un formulaire et donc je vais réutiliser le composant d'entrée que 13 00:00:58,160 --> 00:01:02,630 nous avons construit dans la section formulaires que je peux trouver dans le dossier UI des composants. 14 00:01:02,720 --> 00:01:07,670 Assurez-vous donc de regarder cette section pour savoir ce que fait ce composant et 15 00:01:07,670 --> 00:01:09,620 comment gérer un formulaire avec. 16 00:01:09,620 --> 00:01:17,650 Avec cela, nous pouvons créer ici le composant d'écran d'authentification qui reçoit les accessoires et nous pouvons également créer 17 00:01:17,650 --> 00:01:22,140 cet objet de styles avec la feuille de style, la 18 00:01:22,150 --> 00:01:27,510 méthode de création là-bas et bien sûr exporter l'écran d'authentification, comme ceci. 19 00:01:27,540 --> 00:01:33,150 Maintenant, évidemment, la question est maintenant aussi, comment pouvons-nous présenter cet écran d'authentification? Comment pouvons-nous nous assurer que nous voyons cela 20 00:01:33,150 --> 00:01:35,520 si nous ne sommes pas connectés? 21 00:01:35,520 --> 00:01:40,620 C'est quelque chose que nous allons affiner tout au long de ce module, mais pour commencer, nous pouvons aller 22 00:01:40,620 --> 00:01:46,200 dans le navigateur et nous assurer que lorsque l'application se lance, nous voyons cet écran d'authentification et pour cela, nous pouvons 23 00:01:46,200 --> 00:01:51,930 utiliser un nouveau navigateur spécial que nous n'avons pas utilisé avant qui est spécifiquement conçu pour, on pourrait presque dire pour 24 00:01:51,930 --> 00:01:56,950 ce cas d'utilisation de l'authentification et que la fonction de création de navigateur de commutateur qui nous aide 25 00:01:56,970 --> 00:02:02,550 là-bas, donc il crée un tel navigateur de commutateur. La particularité de ce navigateur est qu'il affiche toujours 26 00:02:02,550 --> 00:02:08,160 exactement un écran et que vous ne pouvez pas revenir à un autre écran si vous accédez ensuite à un autre. 27 00:02:08,160 --> 00:02:13,710 Donc, revenir en arrière n'est pas explicitement autorisé, ce qui est exactement ce que nous voulons, car vous ne 28 00:02:13,890 --> 00:02:18,040 devriez pas pouvoir revenir à l'écran de connexion si vous venez de vous connecter. 29 00:02:18,090 --> 00:02:24,750 Donc donc ici au bas du fichier, je vais créer un nouveau navigateur, peut-être mon navigateur principal, le 30 00:02:24,750 --> 00:02:31,770 nom est totalement à vous bien sûr, avec create switch navigateur et comme précédemment, ce navigateur prend un argument où 31 00:02:31,920 --> 00:02:38,670 nous configurons il, donc un objet où on le configure et là, je veux lier mon écran d'authentification et 32 00:02:38,880 --> 00:02:46,260 bien sûr ma pile de boutique par la suite. Maintenant, pour avoir un bel en-tête, je vais 33 00:02:46,260 --> 00:02:55,560 également créer mon navigateur d'authentification ici, qui est un navigateur de pile créé avec créer un navigateur de pile et là-bas, je vais simplement 34 00:02:55,560 --> 00:03:00,430 mapper l'écran d'authentification sur lequel je viens de commencer à travailler et pour 35 00:03:00,450 --> 00:03:09,210 cela bien sûr, nous besoin de l'importer, donc dans ce ShopNavigator. fichier js, nous pouvons importer l'écran d'authentification à partir de l'écran d'authentification de 36 00:03:09,210 --> 00:03:10,060 l'utilisateur comme 37 00:03:10,180 --> 00:03:16,880 ceci et avec cette importation ajoutée, si nous descendons, nous mappons ceci ici à l'authentification dans le navigateur d'authentification et le 38 00:03:16,880 --> 00:03:23,640 navigateur d'authentification est ensuite mappé à l'authentification ici dans le navigateur de commutateur et La boutique est bien sûr mappée au 39 00:03:23,640 --> 00:03:28,770 navigateur de la boutique et maintenant c'est le navigateur principal que nous encapsulons avec le conteneur 40 00:03:28,770 --> 00:03:34,110 de création d'application et donc avec cela si nous l'enregistrons, nous rendrons en fait l'écran d'authentification 41 00:03:34,140 --> 00:03:35,820 comme le premier écran 42 00:03:36,060 --> 00:03:43,980 qui ne rendra pas tout valide actuellement jsx, donc nous obtenons une erreur mais nous pouvons y travailler bien sûr car là le but est 43 00:03:43,980 --> 00:03:53,880 maintenant de rendre cet écran d'authentification où nous pouvons nous connecter et faire notre truc. Donc ici, je veux présenter ces entrées et je vais en fait aussi importer 44 00:03:53,880 --> 00:04:02,750 le composant de carte à partir des composants de la carte d'interface utilisateur pour que cette belle carte regarde ici et y avoir mes entrées et 45 00:04:02,750 --> 00:04:07,400 bien sûr, cela est totalement facultatif mais ici, je vais ajouter ici, 46 00:04:07,400 --> 00:04:14,030 je vais ajouter la carte et dans la carte, nous pouvons ajouter la vue de défilement afin que nous puissions 47 00:04:14,030 --> 00:04:19,100 faire défiler à l'intérieur de cette carte, bien sûr, vous pouvez également ajouter la vue 48 00:04:19,100 --> 00:04:27,650 de défilement autour de la carte afin que vous puissiez faire défiler sur l'ensemble écran, mais je vais le faire comme ça, ajoutez également mon 49 00:04:27,650 --> 00:04:36,540 propre style ici à la carte que je nommerai peut-être le conteneur d'authentification, le nom dépend entièrement de vous et j'envelopperai également une vue autour de 50 00:04:36,540 --> 00:04:46,880 tout cela ici comme un emballage voir où j'ajouterai un style que je nommerai écran. En fait, ici, nous pouvons déjà utiliser le clavier en évitant la vue, je suppose 51 00:04:46,940 --> 00:04:56,730 avec un comportement de rembourrage, puis ce clavier est décalé verticalement, disons 50. Alors maintenant, à l'intérieur de cette vue de défilement ici 52 00:04:56,730 --> 00:05:04,720 que nous avons dans notre carte, nous pouvons commencer à ajouter les entrées, l'entrée personnalisée que nous 53 00:05:04,720 --> 00:05:11,590 avons construite plus tôt dans le cours. Par exemple ici, une entrée avec l'ID e-mail et une 54 00:05:11,590 --> 00:05:19,780 étiquette d'e-mail parce que là, je veux récupérer l'adresse e-mail de l'utilisateur et donc le type de clavier de l'adresse e-mail qui est pris en 55 00:05:19,810 --> 00:05:22,750 charge à la fois sur iOS et Android. 56 00:05:22,750 --> 00:05:28,980 Cela devrait également être obligatoire et je veux utiliser le validateur d'e-mail, ce sont deux des fonctionnalités de 57 00:05:28,990 --> 00:05:36,540 validation que j'ai intégrées à l'entrée plus tôt dans ce cours, la capitalisation automatique doit également être désactivée, je vais donc 58 00:05:36,540 --> 00:05:42,630 la mettre à zéro car capitalisée dans le L'adresse e-mail n'est vraiment pas utile et le 59 00:05:42,630 --> 00:05:52,190 message d'erreur que je veux afficher si nous avons quelque chose de mal dedans est s'il vous plaît entrez une adresse e-mail valide, quelque chose comme ça. 60 00:05:53,210 --> 00:05:58,670 Maintenant, lorsque la valeur change, ainsi de suite, nous voulons faire quelque chose, mais pour l'instant je 61 00:05:58,670 --> 00:06:04,790 ne ferai rien ici, fournissez simplement une fonction vide afin que nous n'obtenions pas d'erreur et la valeur initiale que 62 00:06:04,790 --> 00:06:08,260 je veux afficher ici, eh bien c'est juste une chaîne 63 00:06:08,270 --> 00:06:12,530 vide à la fin parce que je ne veux pas fournir d'autre valeur initiale. 64 00:06:12,530 --> 00:06:17,420 Maintenant, bien sûr, ce n'est pas la seule entrée, donc je vais répéter cela parce que j'ai également 65 00:06:17,900 --> 00:06:26,810 besoin d'une entrée de mot de passe ici avec une étiquette de mot de passe et le type de clavier ici devrait être par défaut parce que je veux avoir le mot-clé texte 66 00:06:26,810 --> 00:06:27,500 normal mais 67 00:06:27,500 --> 00:06:31,490 je veux obscurcir l'entrée afin que nous ne puissions pas la voir et cela 68 00:06:31,490 --> 00:06:34,630 peut être fait en ajoutant une entrée de texte sécurisée ici. 69 00:06:34,640 --> 00:06:38,250 Ce n'est bien sûr pas un accessoire pris en charge par mon composant 70 00:06:38,330 --> 00:06:44,000 personnalisé, mais gardez à l'esprit que dans ce composant, nous transmettons tous les accessoires à la saisie de texte intégrée et 71 00:06:44,000 --> 00:06:48,710 la saisie de texte intégrée prend en charge cette propriété d'entrée de texte sécurisée ici, c'est pourquoi 72 00:06:48,710 --> 00:06:51,050 je peut définir cela. Ici, la validation 73 00:06:51,100 --> 00:06:55,370 ne doit pas non plus vérifier qu'il s'agit d'une adresse e-mail, mais assurez-vous 74 00:06:55,370 --> 00:07:02,450 que nous avons une longueur minimale de disons cinq caractères. La capitalisation automatique peut également être désactivée ici, le message d'erreur 75 00:07:02,450 --> 00:07:08,660 serait s'il vous plaît entrez un mot de passe valide et avec cela, je viens de voir qu'ici, bien sûr, j'ai une 76 00:07:08,660 --> 00:07:14,510 faute de frappe, qui devrait être l'adresse e-mail, ici le mot de passe et je laisse cela ici tel quel. 77 00:07:17,440 --> 00:07:19,650 Maintenant, pour pouvoir soumettre cela, 78 00:07:19,660 --> 00:07:29,020 j'ai également besoin d'un bouton, alors ici, je vais importer le bouton de React Native et ajouter deux boutons réellement dans la carte 79 00:07:29,020 --> 00:07:29,790 et 80 00:07:31,000 --> 00:07:38,370 donc également à l'intérieur de la vue de défilement. Le premier bouton a un titre de connexion, disons 81 00:07:38,370 --> 00:07:44,940 et nous le changerons plus tard pour être soit de connexion soit d'inscription en fonction du mode dans 82 00:07:44,940 --> 00:07:52,570 lequel nous sommes et la couleur est importée ou est ajoutée à l'aide de la constante de couleurs que vous devriez 83 00:07:52,670 --> 00:08:01,190 importer et sur ces couleurs constantes, je vais utiliser des couleurs. primaire et onPress pour le moment peuvent simplement pointer vers une fonction vide et 84 00:08:01,190 --> 00:08:06,320 je le répéterai parce que je veux avoir un deuxième bouton où je dis passer pour vous 85 00:08:06,320 --> 00:08:13,550 inscrire et bien sûr, cela dira aussi plus tard pour passer à la connexion si nous sommes en signe mode haut et là, 86 00:08:13,550 --> 00:08:18,720 nous pouvons peut-être utiliser notre couleur d'accent. Si nous enregistrons maintenant cela, nous devrions avoir un écran 87 00:08:18,720 --> 00:08:21,870 de connexion de base, le voici, il ne ressemble pas à ce qu'il 88 00:08:21,930 --> 00:08:23,580 devrait être, mais nous avons nos entrées 89 00:08:23,970 --> 00:08:26,970 ici, nous avons ces deux boutons, également sur Android une fois le 90 00:08:26,970 --> 00:08:28,040 chargement terminé, ici 91 00:08:28,180 --> 00:08:31,360 nous allons et maintenant, bien sûr, je voudrais styliser cela de manière appropriée. 92 00:08:31,380 --> 00:08:33,570 Descendons donc à la feuille de 93 00:08:33,570 --> 00:08:40,550 style et notez que j'ai deux styles à la fin assignés - écran et conteneur d'authentification, donc ici dans les styles que 94 00:08:40,550 --> 00:08:43,920 je veux ajouter à la fois écran et conteneur d'authentification, 95 00:08:43,920 --> 00:08:50,390 ce sont les deux styles avec lesquels je prévois travailler. Maintenant, pour l'écran, je vais définir flex sur 96 00:08:50,390 --> 00:08:57,050 un, puis justifier mon contenu au centre et aligner les éléments au centre pour avoir un centrage 97 00:08:57,110 --> 00:08:58,730 à la fois 98 00:08:59,120 --> 00:09:04,090 sur l'axe vertical et horizontal et sur le conteneur d'authentification, je veux définir 99 00:09:04,100 --> 00:09:10,100 une largeur disons 80% pour ne pas prendre toute la largeur disponible et une largeur 100 00:09:10,100 --> 00:09:22,710 maximale de 400 pixels au cas où 80% serait plus que cela, nous le limitons à 400 pixels et peut-être une hauteur de disons 50% mais une hauteur maximale de également 400. 101 00:09:22,800 --> 00:09:24,150 Voyons à quoi ça ressemble. Si 102 00:09:24,150 --> 00:09:25,950 nous sauvegardons cela, c'est ce 103 00:09:26,000 --> 00:09:27,230 que je reçois ici. 104 00:09:27,230 --> 00:09:32,960 Maintenant, je peux y faire défiler car j'ai configuré une telle vue de défilement et en fait ce n'est pas le comportement 105 00:09:32,960 --> 00:09:33,910 que je veux. 106 00:09:34,160 --> 00:09:35,570 Je ne définirai pas de 107 00:09:35,570 --> 00:09:39,620 hauteur ici, je vais simplement ajouter une hauteur maximale afin que celle-ci soit 108 00:09:39,620 --> 00:09:44,500 plafonnée à une certaine hauteur, mais par défaut, cela prend autant de hauteur que nécessaire et, par 109 00:09:44,540 --> 00:09:49,820 conséquent, j'ajoute plutôt du rembourrage pour que nous en ayons l'espace autour des entrées et il ne se 110 00:09:49,820 --> 00:09:50,440 trouve 111 00:09:50,450 --> 00:09:56,420 pas sur le bord de la carte, donc cela semble beaucoup plus agréable et voyons à quoi cela ressemble sur Android, 112 00:09:56,440 --> 00:09:57,870 oui, cela semble généralement OK. 113 00:09:58,690 --> 00:10:00,730 Si j'appuie là-dessus, cela défile également vers 114 00:10:00,730 --> 00:10:06,860 le haut, de sorte que la vue d'évitement du clavier fait son travail, mais bien sûr, j'obtiens toujours une erreur ici que 115 00:10:07,040 --> 00:10:11,190 le changement d'entrée provoque une erreur parce que oui, j'ai ajouté un changement de valeur 116 00:10:11,200 --> 00:10:15,070 ici, cela devrait être sur le changement d'entrée, pas sur le changement de valeur. 117 00:10:15,070 --> 00:10:18,370 C'est donc une petite solution mais nous allons dans la bonne direction. 118 00:10:18,430 --> 00:10:20,740 Maintenant, je n'ai pas fini, je veux avoir 119 00:10:20,740 --> 00:10:24,950 un titre d'en-tête et que diriez-vous d'une couleur de fond ici, ce serait aussi bien probablement. 120 00:10:25,080 --> 00:10:32,680 Donc pour cela, en ce qui concerne le titre de l'en-tête, bien sûr, nous pouvons ajouter AuthScreen. navigationOptions et travailler avec des options statiques pour l'instant 121 00:10:32,680 --> 00:10:39,070 parce que je veux juste ajouter un titre d'en-tête ici et le définir pour s'il 122 00:10:41,480 --> 00:10:46,700 vous plaît authentifier ou simplement authentifier, quelque chose comme ça et pour 123 00:10:46,700 --> 00:10:48,090 l'arrière-plan, bien 124 00:10:48,110 --> 00:10:53,680 sûr, nous pourrions donner notre avis ici qui contient tout un couleur d'arrière-plan 125 00:10:54,380 --> 00:11:01,280 mais je veux en fait vous montrer un nouveau composant que nous n'avons pas utilisé jusqu'à 126 00:11:01,280 --> 00:11:09,480 présent et pour cela, nous devons installer un tout nouveau package et c'est le package expo-linear-gradient que vous avez 127 00:11:09,480 --> 00:11:12,480 installé avec npm install --save gradient expo-linéaire. 128 00:11:12,510 --> 00:11:16,190 Ceci est un package qui nous permet d'ajouter 129 00:11:16,200 --> 00:11:18,270 facilement un dégradé linéaire, 130 00:11:18,570 --> 00:11:25,080 donc de manière très simple et après qu'il a été installé, il vous suffit 131 00:11:25,800 --> 00:11:32,760 d'importer depuis expo-linear-gradient et vous importez un composant que cela expose, le composante de gradient linéaire. 132 00:11:32,770 --> 00:11:39,730 Maintenant, c'est un composant que vous pouvez utiliser dans votre page et ici je vais l'utiliser à l'intérieur du clavier 133 00:11:39,730 --> 00:11:47,770 en évitant la vue, le dégradé linéaire comme celui-ci et l'enrouler autour de tous les autres contenus comme celui-ci ici et maintenant vous pouvez 134 00:11:47,770 --> 00:11:48,600 configurer cela 135 00:11:49,240 --> 00:11:56,060 et là, je vous voulez vous assurer qu'il a une clé de couleurs qui nous permet de définir les couleurs 136 00:11:56,200 --> 00:12:02,080 entre les transitions, car un dégradé est simplement un dégradé entre plusieurs couleurs, au moins deux, mais 137 00:12:02,080 --> 00:12:08,040 vous pouvez en ajouter plus et là, vous pouvez maintenant simplement ajouter des couleurs, comme rouge ou 138 00:12:08,230 --> 00:12:16,510 en ajoutant les codes hexadécimaux et je veux faire la transition entre #ffedff et disons un autre code hexadécimal, # ffe3ff et bien sûr, 139 00:12:16,510 --> 00:12:19,020 vous pouvez expérimenter avec différentes couleurs ici. 140 00:12:19,030 --> 00:12:26,860 Maintenant, nous devons également ajouter un style ici et je nommerai ce dégradé de styles que nous pouvons maintenant ajouter ici et 141 00:12:28,330 --> 00:12:36,040 ce dégradé prendra une largeur de 100% et une hauteur de 100%, donc il prendra toute la largeur et la hauteur qu'il 142 00:12:36,040 --> 00:12:40,560 peut être obtenu, voici donc à quoi cela ressemble mais maintenant nous avons 143 00:12:40,560 --> 00:12:41,890 un problème, bien 144 00:12:41,940 --> 00:12:46,300 sûr notre contenu n'est plus centré. Pour garantir que c'est le 145 00:12:46,440 --> 00:12:52,410 cas, nous devons maintenant ajouter un contenu justifié et aligner à nouveau les éléments et donc 146 00:12:52,410 --> 00:12:53,010 ici 147 00:12:53,010 --> 00:12:55,880 sur l'écran environnant, nous pouvons nous en débarrasser. 148 00:12:55,960 --> 00:12:57,490 Maintenant, nous avons le même aspect qu'auparavant, 149 00:12:57,820 --> 00:13:01,930 nous pouvons donc évidemment aussi y parvenir en ne réglant pas la largeur et la hauteur mais en flexant simplement une. 150 00:13:02,200 --> 00:13:07,210 Alors maintenant, avec cette configuration ici et il est important que l'écran n'essaie pas de centrer car 151 00:13:07,210 --> 00:13:08,610 sinon le dégradé sera 152 00:13:08,620 --> 00:13:15,510 centré mais avec cette configuration, nous avons maintenant ce look avec ce joli dégradé et pour voir notre titre d'en-tête ici, nous venons 153 00:13:15,510 --> 00:13:21,960 de devez vous assurer que dans la configuration de la navigation, dans le navigateur de la boutique, nous attribuons nos accessoires de 154 00:13:21,960 --> 00:13:23,850 navigation par défaut au navigateur d'authentification. 155 00:13:23,970 --> 00:13:29,670 J'ajouterai donc le deuxième argument pour créer un navigateur de pile et les options de navigation par défaut pointent simplement sur 156 00:13:29,670 --> 00:13:34,980 les options de navigation par défaut qui définissent la couleur de l'en-tête, la couleur du titre de l'en-tête, etc. 157 00:13:39,730 --> 00:13:45,190 Bien sûr, assurez-vous que vous n'avez pas de faute de frappe ici dans les options de navigation de l'écran d'authentification comme je 158 00:13:45,190 --> 00:13:46,480 le fais dans l'écran d'authentification. 159 00:13:46,480 --> 00:13:50,950 Donc, avec cela corrigé, c'est la configuration que nous avons ici, bien sûr, vous 160 00:13:50,950 --> 00:13:54,830 pouvez expérimenter avec les couleurs et utiliser différentes couleurs si vous préférez, 161 00:13:55,060 --> 00:14:01,480 je suis content de cela et maintenant la seule chose que je veux corriger ici est mon style pour les boutons, 162 00:14:01,480 --> 00:14:09,650 un certain espacement autour d'eux serait bien et cela peut facilement être ajouté en enveloppant les boutons dans les vues ici, les deux boutons en fait. 163 00:14:12,500 --> 00:14:22,640 Je vais donc faire cela ici et maintenant donner à chaque vue un style ici, peut-être un conteneur de boutons de styles, faire cela sur la première vue et sur la deuxième vue et maintenant 164 00:14:22,760 --> 00:14:24,980 nous pouvons donner à ce conteneur de boutons 165 00:14:24,980 --> 00:14:29,500 un style là-bas dans la feuille de style et ici nous peut définir une marge 166 00:14:29,750 --> 00:14:35,930 supérieure par exemple de 10 pour vous assurer que chaque bouton a une petite marge vers le haut afin que les 167 00:14:35,930 --> 00:14:40,760 boutons ne soient pas assis les uns à côté des autres, ce qui, je pense, aiderait 168 00:14:40,790 --> 00:14:41,900 vraiment nos boutons. 169 00:14:41,900 --> 00:14:43,350 Donc ça a l'air bien 170 00:14:43,340 --> 00:14:45,280 sur iOS, vérifions-le aussi sur Android, oui 171 00:14:45,290 --> 00:14:46,910 ça n'a pas l'air trop mal. 172 00:14:47,810 --> 00:14:53,090 Donc, avec cela, nous avons cette configuration de base, maintenant assurons-nous que cela fait aussi quelque chose d'utile et que nous 173 00:14:53,090 --> 00:14:55,160 essayons réellement de nous connecter avec cela.