1
00:00:02,110 --> 00:00:07,000
Quindi, in una nuova schermata del luogo, voglio essere in grado di aggiungere un luogo e

2
00:00:07,030 --> 00:00:12,190
per questo, prima di tutto aggiungerò il componente di input di testo che ovviamente non ha nulla a

3
00:00:12,190 --> 00:00:19,330
che fare con le funzionalità del dispositivo nativo ma ne abbiamo semplicemente bisogno perché in lì, ora possiamo aggiungere un tale input di testo che consente

4
00:00:19,330 --> 00:00:24,350
all'utente di inserire il titolo e quindi, aggiungerò anche un componente di testo qui dove dico titolo, che

5
00:00:24,370 --> 00:00:25,360
dovrebbe fungere da

6
00:00:25,360 --> 00:00:32,450
etichetta per questo input di testo qui e nel complesso, I voglio anche una vista di scorrimento qui per avvolgere tutti i miei contenuti perché

7
00:00:32,520 --> 00:00:37,540
non so quale dispositivo verrà utilizzato dall'utente ma aggiungeremo più di un semplice titolo, aggiungeremo anche un selettore

8
00:00:37,540 --> 00:00:43,120
di immagini e un selettore di luoghi in tutto questo modulo e quindi poter scorrere questa pagina è davvero importante.

9
00:00:43,180 --> 00:00:48,820
Quindi ora abbiamo quell'etichetta del titolo e l'input di testo che gli appartiene che per ora non farà

10
00:00:48,820 --> 00:00:52,450
nulla ma che consentirà presto all'utente di inserire un titolo.

11
00:00:52,540 --> 00:00:55,840
Voglio anche assicurarmi che ovviamente questo modulo possa essere inviato, quindi

12
00:00:56,170 --> 00:01:02,500
quello che voglio anche fare è aggiungere un componente pulsante qui e dopo aver inserito il testo qui, avrò il mio pulsante

13
00:01:02,500 --> 00:01:10,450
dove dico Salva posto per esempio, aggiungi un colore qui e impostalo su Colori. primario e per questo, devi assicurarti di importare i

14
00:01:10,540 --> 00:01:15,730
colori costanti qui e onPress in seguito invierà questo modulo, per

15
00:01:15,820 --> 00:01:19,750
il momento non sto facendo nulla qui.

16
00:01:19,750 --> 00:01:25,030
Naturalmente è anche possibile configurare l'inserimento di testo, anche se la maggior parte della configurazione di base va bene qui, non

17
00:01:25,030 --> 00:01:29,920
ho bisogno di cambiare il tipo di tastiera e così via, ma alcuni stili sarebbero belli e questo

18
00:01:29,920 --> 00:01:31,360
è vero per l'intera pagina.

19
00:01:31,360 --> 00:01:37,330
Quindi, per questa vista qui, ad esempio, voglio aggiungere uno stile di modulo qui, quindi un identificatore di stile del modulo in modo da

20
00:01:37,330 --> 00:01:41,140
poter dare uno stile al modulo generale. Per il titolo

21
00:01:41,140 --> 00:01:50,980
qui, aggiungerò uno stile di etichetta e per l'inserimento del testo, voglio anche aggiungere i miei stili e userò

22
00:01:51,100 --> 00:01:55,210
l'identificativo di testo qui. Detto questo, passiamo al foglio di stile

23
00:01:55,210 --> 00:02:00,180
e assicuriamoci di aggiungere un po 'di stile qui. Per la forma generale, aggiungerò un margine

24
00:02:00,220 --> 00:02:05,350
in tutte le direzioni di 30 in modo che non si trovi direttamente sui bordi dello schermo.

25
00:02:06,160 --> 00:02:07,480
Per l'etichetta, voglio

26
00:02:07,780 --> 00:02:15,640
impostare una dimensione del carattere di diciamo 18 e anche aggiungere un margine in fondo a 15 in modo da avere una

27
00:02:15,640 --> 00:02:20,530
certa spaziatura tra l'etichetta e l'input di testo e sull'input di testo stesso,

28
00:02:20,860 --> 00:02:27,670
bene per essere in grado di vederlo, aggiungerò un bordo inferiore e imposterò il suo colore su questo

29
00:02:27,670 --> 00:02:36,460
grigio chiaro qui con questo codice esadecimale di #ccc e una larghezza inferiore del bordo qui di 1 e quindi avrò anche un margine

30
00:02:36,490 --> 00:02:43,060
sul fondo, quindi per il contenuto sotto di esso, il pulsante ora di 15 e quello che aggiungerò

31
00:02:43,060 --> 00:02:48,300
anche qui è un po 'di imbottitura verticale, solo quattro e un po' di

