1
00:00:02,150 --> 00:00:09,140
Quindi iniziamo con l'implementazione dell'autenticazione e un passo molto importante verso quello è quello di aggiungere una nuova schermata,

2
00:00:09,140 --> 00:00:16,370
la schermata di autenticazione che è la schermata che dovrebbe presentare un login o un modulo di registrazione che l'utente

3
00:00:16,370 --> 00:00:19,910
può usare per accedere o registrarsi e quindi qui

4
00:00:20,130 --> 00:00:24,080
nella schermata di autenticazione, importerò reazioni da reazioni e importerò anche

5
00:00:24,260 --> 00:00:31,070
alcune cose da React Native perché da lì, da React Native, voglio avere la vista di scorrimento perché

6
00:00:31,070 --> 00:00:36,740
costruiremo un modulo e voglio assicurarsi che gli utenti di tutte le dimensioni del dispositivo

7
00:00:36,740 --> 00:00:38,420
possano interagire con esso.

8
00:00:38,480 --> 00:00:42,290
Aggiungerò un foglio di stile qui e dovrebbe essere quello per ora, possiamo

9
00:00:42,290 --> 00:00:44,690
sempre aggiungere altro se ne abbiamo bisogno.

10
00:00:44,960 --> 00:00:50,990
Possiamo anche includere già una vista e la tastiera che evita la vista immagino che tutti

11
00:00:51,050 --> 00:00:52,970
gli input siano sempre raggiungibili.

12
00:00:52,970 --> 00:00:58,160
Ora parlando di input, ovviamente aggiungeremo un modulo e quindi riutilizzerò il componente di input che abbiamo

13
00:00:58,160 --> 00:01:02,630
creato nella sezione dei moduli che posso trovare nella cartella UI dei componenti.

14
00:01:02,720 --> 00:01:07,670
Quindi assicurati di guardare questa sezione per sapere cosa fa questo componente e come possiamo

15
00:01:07,670 --> 00:01:09,620
gestire un modulo con esso.

16
00:01:09,620 --> 00:01:17,650
Con ciò, possiamo creare qui il componente della schermata di autenticazione che riceve oggetti di scena e possiamo anche creare

17
00:01:17,650 --> 00:01:22,140
quell'oggetto di stile con il foglio di stile, il metodo

18
00:01:22,150 --> 00:01:27,510
di creazione lì e, naturalmente, esportare la schermata di autenticazione, in questo modo.

19
00:01:27,540 --> 00:01:33,150
Ora ovviamente la domanda ora è anche, come possiamo presentare questa schermata di autenticazione? Come possiamo assicurarci di vederlo se

20
00:01:33,150 --> 00:01:35,520
non abbiamo effettuato l'accesso?

21
00:01:35,520 --> 00:01:40,620
Questo è qualcosa che perfezioneremo in questo modulo, ma per iniziare, possiamo andare al navigatore e

22
00:01:40,620 --> 00:01:46,200
assicurarci che quando l'app si avvia, vediamo quella schermata di autenticazione e per questo possiamo usare un nuovo

23
00:01:46,200 --> 00:01:51,930
navigatore speciale che non abbiamo usato prima del quale è stato appositamente progettato, si potrebbe quasi dire per questo

24
00:01:51,930 --> 00:01:56,950
caso d'uso di autenticazione e che la funzione di creazione del navigatore di switch ci aiuta

25
00:01:56,970 --> 00:02:02,550
lì, quindi crea un tale navigatore di switch. La particolarità di questo navigatore è che

26
00:02:02,550 --> 00:02:08,160
mostra sempre esattamente una schermata e non puoi tornare a un'altra schermata se poi navighi in un'altra.

27
00:02:08,160 --> 00:02:13,710
Quindi tornare indietro non è esplicitamente consentito, il che è esattamente quello che vogliamo perché non dovresti essere

28
00:02:13,890 --> 00:02:18,040
in grado di tornare alla schermata di accesso se hai effettuato solo l'accesso.

