1
00:00:02,390 --> 00:00:05,610
Quindi, passo dopo passo, stiamo facendo progressi, ciò che non siamo

2
00:00:05,660 --> 00:00:08,150
in grado di fare è inserire un numero.

3
00:00:08,150 --> 00:00:14,090
Beh, immagino che tecnicamente possiamo inserire un numero se in un certo senso troviamo il campo di input, eccolo qui ma

4
00:00:14,090 --> 00:00:17,920
non è molto divertente cercarlo, sarebbe più bello se lo vedessi, no?

5
00:00:18,680 --> 00:00:22,270
Quindi, diamo uno stile a quel campo di input, quel

6
00:00:22,280 --> 00:00:30,470
campo di input di testo qui un po 'e proprio come prima in realtà, sono andato a farlo in un componente

7
00:00:30,470 --> 00:00:31,260
separato.

8
00:00:31,310 --> 00:00:40,520
Quindi, nella cartella dei componenti, aggiungerò il mio input. file js e lì dentro, come sempre importare React da React e

9
00:00:40,520 --> 00:00:46,580
quindi importare input di testo da React Native e qui in realtà non avrò bisogno della vista

10
00:00:46,580 --> 00:00:51,970
perché avremo solo l'immissione di testo qui in stile e configurata lì e quindi avremo

11
00:00:51,970 --> 00:00:59,880
il costante di input qui che è il nostro componente funzionale, che alla fine esportiamo anche ovviamente e una cosa di cui

12
00:00:59,880 --> 00:01:01,980
avremo sicuramente bisogno è il

13
00:01:02,280 --> 00:01:08,550
foglio di stile perché ora dovrebbe essere disegnato qui in modo da avere un aspetto di input

14
00:01:08,550 --> 00:01:13,710
predefinito che potremmo riutilizzare in questo se abbiamo bisogno di più input in luoghi

15
00:01:13,710 --> 00:01:15,120
diversi e questa

16
00:01:15,120 --> 00:01:20,130
è davvero la mentalità in cui devi entrare, creare componenti riutilizzabili in modo

17
00:01:20,130 --> 00:01:26,460
da non dover copiare il codice o ripetere te stesso ma che puoi facilmente condividere i tuoi componenti

18
00:01:26,460 --> 00:01:32,700
e creare facilmente le app vuoi dal tuo set di blocchi che crei da solo alla fine.

19
00:01:32,700 --> 00:01:41,650
Quindi qui, i miei stili si oppongono a Stylesheet. creare, come quello, sembra buono e ora in quel componente, voglio

20
00:01:41,710 --> 00:01:44,230
restituire un input di testo,

21
00:01:44,230 --> 00:01:46,990
quindi questo input di testo incorporato.

22
00:01:46,990 --> 00:01:49,830
Ora, naturalmente, la mia idea è che possiamo

23
00:01:49,870 --> 00:01:58,180
modellarlo da qui, quindi assegniamo uno stile da lì, ma proprio come con la carta, sarebbe bello se potessimo anche impostare uno stile dall'esterno, come

24
00:01:58,180 --> 00:02:05,200
una larghezza speciale o un bordo speciale, niente del genere. Per abilitarlo, ancora una volta passerò un oggetto

25
00:02:05,380 --> 00:02:08,050
qui allo stile e per uno

26
00:02:08,050 --> 00:02:14,470
prendo tutti i miei stili impostati nel mio oggetto stili e lì diciamo in una proprietà di

27
00:02:14,470 --> 00:02:23,970
input che dobbiamo ancora aggiungere e inoltre, aggiungiamo anche tutti gli stili che stanno ottenendo dallo stile degli oggetti di scena in modo che

28
00:02:23,970 --> 00:02:30,060
possiamo impostare anche gli stili dall'esterno e ora laggiù nel foglio di stile, possiamo aggiungere lo

29
00:02:30,060 --> 00:02:37,180
stile di input per assegnare un certo stile all'input. Quindi qui, potremmo dare un'altezza di diciamo 30 che

30
00:02:37,180 --> 00:02:43,420
dovrebbe essere un'altezza che sembra relativamente buona e per vedere qualcosa, voglio anche aggiungere un bordo in fondo.

31
00:02:43,450 --> 00:02:49,120
Potresti anche aggiungere un bordo attorno all'intero input con colore e larghezza del bordo e così via, ma