32
00:02:48,670 --> 00:02:52,100
imbottitura orizzontale, solo due. Se lo salvo, diamo un'occhiata.

33
00:02:52,150 --> 00:02:57,310
Se vado alla schermata dei nuovi luoghi, questo è quello che ho e questo non sembra

34
00:02:57,400 --> 00:03:03,360
troppo malandato, anche su Android, questo è qualcosa su cui possiamo lavorare e questo è qualcosa su cui possiamo costruire.

35
00:03:03,460 --> 00:03:05,970
Ora, ovviamente, questo input non sta

36
00:03:05,980 --> 00:03:13,390
facendo nulla, ovviamente voglio catturare ciò che l'utente ha inserito e per mantenerlo semplice, qui non aggiungerò una validazione

37
00:03:13,390 --> 00:03:15,770
super complessa o qualcosa del

38
00:03:15,790 --> 00:03:22,030
genere, invece catturerò solo il valore e basta. Ovviamente puoi aggiungere la validazione, puoi aggiungere un

39
00:03:22,330 --> 00:03:23,360
riduttore come

40
00:03:23,370 --> 00:03:28,680
abbiamo fatto nel modulo di input dell'utente in cui hai imparato come gestire forme più

41
00:03:28,690 --> 00:03:36,490
complesse in tutti i modi, anche in questo caso lo terrò molto semplice e, quindi, importerò l'uso hook di stato da React

42
00:03:36,490 --> 00:03:40,660
qui in modo che io possa semplicemente catturare i miei valori qui.

43
00:03:40,660 --> 00:03:49,360
Quindi qui avrò il mio valore del titolo e imposterò la funzione del valore del titolo e userò lo stato per inizializzarlo

44
00:03:49,350 --> 00:03:53,140
su una stringa vuota e poi aggiungerò una funzione qui,

45
00:03:53,230 --> 00:03:59,800
il gestore di modifica del titolo, che riceve il testo inserito dall'utente e dove l Quindi imposterò

46
00:03:59,800 --> 00:04:08,750
il mio valore del titolo su quel testo e qui, ovviamente, potresti aggiungere la convalida, ma ancora una volta per mantenerlo semplice, non lo

47
00:04:08,750 --> 00:04:09,470
farò.

48
00:04:09,470 --> 00:04:15,380
È il gestore di modifica del titolo che ora dovrebbe essere associato al prop di modifica del testo qui, sull'input

49
00:04:15,380 --> 00:04:16,040
di testo,

50
00:04:16,040 --> 00:04:22,190
quindi lì indicherò il gestore di modifica del titolo e legherò ovviamente il valore di quell'input al mio valore del titolo

51
00:04:22,190 --> 00:04:25,070
perché è qui che memorizzo l'input dell'utente e con

52
00:04:25,190 --> 00:04:33,050
ciò abbiamo un input dell'utente completamente funzionale qui dove acquisisco anche i valori. Ora, con quello, siamo in grado di ottenere

53
00:04:33,050 --> 00:04:35,530
il titolo, abbiamo anche un

54
00:04:35,570 --> 00:04:37,640
posto di salvataggio.

55
00:04:37,640 --> 00:04:40,110
Ogni volta che premiamo questo pulsante, voglio

56
00:04:40,190 --> 00:04:46,370
salvarlo, quindi avrò il mio gestore del luogo di salvataggio, che è una funzione che voglio associare a

57
00:04:46,370 --> 00:04:47,680
questo pulsante di

58
00:04:47,720 --> 00:04:54,050
salvataggio, quindi qui invece di avere questa funzione anonima vuota, indicherò di salvare posiziona il gestore su questo pulsante

59
00:04:54,050 --> 00:04:58,920
di salvataggio del luogo e lì dentro, ora voglio assicurarmi che questo posto venga

60
00:04:59,030 --> 00:05:01,540
salvato e per questo, userò di nuovo Redux.

61
00:05:01,910 --> 00:05:10,880
Quindi installerò Redux con npm install --save redux e anche React Redux e installerò anche Redux Thunk in modo

62
00:05:10,880 --> 00:05:13,660
che possiamo usare anche quello.

63
00:05:13,670 --> 00:05:19,170
Per ora non ne ho bisogno perché non sto parlando con un server, ma più tardi

64
00:05:19,170 --> 00:05:24,230
una volta aggiunte le funzionalità del dispositivo nativo, vedrai che lì abbiamo anche alcune

65
00:05:24,230 --> 00:05:29,750
funzionalità asincrone e dove potremmo voler aspettare il loro completamento prima effettivamente spediamo un'azione che è

66
00:05:29,750 --> 00:05:34,470
esattamente dove Redux Thunk può aiutarci. Quindi, con questi tre pacchetti installati, ora possiamo configurare Redux.