29
00:02:18,090 --> 00:02:24,750
Quindi quindi qui in fondo al file, creerò un nuovo navigatore, forse il mio navigatore principale, il nome

30
00:02:24,750 --> 00:02:31,770
dipende totalmente da te ovviamente, con create switch navigator e proprio come prima, questo navigator prende un argomento in cui

31
00:02:31,920 --> 00:02:38,670
configuriamo esso, quindi un oggetto in cui lo configuriamo e lì, voglio associare la mia schermata di autorizzazione e

32
00:02:38,880 --> 00:02:46,260
ovviamente anche la mia pila di negozi in seguito. Ora per avere una bella intestazione, creerò anche

33
00:02:46,260 --> 00:02:55,560
qui il mio navigatore di autenticazione che è un navigatore di stack creato con Crea stack di navigatore e lì, mapperò semplicemente

34
00:02:55,560 --> 00:03:00,430
la schermata di autenticazione su cui ho appena iniziato a lavorare e

35
00:03:00,450 --> 00:03:09,210
per questo ovviamente, è necessario importarlo, quindi in quel ShopNavigator. js file, possiamo importare la schermata di autorizzazione dalla schermata di autorizzazione

36
00:03:09,210 --> 00:03:10,060
dell'utente in

37
00:03:10,180 --> 00:03:16,880
questo modo e con tale importazione aggiunta, se scendiamo, la mappiamo qui su auth nel browser di autenticazione e

38
00:03:16,880 --> 00:03:23,640
il navigatore di autenticazione viene quindi mappato su auth qui nel navigatore di switch e Il negozio è ovviamente mappato

39
00:03:23,640 --> 00:03:28,770
al navigatore del negozio e ora è il navigatore principale che avvolgiamo con creare un

40
00:03:28,770 --> 00:03:34,110
contenitore di app e quindi con questo, se lo salviamo, renderemo effettivamente la schermata di

41
00:03:34,140 --> 00:03:35,820
autenticazione come la prima

42
00:03:36,060 --> 00:03:43,980
schermata che in questo momento non renderà valido jsx, quindi riceviamo un errore, ma ovviamente possiamo lavorarci su perché l'obiettivo ora è quello

43
00:03:43,980 --> 00:03:53,880
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

44
00:03:53,880 --> 00:04:02,750
il componente della scheda dalla scheda UI dei componenti per avere questa bella scheda guardare qui e avere i miei input lì

45
00:04:02,750 --> 00:04:07,400
e ovviamente questo è totalmente opzionale ma qui, aggiungerò qui,

46
00:04:07,400 --> 00:04:14,030
aggiungerò la scheda e nella scheda, possiamo aggiungere la vista di scorrimento in modo da poter

47
00:04:14,030 --> 00:04:19,100
scorrere all'interno di quella carta, ovviamente puoi anche aggiungere la vista di

48
00:04:19,100 --> 00:04:27,650
scorrimento intorno alla carta in modo da poter scorrere sul ma lo farò in questo modo, aggiungerò anche il mio stile

49
00:04:27,650 --> 00:04:36,540
qui alla scheda che nominerò forse contenitore auth, il nome dipende totalmente da te e avvolgerò anche una vista intorno a tutto

50
00:04:36,540 --> 00:04:46,880
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

51
00:04:46,940 --> 00:04:56,730
comportamento di padding e quindi questo offset verticale della tastiera spento diciamo 50. Quindi ora all'interno di quella vista di scorrimento che

52
00:04:56,730 --> 00:05:04,720
abbiamo nella nostra scheda, possiamo iniziare ad aggiungere gli input, l'input personalizzato che abbiamo

53
00:05:04,720 --> 00:05:11,590
creato in precedenza nel corso. Ad esempio qui, un input con l'ID e-mail e

54
00:05:11,590 --> 00:05:19,780
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