32
00:02:49,310 --> 00:02:54,970
mi piace quello sguardo in cui abbiamo solo un bordo sotto l'input ma è ovviamente totalmente soggettivo

33
00:02:55,060 --> 00:02:59,120
e qualcosa che puoi impostare in base alle tue preferenze personali .

34
00:02:59,250 --> 00:03:06,160
Solo un bordo in basso può essere impostato con il colore del bordo inferiore e ci andrò

35
00:03:06,160 --> 00:03:16,110
con il grigio, un altro colore pre-costruito che possiamo usare con quella scorciatoia e dare a questo bordo inferiore anche una larghezza qui di uno,

36
00:03:16,110 --> 00:03:22,680
aggiungere un margine verticale di 10 per avere una spaziatura attorno all'input, almeno in alto e

37
00:03:22,890 --> 00:03:26,380
in basso e ora con quello, lo stile

38
00:03:26,400 --> 00:03:28,170
di base per questo

39
00:03:28,170 --> 00:03:36,660
input di testo è fatto, ora usiamolo nella schermata di gioco. Quindi lì, voglio importare il mio input dall'input della cartella dei

40
00:03:36,660 --> 00:03:39,890
componenti, in questo modo e sostituire questo input di

41
00:03:40,930 --> 00:03:46,690
testo qui con il mio input che alla fine avvolge naturalmente questo input di testo

42
00:03:46,690 --> 00:03:47,440
incorporato.

43
00:03:47,500 --> 00:03:48,510
Quindi usa

44
00:03:48,510 --> 00:03:52,300
il mio input, elimina l'input di testo lassù di cui non abbiamo

45
00:03:52,600 --> 00:03:59,370
più bisogno e ora se lo salviamo, lo vediamo un po 'ma è molto piccolo, riesci a malapena a vederlo qui su

46
00:03:59,410 --> 00:04:04,600
iOS e diventa più grande mentre digiti, il che non è certo quello che vogliamo ovviamente.

47
00:04:04,900 --> 00:04:06,590
Ovviamente non abbiamo finito, invece

48
00:04:07,200 --> 00:04:09,290
di modellare la larghezza, vado alla schermata

49
00:04:09,300 --> 00:04:10,950
di avvio del gioco, quindi

50
00:04:10,980 --> 00:04:14,460
nel luogo in cui utilizziamo l'input e impostiamo lo styling qui

51
00:04:14,460 --> 00:04:19,200
perché per me ha senso che abbiamo un po 'di generale stili che vogliamo sempre nel

52
00:04:19,380 --> 00:04:24,720
componente di input, qualcosa come l'altezza o il bordo ma alcuni stili specifici, come quanto dovrebbe essere

53
00:04:24,720 --> 00:04:25,230
grande,

54
00:04:25,350 --> 00:04:28,480
quindi quanto dovrebbe essere largo, è qualcosa che vuoi impostare

55
00:04:28,650 --> 00:04:36,150
nel luogo in cui usi effettivamente e quindi qui, aggiungerò questa proprietà di input nell'oggetto foglio di stile della schermata di avvio del gioco

56
00:04:36,150 --> 00:04:42,360
e forse userò una larghezza di 50 pixel qui, che dovrebbe apparire bene e assegnarla al mio input personalizzato qui

57
00:04:42,450 --> 00:04:43,760
con lo stile prop.

58
00:04:43,830 --> 00:04:51,840
Quindi, ora possiamo indicare gli stili. input e con quello, avrà sempre quella larghezza

59
00:04:51,840 --> 00:04:55,380
e se digitiamo lì, non lo

60
00:04:55,380 --> 00:05:00,040
allarghiamo più, invece possiamo semplicemente scorrere automaticamente in quell'input.

61
00:05:00,150 --> 00:05:05,760
Ora per questo input specifico, per questo layout specifico qui, sarebbe anche bello se il testo fosse

62
00:05:05,760 --> 00:05:06,500
centrato

63
00:05:06,600 --> 00:05:12,330
penso, per la maggior parte degli input vuoi quel comportamento predefinito di scrivere da sinistra a destra

64
00:05:12,330 --> 00:05:13,220
e iniziare sul

65
00:05:13,260 --> 00:05:20,480
bordo sinistro ma qui penso un po 'di testo centrato sarebbe bello e quindi nella schermata di avvio del gioco in cui

