1
00:00:02,340 --> 00:00:08,370
Ora che eliminiamo queste nozioni di base e prima di approfondire React Native e anche come possiamo modellare

2
00:00:08,370 --> 00:00:13,920
le nostre app in un modo un po 'più bello perché ovviamente il nostro stile qui

3
00:00:13,950 --> 00:00:18,260
ha sicuramente ancora un potenziale positivo per dirlo in questo modo, prima

4
00:00:18,420 --> 00:00:23,790
di immergerci in tutto ciò, lascia che ti mostri un altro componente interessante che è integrato

5
00:00:23,790 --> 00:00:29,970
in React Native e che mostra anche con quanta facilità puoi aggiungere funzionalità interessanti alle app React Native e

6
00:00:30,150 --> 00:00:32,010
questo è il componente modale.

7
00:00:32,010 --> 00:00:38,310
Lo trovi ovviamente nei documenti ufficiali in quei componenti e nelle API

8
00:00:38,310 --> 00:00:42,650
guida qua e là, troverai un modale laggiù.

9
00:00:43,420 --> 00:00:50,470
Ora è sotto gli altri e qui, questo modale è un bel componente che ti consente di aggiungere

10
00:00:50,740 --> 00:00:55,780
un così bello overlay, overlay a schermo intero con un piccolo sforzo.

11
00:00:55,900 --> 00:01:00,490
Ora aggiungiamo un modale per ospitare effettivamente il nostro input di obiettivo, in questo

12
00:01:00,490 --> 00:01:04,020
momento l'input dell'obiettivo è qui in alto e va bene,

13
00:01:04,540 --> 00:01:10,480
ma in realtà voglio spostarlo in un modale in modo da averlo su un overlay a schermo intero alla

14
00:01:10,660 --> 00:01:12,790
fine e abbiamo solo un pulsante

15
00:01:12,790 --> 00:01:16,480
qui in alto, quindi al posto dell'input obiettivo che apre quel modale.

16
00:01:16,630 --> 00:01:19,000
Quindi andiamo all'input obiettivo e

17
00:01:19,000 --> 00:01:19,780
lì,

18
00:01:19,810 --> 00:01:25,000
voglio racchiuderlo in un modale. Quindi importerò il modale da React

19
00:01:25,000 --> 00:01:27,600
Native perché è un componente fornito

20
00:01:27,640 --> 00:01:34,020
con React Native e lì, voglio usare quel modale intorno alla mia vista qui, quindi proprio

21
00:01:34,040 --> 00:01:38,080
così per ora e ora salviamolo e vediamo se questo

22
00:01:38,180 --> 00:01:41,150
già cambia qualcosa un po 'sì, il

23
00:01:41,180 --> 00:01:42,740
nostro stile è

24
00:01:42,740 --> 00:01:46,700
spento, stiamo perdendo quella imbottitura che abbiamo impostato originariamente, giusto?

25
00:01:46,710 --> 00:01:52,370
In app. js, abbiamo quell'imbottitura generale sulla nostra vista dello schermo

26
00:01:52,370 --> 00:01:58,430
che è quella vista esterna, sicuramente non viene più applicata sulle due piattaforme, sui due dispositivi perché il nostro

27
00:01:58,430 --> 00:02:03,800
contenuto è molto al di fuori di questa schermata, quindi il modale sta già facendo qualcosa

28
00:02:03,800 --> 00:02:08,480
e ovviamente non stiamo vedendo molto. Ora per modale, quindi per questo componente

29
00:02:09,020 --> 00:02:14,030
modale, è possibile impostare una chiave visibile che definisce se questo è attualmente visibile o

30
00:02:14,030 --> 00:02:19,730
meno e che richiede un valore booleano se lo impostiamo su falso per esempio e, successivamente, se diamo

31
00:02:19,730 --> 00:02:21,020
un'occhiata alle nostre

32
00:02:21,080 --> 00:02:25,880
applicazioni, abbiamo ovviamente visto lo schermo vuoto. A proposito, nel caso in cui Android non

33
00:02:25,900 --> 00:02:32,660
dovesse aggiornarsi dopo aver impostato questo su falso, basta chiudere l'app qui con l'aiuto del cassetto delle app e successivamente nel processo laggiù,

34
00:02:32,660 --> 00:02:37,080
il processo di avvio di npm, premere di nuovo a per riavviare questo su Android.

35
00:02:37,100 --> 00:02:39,650
Quindi ora abbiamo uno schermo vuoto quando questo è impostato

36
00:02:39,650 --> 00:02:42,410
su falso, ora ovviamente codifichiamo che questa non è la soluzione.

37
00:02:42,410 --> 00:02:47,990
Invece in app. js, ora voglio avere un pulsante che ci consenta di aprire quel modale

38
00:02:47,990 --> 00:02:49,340
e quindi chiuderemo il modale

39
00:02:49,350 --> 00:02:55,760
dall'interno del modale quando premiamo il pulsante Aggiungi lì. Ora stiamo già importando il pulsante qui nell'app. js e ora che vedo

40
00:02:55,760 --> 00:03:00,530
questo, ovviamente possiamo anche sbarazzarci di queste importazioni che non stiamo usando qui

41
00:03:00,560 --> 00:03:01,480
in questo

42
00:03:01,550 --> 00:03:06,400
momento, quindi lascia il pulsante import qui insieme alle altre importazioni che stiamo usando