55
00:05:19,810 --> 00:05:22,750
sia su iOS che su Android.

56
00:05:22,750 --> 00:05:28,980
Dovrebbe anche essere richiesto e voglio usare il validatore e-mail, queste sono due delle

57
00:05:28,990 --> 00:05:36,540
funzionalità di convalida che ho inserito nell'input in precedenza in questo corso, anche le maiuscole automatiche dovrebbero essere

58
00:05:36,540 --> 00:05:42,630
disattivate quindi non lo imposterò perché maiuscolo l'indirizzo e-mail non è davvero utile

59
00:05:42,630 --> 00:05:52,190
e il messaggio di errore che voglio mostrare se abbiamo qualcosa che non va è inserire un indirizzo e-mail valido, qualcosa del genere.

60
00:05:53,210 --> 00:05:58,670
Ora quando il valore cambia, quindi al cambio di valore, vogliamo fare qualcosa, ma per ora

61
00:05:58,670 --> 00:06:04,790
non farò nulla qui, basta fornire una funzione vuota in modo da non ricevere un errore e il

62
00:06:04,790 --> 00:06:08,260
valore iniziale che voglio mostrare qui, beh, alla fine

63
00:06:08,270 --> 00:06:12,530
è solo una stringa vuota perché non voglio fornire nessun altro valore iniziale.

64
00:06:12,530 --> 00:06:17,420
Ora, ovviamente, non è l'unico input, quindi lo ripeterò perché ho anche bisogno di

65
00:06:17,900 --> 00:06:26,810
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

66
00:06:26,810 --> 00:06:27,500
ma

67
00:06:27,500 --> 00:06:31,490
voglio oscurare l'input in modo che non possiamo vederlo e ciò può

68
00:06:31,490 --> 00:06:34,630
essere fatto aggiungendo per inserire un testo sicuro qui.

69
00:06:34,640 --> 00:06:38,250
Questo ovviamente non è un supporto supportato dal mio componente personalizzato, ma

70
00:06:38,330 --> 00:06:44,000
tieni presente che in questo componente inoltriamo tutti i puntelli all'input di testo integrato e l'input di testo

71
00:06:44,000 --> 00:06:48,710
integrato supporta questa proprietà di immissione di testo sicura qui, quindi è per questo che

72
00:06:48,710 --> 00:06:51,050
può impostare questo. In questo caso

73
00:06:51,100 --> 00:06:55,370
la convalida non dovrebbe inoltre verificare che si tratti di un indirizzo e-mail,

74
00:06:55,370 --> 00:07:02,450
ma assicurarsi che abbiamo una lunghezza minima di cinque caratteri. Le maiuscole automatiche possono essere disattivate anche qui, il

75
00:07:02,450 --> 00:07:08,660
messaggio di errore sarebbe inserire una password valida e con ciò, ho appena visto che qui ho un

76
00:07:08,660 --> 00:07:14,510
errore di battitura, che dovrebbe essere l'indirizzo e-mail, qui la password e lascerò qui così com'è.

77
00:07:17,440 --> 00:07:19,650
Ora per poter inviare questo,

78
00:07:19,660 --> 00:07:29,020
ho anche bisogno di un pulsante, quindi qui importerò il pulsante da React Native e aggiungerò due pulsanti effettivamente nella

79
00:07:29,020 --> 00:07:29,790
scheda

80
00:07:31,000 --> 00:07:38,370
e quindi anche all'interno della vista di scorrimento. Il primo pulsante ha un titolo di

81
00:07:38,370 --> 00:07:44,940
accesso, diciamo, e in seguito lo cambieremo in accesso o iscrizione a seconda della modalità

82
00:07:44,940 --> 00:07:52,570
in cui ci troviamo e il colore viene importato o aggiunto con l'aiuto della costante di colori

83
00:07:52,670 --> 00:08:01,190
che dovresti importazione e su questi colori costanti, userò Colori. primary e onPress al momento possono semplicemente puntare a una funzione vuota