66
00:05:20,480 --> 00:05:23,550
voglio avere questo centraggio qui, su questo input, possiamo

67
00:05:23,660 --> 00:05:30,470
anche aggiungere la proprietà di allineamento del testo e impostarlo al centro e ora questo centrerà questo testo qui nel mezzo

68
00:05:30,470 --> 00:05:32,330
come digitiamo ed è davvero

69
00:05:32,330 --> 00:05:35,830
bello per aver inserito un numero quindi, in questo modo.

70
00:05:36,920 --> 00:05:40,260
A proposito, in questo momento possiamo inserire qualsiasi

71
00:05:40,550 --> 00:05:45,980
cosa lì dentro, quindi dobbiamo certamente configurare questo input e per questo se vado al componente

72
00:05:45,980 --> 00:05:52,250
di input in cui utilizziamo l'input di testo, ci sono molte cose che possiamo configurare lì e in

73
00:05:52,250 --> 00:05:59,030
realtà la migliore risorsa è sempre ovviamente la documentazione ufficiale. Lì nei documenti API, se ci vai e cerchi l'immissione

74
00:05:59,030 --> 00:06:05,990
di testo, troverai non solo una spiegazione ma troverai anche tutti gli oggetti di scena che puoi impostare lì e puoi

75
00:06:06,320 --> 00:06:09,230
impostare cose come se fossero multilinea o no ,

76
00:06:09,230 --> 00:06:11,100
quanto può durare il testo.

77
00:06:11,330 --> 00:06:13,730
Puoi anche impostare un testo

78
00:06:13,730 --> 00:06:18,700
segnaposto, puoi impostare la correzione automatica e tutte quelle cose divertenti, quindi controlla

79
00:06:18,770 --> 00:06:25,670
sicuramente questi documenti per trovare la proprietà specifica di cui potresti aver bisogno per il tuo caso d'uso.

80
00:06:25,730 --> 00:06:31,970
Voglio essere in grado di impostare questi oggetti di scena, ma voglio essere in grado di impostarli dal

81
00:06:31,970 --> 00:06:37,640
luogo in cui utilizzo il mio input personalizzato. Quindi non da qui perché ciò garantirebbe che utilizziamo

82
00:06:37,730 --> 00:06:40,150
la stessa configurazione per tutti gli

83
00:06:40,430 --> 00:06:46,550
input che potremmo avere nella nostra app, voglio avere maggiore flessibilità e impostare solo uno stile di base qui

84
00:06:46,550 --> 00:06:51,440
e configurare l'input nel luogo in cui abbiamo quindi utilizzarlo anziché nel componente wrapper principale.

85
00:06:51,440 --> 00:06:57,140
La cosa interessante è React e non è React Native, ma solo React in Javascript normale ha una

86
00:06:57,140 --> 00:06:58,200
sintassi per questo.

87
00:06:58,460 --> 00:07:05,920
Puoi prendere i tuoi oggetti di scena che stai ricevendo e distribuirli sul tuo componente in questo modo.

88
00:07:05,920 --> 00:07:11,110
La sintassi potrebbe sembrare un po 'strana ma alla fine ciò che fa è prendere tutti

89
00:07:11,140 --> 00:07:19,120
gli oggetti di scena che hai, tutti gli oggetti di scena che hai impostato qui e sostanzialmente li aggiunge al tuo componente come oggetti di scena.

90
00:07:19,150 --> 00:07:23,600
Ora, se in seguito definisci altri oggetti di scena come lo stile e hai già

91
00:07:23,650 --> 00:07:26,020
uno stile qui, questo stile sovrascriverà lo

92
00:07:26,040 --> 00:07:31,210
stile che hai qui ed è in realtà quello che voglio perché se imposto uno stile sul mio

93
00:07:31,210 --> 00:07:37,450
input dall'esterno, sicuramente voglio sovrascrivere questo con questo stile prop e aggiungere questo stile che è impostato lì a questo input di

94
00:07:37,450 --> 00:07:38,200
testo ma

95
00:07:38,200 --> 00:07:43,630
se si impostano altri oggetti di scena al di fuori di questo componente, quindi sul mio componente personalizzato, verranno

96
00:07:43,630 --> 00:07:49,010
aggiunti all'input di testo e che ci consente di aggiungere tutti gli oggetti di scena che possiamo aggiungere sull'input