43
00:03:06,490 --> 00:03:12,260
e ora qui in cima , possiamo aggiungere il pulsante, è comunque un tag a chiusura

44
00:03:12,260 --> 00:03:22,160
automatica e impostare il titolo per aggiungere forse un nuovo obiettivo, qualcosa del genere. Se lo facciamo, ovviamente dovremmo vedere quel pulsante qui in alto ed eccolo

45
00:03:22,160 --> 00:03:22,750
qui

46
00:03:22,750 --> 00:03:24,040
e ora quando

47
00:03:24,140 --> 00:03:31,000
premiamo quel pulsante, vogliamo mostrare quel modale, giusto? Ora, per questo, dobbiamo gestire più

48
00:03:31,000 --> 00:03:31,920
stato.

49
00:03:31,990 --> 00:03:38,350
Quindi qui oltre a gestire gli obiettivi del corso, ora gestirò anche se siamo attualmente nella modalità di aggiunta

50
00:03:38,410 --> 00:03:41,220
del corso o se non lo siamo.

51
00:03:41,260 --> 00:03:48,220
Quindi inizialmente, non siamo così lo stato iniziale che sto impostando è falso e nominerò

52
00:03:48,220 --> 00:03:50,100
il mio stato

53
00:03:50,140 --> 00:03:55,460
qui e, ovviamente, dipende da te, lo chiamerò AddMode e setIsAddMode.

54
00:03:55,660 --> 00:03:56,860
Ancora una volta questi

55
00:03:56,860 --> 00:04:03,220
nomi dipendono da te, sto solo tenendo una convenzione qui che trovi anche nei documenti ufficiali di React in cui qui proviamo a dare

56
00:04:03,220 --> 00:04:08,110
lo stato che stiamo controllando un nome appropriato e quindi in pratica prendiamo quel nome e aggiungiamo set

57
00:04:08,110 --> 00:04:12,430
di fronte ad esso per chiarire che questa è la funzione per cambiare quello stato.

58
00:04:12,430 --> 00:04:17,230
Quindi setIsAddMode è ciò che alla fine dobbiamo chiamare quando viene premuto questo pulsante e qui

59
00:04:17,230 --> 00:04:22,750
possiamo usare una funzione inline o usare una funzione con nome e aggiungere qui il gestore, qualunque cosa

60
00:04:22,750 --> 00:04:23,700
tu voglia.

61
00:04:24,130 --> 00:04:28,450
Andrò con la funzione inline e chiamerò isAddMode e lo imposterò su true qui

62
00:04:28,480 --> 00:04:35,800
quando viene chiamato questo pulsante in modo da aprire il modale. Ora possiamo prendere lo stato isAddMode che stiamo cambiando e

63
00:04:35,800 --> 00:04:43,760
passarlo all'input dell'obiettivo per poi cambiare la visibilità del modale lì dentro. Quindi qui, potremmo aggiungere un prop visibile, ma quel

64
00:04:43,760 --> 00:04:50,120
nome prop dipende da te perché è sul nostro componente e passo isAddMode, quindi questo è

65
00:04:50,120 --> 00:04:51,680
lo stato che

66
00:04:51,680 --> 00:04:54,800
stiamo controllando, in modalità visibile, quindi viene

67
00:04:54,800 --> 00:04:59,660
passato il valore memorizzato in isAddMode come valore per il puntello visibile.

68
00:04:59,660 --> 00:05:03,710
Ora nell'input dell'obiettivo, ora possiamo usare quell'elica visibile, quindi

69
00:05:03,710 --> 00:05:06,670
qui possiamo usare gli oggetti visibili,

70
00:05:06,740 --> 00:05:12,080
facendo ora riferimento all'elica visibile che abbiamo sull'input dell'obiettivo che in seguito

71
00:05:12,230 --> 00:05:17,170
passiamo all'elica visibile del modale. Se ora lo salviamo e diamo un'occhiata alla

72
00:05:17,310 --> 00:05:22,440
nostra app, se premo aggiungi un nuovo obiettivo qui, in effetti vedrai di nuovo quel contenuto modale qui.

73
00:05:22,590 --> 00:05:25,020
Ora, ovviamente, non sembra così bello qui,

74
00:05:25,020 --> 00:05:26,590
quindi dovremmo cambiare

75
00:05:26,700 --> 00:05:33,450
questo e un'altra cosa che voglio cambiare è che un'animazione sarebbe piacevole qui per l'apertura del modale, giusto?

76
00:05:33,450 --> 00:05:40,740
Quindi qui aggiungiamo il tipo di animazione che è una bella proprietà che possiamo impostare qui e puoi impostarla su una stringa e lì

77
00:05:40,740 --> 00:05:45,210
hai tre opzioni: nessuna è l'impostazione predefinita ma puoi impostarla per farla scorrere e

78
00:05:45,420 --> 00:05:48,450
ora il modale dovrebbe effettivamente apparire facendo scorrere su.

79
00:05:48,490 --> 00:05:51,760
Quindi se premi aggiungi nuovo obiettivo, ora questo si

80
00:05:51,760 --> 00:05:53,430
sposta, anche su Android.

81
00:05:53,430 --> 00:05:59,130
Quindi questa è un'esperienza utente migliore, direi che il prossimo passo è assicurarci che i nostri contenuti

82
00:05:59,130 --> 00:06:04,410
nel modale siano presentati in un modo migliore, magari centrati qui nel mezzo del modale.