84
00:08:01,190 --> 00:08:06,320
e lo ripeterò perché voglio avere un secondo pulsante in cui dico switch per

85
00:08:06,320 --> 00:08:13,550
iscriversi e ovviamente questo poi dirà anche switch to login se siamo nel segno modalità su e lì possiamo forse

86
00:08:13,550 --> 00:08:18,720
usare il nostro colore di accento. Se ora lo salviamo, dovremmo avere una schermata di

87
00:08:18,720 --> 00:08:21,870
accesso di base, eccola, non sembra come dovrebbe apparire ma abbiamo

88
00:08:21,930 --> 00:08:23,580
i nostri input qui, abbiamo

89
00:08:23,970 --> 00:08:26,970
questi due pulsanti, anche su Android una volta che questo

90
00:08:26,970 --> 00:08:28,040
è stato caricato,

91
00:08:28,180 --> 00:08:31,360
qui andiamo e ora ovviamente mi piacerebbe modellarlo in modo appropriato.

92
00:08:31,380 --> 00:08:33,570
Quindi passiamo al foglio di stile

93
00:08:33,570 --> 00:08:40,550
e tieni presente che alla fine sono stati assegnati due stili: schermo e contenitore di autenticazione, quindi qui negli stili in cui

94
00:08:40,550 --> 00:08:43,920
voglio aggiungere sia il contenitore di schermo che quello di

95
00:08:43,920 --> 00:08:50,390
autenticazione, questi sono i due stili con cui intendo lavorare. Ora per lo schermo, imposterò flex su

96
00:08:50,390 --> 00:08:57,050
uno e quindi giustificherò il mio contenuto al centro e allineerò gli elementi al centro per

97
00:08:57,110 --> 00:08:58,730
centrare sia l'asse

98
00:08:59,120 --> 00:09:04,090
verticale che quello orizzontale e sul contenitore auth, voglio impostare una

99
00:09:04,100 --> 00:09:10,100
larghezza di diciamo 80% per non prendere l'intera larghezza disponibile e una larghezza massima

100
00:09:10,100 --> 00:09:22,710
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.

101
00:09:22,800 --> 00:09:24,150
Vediamo come appare. Se

102
00:09:24,150 --> 00:09:25,950
lo salviamo, questo è quello

103
00:09:26,000 --> 00:09:27,230
che ottengo qui.

104
00:09:27,230 --> 00:09:32,960
Ora posso scorrere lì perché ho impostato una vista di scorrimento e in realtà non è il comportamento

105
00:09:32,960 --> 00:09:33,910
che desidero.

106
00:09:34,160 --> 00:09:35,570
Qui non imposterò un'altezza,

107
00:09:35,570 --> 00:09:39,620
aggiungerò solo un'altezza massima in modo che questa sia limitata a una

108
00:09:39,620 --> 00:09:44,500
certa altezza, ma per impostazione predefinita prende solo l'altezza necessaria e quindi preferisco invece

109
00:09:44,540 --> 00:09:49,820
aggiungere un po 'di imbottitura in modo da avere un po' spazio attorno agli ingressi e

110
00:09:49,820 --> 00:09:50,440
non

111
00:09:50,450 --> 00:09:56,420
si trova sul bordo della scheda, quindi sembra molto più bello e vediamo come appare su Android, sì,

112
00:09:56,440 --> 00:09:57,870
in genere sembra OK.

113
00:09:58,690 --> 00:10:00,730
Se tocco lì, anche questo scorre

114
00:10:00,730 --> 00:10:06,860
verso l'alto in modo che la tastiera che evita la visualizzazione stia facendo il suo lavoro ma, ovviamente, ricevo ancora un errore

115
00:10:07,040 --> 00:10:11,190
qui che sulla modifica dell'input sta causando un errore perché sì, ho aggiunto sulla modifica