97
00:07:49,120 --> 00:07:52,120
di testo anche sul nostro input, quindi sul nostro componente.

98
00:07:52,120 --> 00:08:03,400
Quindi qui dove utilizziamo l'input, ora non possiamo solo aggiungere lo stile, ma possiamo anche aggiungere blurOnSubmit per esempio per assicurarci

99
00:08:03,400 --> 00:08:09,670
che quando premiamo il pulsante di invio lì, perdiamo lo stato attivo

100
00:08:09,670 --> 00:08:16,430
e chiudiamo la tastiera virtuale. Possiamo impostare autocapitalize su nessuno che è uno dei valori consentiti

101
00:08:16,480 --> 00:08:20,040
lì se controlli i documenti. Puoi impostarlo su nessuno, frasi,

102
00:08:20,050 --> 00:08:24,610
parole e così via, quindi non voglio attivare la maiuscola qui perché inseriremo solo il numero

103
00:08:24,610 --> 00:08:30,610
ma anche perché voglio mostrarti diverse configurazioni che puoi impostare. Imposterò la correzione automatica qui su falso in

104
00:08:30,610 --> 00:08:35,050
modo che non stiamo correggendo automaticamente l'input dell'utente e molto importante qui,

105
00:08:35,080 --> 00:08:41,000
imposterò il tipo di tastiera su numerico, in modo che l'utente debba inserire un numero qui.

106
00:08:41,320 --> 00:08:47,590
Qui imposterò la lunghezza massima su 2 in modo da poter inserire solo due cifre e non un numero molto

107
00:08:47,620 --> 00:08:53,890
lungo perché questo gioco qui ed è solo una delle restrizioni che ho qui, è che questo gioco funziona solo

108
00:08:53,890 --> 00:08:57,140
con un due cifre numero. Con tutto ciò impostato,

109
00:08:57,140 --> 00:09:02,990
ora se torniamo indietro e commuto la mia tastiera virtuale, vedi che ottieni quella tastiera numerica qui

110
00:09:02,990 --> 00:09:09,180
e puoi inserire solo due cifre lì e non più di quella, che è ovviamente esattamente quello che voglio.

111
00:09:09,260 --> 00:09:14,170
Inoltre, qui su Android vediamo questo, se fai clic sul pulsante di conferma,

112
00:09:14,180 --> 00:09:21,140
questo lo chiuderà, è grazie a quella cosa blurOnSubmit. Su iOS, un pulsante del genere non esiste qui, quindi lì,

113
00:09:21,140 --> 00:09:25,730
dovremo effettivamente trovare una soluzione diversa per chiuderlo se tocchi altrove, ad esempio perché in questo

114
00:09:25,760 --> 00:09:27,150
momento, non sta succedendo.

115
00:09:27,320 --> 00:09:32,090
Ma la cosa buona è che ora abbiamo una tastiera che possiamo vedere e una tastiera in cui possiamo inserire numeri.

116
00:09:32,090 --> 00:09:37,910
Una cosa che voglio cambiare è che in questo momento, posso anche inserire un separatore decimale qui.

117
00:09:37,910 --> 00:09:44,420
Ora per sbarazzartene, puoi cambiare il tipo di tastiera in tastierino numerico e vedere tutti i tipi di tastiera disponibili, poiché sempre i

118
00:09:44,420 --> 00:09:49,650
documenti ufficiali sono il posto dove andare, lì per l'immissione di testo, puoi immergerti in un tipo di

119
00:09:49,650 --> 00:09:54,650
tastiera e trovare cosa puoi impostare, cosa funziona su tutte le piattaforme e cosa potresti impostare se

120
00:09:54,650 --> 00:09:59,480
avessi un controllo che controlla su quale piattaforma stai eseguendo il codice di cui non abbiamo ancora

121
00:09:59,480 --> 00:09:59,990
imparato.

122
00:10:00,230 --> 00:10:03,200
Il tastierino numerico è supportato su entrambe le piattaforme e,

123
00:10:03,350 --> 00:10:08,380
se lo imposti, ora hai un input in cui non puoi inserire un decimale qui, se

124
00:10:08,390 --> 00:10:13,990
digiti qui e non puoi farlo su iOS. Su Android, sfortunatamente, puoi farlo, quindi dovremo

125
00:10:14,090 --> 00:10:16,490
anche trovare una soluzione diversa.