Quindi iniziamo con l'implementazione dell'autenticazione e un passo molto importante verso quello è quello di aggiungere una nuova schermata,
la schermata di autenticazione che è la schermata che dovrebbe presentare un login o un modulo di registrazione che l'utente
può usare per accedere o registrarsi e quindi qui
nella schermata di autenticazione, importerò reazioni da reazioni e importerò anche
alcune cose da React Native perché da lì, da React Native, voglio avere la vista di scorrimento perché
costruiremo un modulo e voglio assicurarsi che gli utenti di tutte le dimensioni del dispositivo
possano interagire con esso.
Aggiungerò un foglio di stile qui e dovrebbe essere quello per ora, possiamo
sempre aggiungere altro se ne abbiamo bisogno.
Possiamo anche includere già una vista e la tastiera che evita la vista immagino che tutti
gli input siano sempre raggiungibili.
Ora parlando di input, ovviamente aggiungeremo un modulo e quindi riutilizzerò il componente di input che abbiamo
creato nella sezione dei moduli che posso trovare nella cartella UI dei componenti.
Quindi assicurati di guardare questa sezione per sapere cosa fa questo componente e come possiamo
gestire un modulo con esso.
Con ciò, possiamo creare qui il componente della schermata di autenticazione che riceve oggetti di scena e possiamo anche creare
quell'oggetto di stile con il foglio di stile, il metodo
di creazione lì e, naturalmente, esportare la schermata di autenticazione, in questo modo.
Ora ovviamente la domanda ora è anche, come possiamo presentare questa schermata di autenticazione? Come possiamo assicurarci di vederlo se
non abbiamo effettuato l'accesso?
Questo è qualcosa che perfezioneremo in questo modulo, ma per iniziare, possiamo andare al navigatore e
assicurarci che quando l'app si avvia, vediamo quella schermata di autenticazione e per questo possiamo usare un nuovo
navigatore speciale che non abbiamo usato prima del quale è stato appositamente progettato, si potrebbe quasi dire per questo
caso d'uso di autenticazione e che la funzione di creazione del navigatore di switch ci aiuta
lì, quindi crea un tale navigatore di switch. La particolarità di questo navigatore è che
mostra sempre esattamente una schermata e non puoi tornare a un'altra schermata se poi navighi in un'altra.
Quindi tornare indietro non è esplicitamente consentito, il che è esattamente quello che vogliamo perché non dovresti essere
in grado di tornare alla schermata di accesso se hai effettuato solo l'accesso.
Quindi quindi qui in fondo al file, creerò un nuovo navigatore, forse il mio navigatore principale, il nome
dipende totalmente da te ovviamente, con create switch navigator e proprio come prima, questo navigator prende un argomento in cui
configuriamo esso, quindi un oggetto in cui lo configuriamo e lì, voglio associare la mia schermata di autorizzazione e
ovviamente anche la mia pila di negozi in seguito. Ora per avere una bella intestazione, creerò anche
qui il mio navigatore di autenticazione che è un navigatore di stack creato con Crea stack di navigatore e lì, mapperò semplicemente
la schermata di autenticazione su cui ho appena iniziato a lavorare e
per questo ovviamente, è necessario importarlo, quindi in quel ShopNavigator. js file, possiamo importare la schermata di autorizzazione dalla schermata di autorizzazione
dell'utente in
questo modo e con tale importazione aggiunta, se scendiamo, la mappiamo qui su auth nel browser di autenticazione e
il navigatore di autenticazione viene quindi mappato su auth qui nel navigatore di switch e Il negozio è ovviamente mappato
al navigatore del negozio e ora è il navigatore principale che avvolgiamo con creare un
contenitore di app e quindi con questo, se lo salviamo, renderemo effettivamente la schermata di
autenticazione come la prima
schermata che in questo momento non renderà valido jsx, quindi riceviamo un errore, ma ovviamente possiamo lavorarci su perché l'obiettivo ora è quello
di rendere questa schermata di autenticazione dove possiamo accedere e fare le nostre cose. Quindi qui, voglio presentare questi input e in realtà importerò anche
il componente della scheda dalla scheda UI dei componenti per avere questa bella scheda guardare qui e avere i miei input lì
e ovviamente questo è totalmente opzionale ma qui, aggiungerò qui,
aggiungerò la scheda e nella scheda, possiamo aggiungere la vista di scorrimento in modo da poter
scorrere all'interno di quella carta, ovviamente puoi anche aggiungere la vista di
scorrimento intorno alla carta in modo da poter scorrere sul ma lo farò in questo modo, aggiungerò anche il mio stile
qui alla scheda che nominerò forse contenitore auth, il nome dipende totalmente da te e avvolgerò anche una vista intorno a tutto
questo come un involucro guarda dove aggiungerò uno stile che chiamerò schermo. In realtà qui possiamo già usare la tastiera evitando la vista immagino con un
comportamento di padding e quindi questo offset verticale della tastiera spento diciamo 50. Quindi ora all'interno di quella vista di scorrimento che
abbiamo nella nostra scheda, possiamo iniziare ad aggiungere gli input, l'input personalizzato che abbiamo
creato in precedenza nel corso. Ad esempio qui, un input con l'ID e-mail e
un'etichetta di e-mail perché lì voglio recuperare l'indirizzo e-mail dell'utente e quindi il tipo di indirizzo e-mail della tastiera supportato
sia su iOS che su Android.
Dovrebbe anche essere richiesto e voglio usare il validatore e-mail, queste sono due delle
funzionalità di convalida che ho inserito nell'input in precedenza in questo corso, anche le maiuscole automatiche dovrebbero essere
disattivate quindi non lo imposterò perché maiuscolo l'indirizzo e-mail non è davvero utile
e il messaggio di errore che voglio mostrare se abbiamo qualcosa che non va è inserire un indirizzo e-mail valido, qualcosa del genere.
Ora quando il valore cambia, quindi al cambio di valore, vogliamo fare qualcosa, ma per ora
non farò nulla qui, basta fornire una funzione vuota in modo da non ricevere un errore e il
valore iniziale che voglio mostrare qui, beh, alla fine
è solo una stringa vuota perché non voglio fornire nessun altro valore iniziale.
Ora, ovviamente, non è l'unico input, quindi lo ripeterò perché ho anche bisogno di
inserire una password qui con un'etichetta di password e il tipo di tastiera qui dovrebbe essere predefinito perché voglio avere la normale parola chiave di testo
ma
voglio oscurare l'input in modo che non possiamo vederlo e ciò può
essere fatto aggiungendo per inserire un testo sicuro qui.
Questo ovviamente non è un supporto supportato dal mio componente personalizzato, ma
tieni presente che in questo componente inoltriamo tutti i puntelli all'input di testo integrato e l'input di testo
integrato supporta questa proprietà di immissione di testo sicura qui, quindi è per questo che
può impostare questo. In questo caso
la convalida non dovrebbe inoltre verificare che si tratti di un indirizzo e-mail,
ma assicurarsi che abbiamo una lunghezza minima di cinque caratteri. Le maiuscole automatiche possono essere disattivate anche qui, il
messaggio di errore sarebbe inserire una password valida e con ciò, ho appena visto che qui ho un
errore di battitura, che dovrebbe essere l'indirizzo e-mail, qui la password e lascerò qui così com'è.
Ora per poter inviare questo,
ho anche bisogno di un pulsante, quindi qui importerò il pulsante da React Native e aggiungerò due pulsanti effettivamente nella
scheda
e quindi anche all'interno della vista di scorrimento. Il primo pulsante ha un titolo di
accesso, diciamo, e in seguito lo cambieremo in accesso o iscrizione a seconda della modalità
in cui ci troviamo e il colore viene importato o aggiunto con l'aiuto della costante di colori
che dovresti importazione e su questi colori costanti, userò Colori. primary e onPress al momento possono semplicemente puntare a una funzione vuota
e lo ripeterò perché voglio avere un secondo pulsante in cui dico switch per
iscriversi e ovviamente questo poi dirà anche switch to login se siamo nel segno modalità su e lì possiamo forse
usare il nostro colore di accento. Se ora lo salviamo, dovremmo avere una schermata di
accesso di base, eccola, non sembra come dovrebbe apparire ma abbiamo
i nostri input qui, abbiamo
questi due pulsanti, anche su Android una volta che questo
è stato caricato,
qui andiamo e ora ovviamente mi piacerebbe modellarlo in modo appropriato.
Quindi passiamo al foglio di stile
e tieni presente che alla fine sono stati assegnati due stili: schermo e contenitore di autenticazione, quindi qui negli stili in cui
voglio aggiungere sia il contenitore di schermo che quello di
autenticazione, questi sono i due stili con cui intendo lavorare. Ora per lo schermo, imposterò flex su
uno e quindi giustificherò il mio contenuto al centro e allineerò gli elementi al centro per
centrare sia l'asse
verticale che quello orizzontale e sul contenitore auth, voglio impostare una
larghezza di diciamo 80% per non prendere l'intera larghezza disponibile e una larghezza massima
effettivamente di 400 pixel nel caso in cui l'80% fosse più di quello, lo limitiamo a 400 pixel e forse un'altezza di diciamo 50% ma un'altezza massima di anche 400.
Vediamo come appare. Se
lo salviamo, questo è quello
che ottengo qui.
Ora posso scorrere lì perché ho impostato una vista di scorrimento e in realtà non è il comportamento
che desidero.
Qui non imposterò un'altezza,
aggiungerò solo un'altezza massima in modo che questa sia limitata a una
certa altezza, ma per impostazione predefinita prende solo l'altezza necessaria e quindi preferisco invece
aggiungere un po 'di imbottitura in modo da avere un po' spazio attorno agli ingressi e
non
si trova sul bordo della scheda, quindi sembra molto più bello e vediamo come appare su Android, sì,
in genere sembra OK.
Se tocco lì, anche questo scorre
verso l'alto in modo che la tastiera che evita la visualizzazione stia facendo il suo lavoro ma, ovviamente, ricevo ancora un errore
qui che sulla modifica dell'input sta causando un errore perché sì, ho aggiunto sulla modifica
del valore qui, che dovrebbe essere sulla modifica dell'ingresso, non sulla modifica del valore.
Quindi questa è una piccola correzione ma stiamo andando nella giusta direzione.
Ora non ho ancora finito, voglio avere un titolo
di intestazione e che ne dici di un po 'di colore di sfondo qui, che sarebbe anche bello probabilmente.
Quindi, per quanto riguarda ovviamente il titolo dell'intestazione, possiamo aggiungere AuthScreen. navigationOpzioni e lavoro con alcune opzioni statiche
per ora perché voglio solo aggiungere un titolo di intestazione qui e impostarlo per
autenticarti o semplicemente autenticarmi, qualcosa del genere e per lo sfondo,
ovviamente ovviamente
potremmo dare la nostra vista qui che contiene tutto un colore di
sfondo ma in realtà voglio mostrarti un nuovo componente che non abbiamo usato finora e
per questo, dobbiamo installare un pacchetto nuovo di zecca e questo è il pacchetto expo-linear-gradient che hai installato
con npm install --save gradiente expo-lineare.
Questo è un pacchetto che ci consente di
aggiungere facilmente un gradiente
lineare, quindi in un modo molto semplice e dopo che è stato installato, devi
solo importare dal gradiente expo-lineare e importare un componente che questo espone, il componente gradiente lineare.
Ora questo è un componente che puoi usare nella tua pagina e qui lo userò all'interno della tastiera
evitando la vista, il gradiente lineare come questo e lo avvolgerò attorno a tutti gli altri contenuti come questo qui e
ora
puoi configurarlo e lì, io vuoi assicurarti che questo abbia una chiave di colori che ci consenta
di impostare i colori tra di essa dovrebbe transitare perché una sfumatura è semplicemente una
sfumatura tra più colori, almeno due ma puoi aggiungerne altri e lì puoi solo aggiungere
colori, come rosso o aggiungendo i codici esadecimali e voglio passare tra #ffedff e diciamo un altro codice esadecimale, # ffe3ff e
ovviamente puoi sperimentare colori diversi qui.
Ora dobbiamo anche aggiungere uno stile qui e chiamerò questo gradiente di stili che ora possiamo aggiungere qui e
questo gradiente avrà una larghezza del 100% e un'altezza del 100%, quindi prenderà tutta la larghezza e l'altezza può
arrivare, è così che sembra, ma ora abbiamo un problema, ovviamente
il nostro
contenuto non è più centrato. Per garantire che questo
sia il caso, ora dobbiamo aggiungere contenuti giustificati e allineare nuovamente gli elementi
e
quindi qui sullo schermo circostante, possiamo liberarcene.
Ora abbiamo lo stesso aspetto
di prima, ovviamente possiamo quindi raggiungere questo obiettivo non impostando larghezza e altezza ma semplicemente flettendone uno.
Quindi ora con questa configurazione qui ed è importante che lo schermo non tenti di
centrare perché altrimenti
il gradiente sarà centrato ma con questa configurazione, ora abbiamo questo aspetto con questo gradiente gradevole e per vedere il titolo dell'intestazione
qui, dobbiamo solo è necessario assicurarsi che nella configurazione della navigazione, nel navigatore del negozio, assegniamo i nostri oggetti di
scena predefiniti alla navigazione del navigatore.
Quindi aggiungerò il secondo argomento per creare il navigatore dello stack e le opzioni di navigazione predefinite indicano solo le
opzioni di navigazione predefinite che impostano il colore dell'intestazione, il colore del titolo dell'intestazione e così via.
Naturalmente, assicurati di non avere errori di battitura qui nelle opzioni di navigazione della schermata di autenticazione nella schermata di
autenticazione come faccio io.
Quindi, con quello riparato, questa è la configurazione che abbiamo qui, ovviamente puoi
sperimentare i colori e usare colori diversi se preferisci quello, ne
sono felice e ora l'unica cosa rimasta che voglio sistemare qui è il mio stile per i pulsanti, una
certa spaziatura intorno a loro sarebbe piacevole e che può essere facilmente aggiunta avvolgendo i pulsanti nelle viste qui, entrambi i pulsanti in realtà.
Quindi lo farò qui e ora darò a ogni vista uno stile qui, forse un contenitore di pulsanti di stili, farlo nella prima vista e nella seconda vista e ora possiamo
dare a quel contenitore di pulsanti
uno stile laggiù nel foglio di stile e qui abbiamo può impostare un
margine superiore per esempio di 10 per assicurarsi che ogni pulsante abbia un piccolo margine in alto in modo
che i pulsanti non si trovino direttamente uno accanto all'altro, che penso aiuterebbe davvero
i nostri pulsanti.
Quindi questo sembra buono
su iOS, diamo un'occhiata anche su Android,
sì, questo non sembra troppo male.
Quindi, con quello, abbiamo quella configurazione di base, ora assicuriamoci che anche questo faccia qualcosa di utile e
che proviamo effettivamente ad accedere con quello.