116
00:10:11,200 --> 00:10:15,070
del valore qui, che dovrebbe essere sulla modifica dell'ingresso, non sulla modifica del valore.

117
00:10:15,070 --> 00:10:18,370
Quindi questa è una piccola correzione ma stiamo andando nella giusta direzione.

118
00:10:18,430 --> 00:10:20,740
Ora non ho ancora finito, voglio avere un titolo

119
00:10:20,740 --> 00:10:24,950
di intestazione e che ne dici di un po 'di colore di sfondo qui, che sarebbe anche bello probabilmente.

120
00:10:25,080 --> 00:10:32,680
Quindi, per quanto riguarda ovviamente il titolo dell'intestazione, possiamo aggiungere AuthScreen. navigationOpzioni e lavoro con alcune opzioni statiche

121
00:10:32,680 --> 00:10:39,070
per ora perché voglio solo aggiungere un titolo di intestazione qui e impostarlo per

122
00:10:41,480 --> 00:10:46,700
autenticarti o semplicemente autenticarmi, qualcosa del genere e per lo sfondo,

123
00:10:46,700 --> 00:10:48,090
ovviamente ovviamente

124
00:10:48,110 --> 00:10:53,680
potremmo dare la nostra vista qui che contiene tutto un colore di

125
00:10:54,380 --> 00:11:01,280
sfondo ma in realtà voglio mostrarti un nuovo componente che non abbiamo usato finora e

126
00:11:01,280 --> 00:11:09,480
per questo, dobbiamo installare un pacchetto nuovo di zecca e questo è il pacchetto expo-linear-gradient che hai installato

127
00:11:09,480 --> 00:11:12,480
con npm install --save gradiente expo-lineare.

128
00:11:12,510 --> 00:11:16,190
Questo è un pacchetto che ci consente di

129
00:11:16,200 --> 00:11:18,270
aggiungere facilmente un gradiente

130
00:11:18,570 --> 00:11:25,080
lineare, quindi in un modo molto semplice e dopo che è stato installato, devi

131
00:11:25,800 --> 00:11:32,760
solo importare dal gradiente expo-lineare e importare un componente che questo espone, il componente gradiente lineare.

132
00:11:32,770 --> 00:11:39,730
Ora questo è un componente che puoi usare nella tua pagina e qui lo userò all'interno della tastiera

133
00:11:39,730 --> 00:11:47,770
evitando la vista, il gradiente lineare come questo e lo avvolgerò attorno a tutti gli altri contenuti come questo qui e

134
00:11:47,770 --> 00:11:48,600
ora

135
00:11:49,240 --> 00:11:56,060
puoi configurarlo e lì, io vuoi assicurarti che questo abbia una chiave di colori che ci consenta

136
00:11:56,200 --> 00:12:02,080
di impostare i colori tra di essa dovrebbe transitare perché una sfumatura è semplicemente una

137
00:12:02,080 --> 00:12:08,040
sfumatura tra più colori, almeno due ma puoi aggiungerne altri e lì puoi solo aggiungere

138
00:12:08,230 --> 00:12:16,510
colori, come rosso o aggiungendo i codici esadecimali e voglio passare tra #ffedff e diciamo un altro codice esadecimale, # ffe3ff e

139
00:12:16,510 --> 00:12:19,020
ovviamente puoi sperimentare colori diversi qui.

140
00:12:19,030 --> 00:12:26,860
Ora dobbiamo anche aggiungere uno stile qui e chiamerò questo gradiente di stili che ora possiamo aggiungere qui e

141
00:12:28,330 --> 00:12:36,040
questo gradiente avrà una larghezza del 100% e un'altezza del 100%, quindi prenderà tutta la larghezza e l'altezza può

142
00:12:36,040 --> 00:12:40,560
arrivare, è così che sembra, ma ora abbiamo un problema, ovviamente

143
00:12:40,560 --> 00:12:41,890
il nostro

144
00:12:41,940 --> 00:12:46,300
contenuto non è più centrato. Per garantire che questo

