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
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
s'inscrire et donc ici dans l'écran d'authentification, je vais importer
réagir de réagir et je vais aussi importer certaines choses de
React Native parce qu'à partir de là, de React Native, je veux avoir la vue de défilement parce que nous
allons construire un formulaire et je veux assurez-vous que les utilisateurs de toutes les tailles d'appareils
peuvent interagir avec lui.
Je vais ajouter une feuille de style ici et ça devrait être le cas pour le moment, nous pouvons
toujours en ajouter plus si nous en avons besoin de plus.
Nous pouvons également déjà inclure une vue et le clavier en évitant la vue, je suppose pour nous assurer que
toutes les entrées sont toujours accessibles.
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
nous avons construit dans la section formulaires que je peux trouver dans le dossier UI des composants.
Assurez-vous donc de regarder cette section pour savoir ce que fait ce composant et
comment gérer un formulaire avec.
Avec cela, nous pouvons créer ici le composant d'écran d'authentification qui reçoit les accessoires et nous pouvons également créer
cet objet de styles avec la feuille de style, la
méthode de création là-bas et bien sûr exporter l'écran d'authentification, comme ceci.
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
si nous ne sommes pas connectés?
C'est quelque chose que nous allons affiner tout au long de ce module, mais pour commencer, nous pouvons aller
dans le navigateur et nous assurer que lorsque l'application se lance, nous voyons cet écran d'authentification et pour cela, nous pouvons
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
ce cas d'utilisation de l'authentification et que la fonction de création de navigateur de commutateur qui nous aide
là-bas, donc il crée un tel navigateur de commutateur. La particularité de ce navigateur est qu'il affiche toujours
exactement un écran et que vous ne pouvez pas revenir à un autre écran si vous accédez ensuite à un autre.
Donc, revenir en arrière n'est pas explicitement autorisé, ce qui est exactement ce que nous voulons, car vous ne
devriez pas pouvoir revenir à l'écran de connexion si vous venez de vous connecter.
Donc donc ici au bas du fichier, je vais créer un nouveau navigateur, peut-être mon navigateur principal, le
nom est totalement à vous bien sûr, avec create switch navigateur et comme précédemment, ce navigateur prend un argument où
nous configurons il, donc un objet où on le configure et là, je veux lier mon écran d'authentification et
bien sûr ma pile de boutique par la suite. Maintenant, pour avoir un bel en-tête, je vais
é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
mapper l'écran d'authentification sur lequel je viens de commencer à travailler et pour
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
l'utilisateur comme
ceci et avec cette importation ajoutée, si nous descendons, nous mappons ceci ici à l'authentification dans le navigateur d'authentification et le
navigateur d'authentification est ensuite mappé à l'authentification ici dans le navigateur de commutateur et La boutique est bien sûr mappée au
navigateur de la boutique et maintenant c'est le navigateur principal que nous encapsulons avec le conteneur
de création d'application et donc avec cela si nous l'enregistrons, nous rendrons en fait l'écran d'authentification
comme le premier écran
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
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
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
bien sûr, cela est totalement facultatif mais ici, je vais ajouter ici,
je vais ajouter la carte et dans la carte, nous pouvons ajouter la vue de défilement afin que nous puissions
faire défiler à l'intérieur de cette carte, bien sûr, vous pouvez également ajouter la vue
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
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
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
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
que nous avons dans notre carte, nous pouvons commencer à ajouter les entrées, l'entrée personnalisée que nous
avons construite plus tôt dans le cours. Par exemple ici, une entrée avec l'ID e-mail et une
é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
charge à la fois sur iOS et Android.
Cela devrait également être obligatoire et je veux utiliser le validateur d'e-mail, ce sont deux des fonctionnalités de
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
la mettre à zéro car capitalisée dans le L'adresse e-mail n'est vraiment pas utile et le
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.
Maintenant, lorsque la valeur change, ainsi de suite, nous voulons faire quelque chose, mais pour l'instant je
ne ferai rien ici, fournissez simplement une fonction vide afin que nous n'obtenions pas d'erreur et la valeur initiale que
je veux afficher ici, eh bien c'est juste une chaîne
vide à la fin parce que je ne veux pas fournir d'autre valeur initiale.
Maintenant, bien sûr, ce n'est pas la seule entrée, donc je vais répéter cela parce que j'ai également
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
normal mais
je veux obscurcir l'entrée afin que nous ne puissions pas la voir et cela
peut être fait en ajoutant une entrée de texte sécurisée ici.
Ce n'est bien sûr pas un accessoire pris en charge par mon composant
personnalisé, mais gardez à l'esprit que dans ce composant, nous transmettons tous les accessoires à la saisie de texte intégrée et
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
je peut définir cela. Ici, la validation
ne doit pas non plus vérifier qu'il s'agit d'une adresse e-mail, mais assurez-vous
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
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
faute de frappe, qui devrait être l'adresse e-mail, ici le mot de passe et je laisse cela ici tel quel.
Maintenant, pour pouvoir soumettre cela,
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
et
donc également à l'intérieur de la vue de défilement. Le premier bouton a un titre de connexion, disons
et nous le changerons plus tard pour être soit de connexion soit d'inscription en fonction du mode dans
lequel nous sommes et la couleur est importée ou est ajoutée à l'aide de la constante de couleurs que vous devriez
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
je le répéterai parce que je veux avoir un deuxième bouton où je dis passer pour vous
inscrire et bien sûr, cela dira aussi plus tard pour passer à la connexion si nous sommes en signe mode haut et là,
nous pouvons peut-être utiliser notre couleur d'accent. Si nous enregistrons maintenant cela, nous devrions avoir un écran
de connexion de base, le voici, il ne ressemble pas à ce qu'il
devrait être, mais nous avons nos entrées
ici, nous avons ces deux boutons, également sur Android une fois le
chargement terminé, ici
nous allons et maintenant, bien sûr, je voudrais styliser cela de manière appropriée.
Descendons donc à la feuille de
style et notez que j'ai deux styles à la fin assignés - écran et conteneur d'authentification, donc ici dans les styles que
je veux ajouter à la fois écran et conteneur d'authentification,
ce sont les deux styles avec lesquels je prévois travailler. Maintenant, pour l'écran, je vais définir flex sur
un, puis justifier mon contenu au centre et aligner les éléments au centre pour avoir un centrage
à la fois
sur l'axe vertical et horizontal et sur le conteneur d'authentification, je veux définir
une largeur disons 80% pour ne pas prendre toute la largeur disponible et une largeur
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.
Voyons à quoi ça ressemble. Si
nous sauvegardons cela, c'est ce
que je reçois ici.
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
que je veux.
Je ne définirai pas de
hauteur ici, je vais simplement ajouter une hauteur maximale afin que celle-ci soit
plafonnée à une certaine hauteur, mais par défaut, cela prend autant de hauteur que nécessaire et, par
conséquent, j'ajoute plutôt du rembourrage pour que nous en ayons l'espace autour des entrées et il ne se
trouve
pas sur le bord de la carte, donc cela semble beaucoup plus agréable et voyons à quoi cela ressemble sur Android,
oui, cela semble généralement OK.
Si j'appuie là-dessus, cela défile également vers
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
le changement d'entrée provoque une erreur parce que oui, j'ai ajouté un changement de valeur
ici, cela devrait être sur le changement d'entrée, pas sur le changement de valeur.
C'est donc une petite solution mais nous allons dans la bonne direction.
Maintenant, je n'ai pas fini, je veux avoir
un titre d'en-tête et que diriez-vous d'une couleur de fond ici, ce serait aussi bien probablement.
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
parce que je veux juste ajouter un titre d'en-tête ici et le définir pour s'il
vous plaît authentifier ou simplement authentifier, quelque chose comme ça et pour
l'arrière-plan, bien
sûr, nous pourrions donner notre avis ici qui contient tout un couleur d'arrière-plan
mais je veux en fait vous montrer un nouveau composant que nous n'avons pas utilisé jusqu'à
présent et pour cela, nous devons installer un tout nouveau package et c'est le package expo-linear-gradient que vous avez
installé avec npm install --save gradient expo-linéaire.
Ceci est un package qui nous permet d'ajouter
facilement un dégradé linéaire,
donc de manière très simple et après qu'il a été installé, il vous suffit
d'importer depuis expo-linear-gradient et vous importez un composant que cela expose, le composante de gradient linéaire.
Maintenant, c'est un composant que vous pouvez utiliser dans votre page et ici je vais l'utiliser à l'intérieur du clavier
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
configurer cela
et là, je vous voulez vous assurer qu'il a une clé de couleurs qui nous permet de définir les couleurs
entre les transitions, car un dégradé est simplement un dégradé entre plusieurs couleurs, au moins deux, mais
vous pouvez en ajouter plus et là, vous pouvez maintenant simplement ajouter des couleurs, comme rouge ou
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,
vous pouvez expérimenter avec différentes couleurs ici.
Maintenant, nous devons également ajouter un style ici et je nommerai ce dégradé de styles que nous pouvons maintenant ajouter ici et
ce dégradé prendra une largeur de 100% et une hauteur de 100%, donc il prendra toute la largeur et la hauteur qu'il
peut être obtenu, voici donc à quoi cela ressemble mais maintenant nous avons
un problème, bien
sûr notre contenu n'est plus centré. Pour garantir que c'est le
cas, nous devons maintenant ajouter un contenu justifié et aligner à nouveau les éléments et donc
ici
sur l'écran environnant, nous pouvons nous en débarrasser.
Maintenant, nous avons le même aspect qu'auparavant,
nous pouvons donc évidemment aussi y parvenir en ne réglant pas la largeur et la hauteur mais en flexant simplement une.
Alors maintenant, avec cette configuration ici et il est important que l'écran n'essaie pas de centrer car
sinon le dégradé sera
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
de devez vous assurer que dans la configuration de la navigation, dans le navigateur de la boutique, nous attribuons nos accessoires de
navigation par défaut au navigateur d'authentification.
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
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.
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
le fais dans l'écran d'authentification.
Donc, avec cela corrigé, c'est la configuration que nous avons ici, bien sûr, vous
pouvez expérimenter avec les couleurs et utiliser différentes couleurs si vous préférez,
je suis content de cela et maintenant la seule chose que je veux corriger ici est mon style pour les boutons,
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.
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
nous pouvons donner à ce conteneur de boutons
un style là-bas dans la feuille de style et ici nous peut définir une marge
supérieure par exemple de 10 pour vous assurer que chaque bouton a une petite marge vers le haut afin que les
boutons ne soient pas assis les uns à côté des autres, ce qui, je pense, aiderait
vraiment nos boutons.
Donc ça a l'air bien
sur iOS, vérifions-le aussi sur Android, oui
ça n'a pas l'air trop mal.
Donc, avec cela, nous avons cette configuration de base, maintenant assurons-nous que cela fait aussi quelque chose d'utile et que nous
essayons réellement de nous connecter avec cela.