145
00:12:46,440 --> 00:12:52,410
sia il caso, ora dobbiamo aggiungere contenuti giustificati e allineare nuovamente gli elementi

146
00:12:52,410 --> 00:12:53,010
e

147
00:12:53,010 --> 00:12:55,880
quindi qui sullo schermo circostante, possiamo liberarcene.

148
00:12:55,960 --> 00:12:57,490
Ora abbiamo lo stesso aspetto

149
00:12:57,820 --> 00:13:01,930
di prima, ovviamente possiamo quindi raggiungere questo obiettivo non impostando larghezza e altezza ma semplicemente flettendone uno.

150
00:13:02,200 --> 00:13:07,210
Quindi ora con questa configurazione qui ed è importante che lo schermo non tenti di

151
00:13:07,210 --> 00:13:08,610
centrare perché altrimenti

152
00:13:08,620 --> 00:13:15,510
il gradiente sarà centrato ma con questa configurazione, ora abbiamo questo aspetto con questo gradiente gradevole e per vedere il titolo dell'intestazione

153
00:13:15,510 --> 00:13:21,960
qui, dobbiamo solo è necessario assicurarsi che nella configurazione della navigazione, nel navigatore del negozio, assegniamo i nostri oggetti di

154
00:13:21,960 --> 00:13:23,850
scena predefiniti alla navigazione del navigatore.

155
00:13:23,970 --> 00:13:29,670
Quindi aggiungerò il secondo argomento per creare il navigatore dello stack e le opzioni di navigazione predefinite indicano solo le

156
00:13:29,670 --> 00:13:34,980
opzioni di navigazione predefinite che impostano il colore dell'intestazione, il colore del titolo dell'intestazione e così via.

157
00:13:39,730 --> 00:13:45,190
Naturalmente, assicurati di non avere errori di battitura qui nelle opzioni di navigazione della schermata di autenticazione nella schermata di

158
00:13:45,190 --> 00:13:46,480
autenticazione come faccio io.

159
00:13:46,480 --> 00:13:50,950
Quindi, con quello riparato, questa è la configurazione che abbiamo qui, ovviamente puoi

160
00:13:50,950 --> 00:13:54,830
sperimentare i colori e usare colori diversi se preferisci quello, ne

161
00:13:55,060 --> 00:14:01,480
sono felice e ora l'unica cosa rimasta che voglio sistemare qui è il mio stile per i pulsanti, una

162
00:14:01,480 --> 00:14:09,650
certa spaziatura intorno a loro sarebbe piacevole e che può essere facilmente aggiunta avvolgendo i pulsanti nelle viste qui, entrambi i pulsanti in realtà.

163
00:14:12,500 --> 00:14:22,640
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

164
00:14:22,760 --> 00:14:24,980
dare a quel contenitore di pulsanti

165
00:14:24,980 --> 00:14:29,500
uno stile laggiù nel foglio di stile e qui abbiamo può impostare un

166
00:14:29,750 --> 00:14:35,930
margine superiore per esempio di 10 per assicurarsi che ogni pulsante abbia un piccolo margine in alto in modo

167
00:14:35,930 --> 00:14:40,760
che i pulsanti non si trovino direttamente uno accanto all'altro, che penso aiuterebbe davvero

168
00:14:40,790 --> 00:14:41,900
i nostri pulsanti.

169
00:14:41,900 --> 00:14:43,350
Quindi questo sembra buono

170
00:14:43,340 --> 00:14:45,280
su iOS, diamo un'occhiata anche su Android,

171
00:14:45,290 --> 00:14:46,910
sì, questo non sembra troppo male.

172
00:14:47,810 --> 00:14:53,090
Quindi, con quello, abbiamo quella configurazione di base, ora assicuriamoci che anche questo faccia qualcosa di utile e

173
00:14:53,090 --> 00:14:55,160
che proviamo effettivamente ad accedere con quello.