1
00:00:02,140 --> 00:00:06,630
Ora abbiamo iniziato a lavorare sull'input e non sembra troppo male, ma vogliamo assicurarci

2
00:00:06,630 --> 00:00:13,980
che gli utenti possano inserire solo numeri che sono solo cifre e che non possiamo inserire un punto qui o una virgola o

3
00:00:13,980 --> 00:00:16,440
incollare in alcuni non- contenuto numerico e

4
00:00:16,530 --> 00:00:20,280
per questo, ovviamente, dobbiamo convalidare ciò che l'utente ha inserito qui.

5
00:00:20,550 --> 00:00:27,900
Ora, per convalidare ciò che l'utente ha inserito, voglio, come già mostrato in precedenza, sostanzialmente salvare il valore che

6
00:00:27,900 --> 00:00:28,440
l'utente

7
00:00:28,440 --> 00:00:33,510
ha inserito ad ogni sequenza di tasti e reinserirlo nell'input ma dopo

8
00:00:33,510 --> 00:00:39,000
ogni sequenza di tasti, voglio anche convalidare l'input per rendere certo che abbiamo un

9
00:00:39,000 --> 00:00:44,770
valore valido lì, quindi sostanzialmente un numero. Per prima cosa, dobbiamo gestire un po

10
00:00:44,860 --> 00:00:54,510
'di stato qui nella schermata di avvio del gioco, quindi importerò lo stato d'uso e poi quassù all'inizio di questo componente, imposterò la mia chiamata

11
00:00:54,520 --> 00:01:02,180
dello stato d'uso, quindi registra un po' stato e quello sarà il valore inserito e anche se in seguito

12
00:01:02,300 --> 00:01:08,000
sarà un numero, tecnicamente è una stringa all'inizio perché tutto l'input è solo una

13
00:01:08,000 --> 00:01:09,080
stringa e

14
00:01:09,080 --> 00:01:15,170
devi convertirlo manualmente in un numero, se vuoi. Aggiungerò anche una funzione di valore immesso qui,

15
00:01:15,170 --> 00:01:19,220
il secondo elemento che recuperiamo dallo stato di utilizzo dell'array ci dà

16
00:01:19,430 --> 00:01:25,660
e ora possiamo aggiungere una costante qui che nominerò il gestore dell'input del numero o come si desidera nominarlo.

17
00:01:25,700 --> 00:01:32,830
Questo otterrà il testo di input e questa è la funzione perché è solo una funzione

18
00:01:32,830 --> 00:01:40,690
che sto memorizzando in questa costante che voglio connettere al mio input e lì a onChangeText, puntare al

19
00:01:40,960 --> 00:01:43,930
gestore di input numerico e reinserire

20
00:01:43,930 --> 00:01:48,330
il valore e questo è il nostro valore inserito.

21
00:01:48,420 --> 00:01:54,480
Ora normalmente diremmo di impostare qui il valore inserito e impostare il testo di input come il

22
00:01:54,480 --> 00:01:56,720
nostro nuovo valore inserito che

23
00:01:56,820 --> 00:02:01,220
inseriamo nuovamente nell'input ma qui, in realtà, prima di tutto convaliderò l'input.

24
00:02:01,290 --> 00:02:06,300
Quindi quello che farò qui è che non imposterò il mio valore inserito

25
00:02:06,330 --> 00:02:15,790
direttamente sul testo qui, invece lo imposterò sul mio testo di input dove lo sostituisco e posso chiamare sostituire perché il testo di input sarà

26
00:02:15,790 --> 00:02:22,450
una stringa e questo è un normale metodo Javascript che esiste sulle stringhe, in cui sostituisco alcuni

27
00:02:22,450 --> 00:02:27,430
contenuti basati su un'espressione regolare. Ora le espressioni regolari possono essere

28
00:02:27,430 --> 00:02:36,010
spaventose ma è semplice, lo creiamo con due barre in avanti e lì dentro aggiungerò parentesi quadre e fondamentalmente con questa espressione

29
00:02:36,040 --> 00:02:45,250
dire che sto sostituendo tutto ciò che non è un numero da 0 a 9, quindi non un numero, a livello globale nell'intero testo,

30
00:02:45,250 --> 00:02:51,630
ciò significa che non solo cercherà il primo hit, ma cercherà l'intero testo, lo sostituirò con una

31
00:02:52,850 --> 00:02:53,940
stringa vuota,

32
00:02:56,620 --> 00:03:02,440
quindi praticamente lascerò cadere qualsiasi non-numero di valore. Questo è ciò che sta accadendo qui ed è ciò

33
00:03:02,440 --> 00:03:04,540
che memorizzo nel mio nuovo stato

34
00:03:04,600 --> 00:03:09,460
e con ciò, dovremmo assicurarci che l'utente non possa inserire nulla che non sia un numero.

35
00:03:09,460 --> 00:03:11,410
Quindi controlliamo qui su

36
00:03:11,410 --> 00:03:16,720
Android, se premo la virgola, vedrai che viene immediatamente rimosso e questo è esattamente ciò

37
00:03:16,720 --> 00:03:19,960
di cui abbiamo bisogno qui, consentiamo solo valori numerici.

38
00:03:19,960 --> 00:03:24,030
Quindi è un po 'di convalida che abbiamo messo in

39
00:03:24,030 --> 00:03:32,890
atto qui, non è tutto ciò che voglio però, ma non abbiamo ancora finito con l'input perché su iOS, se siamo in quella modalità

40
00:03:32,890 --> 00:03:37,410
di input e vogliamo chiudere quella tastiera, proprio ora non è davvero fattibile.

41
00:03:37,420 --> 00:03:44,500
Non possiamo fare clic all'esterno e chiuderlo e sarebbe bello se potessimo. Ora per assicurarmi che possiamo e che chiudiamo la

42
00:03:44,500 --> 00:03:47,960
tastiera se l'utente tocca da qualche altra parte, in

43
00:03:48,160 --> 00:03:56,020
effetti avvolgerò l'intera vista qui con un componente speciale fornito da React Native e che è il componente toccabile senza

44
00:03:56,020 --> 00:03:58,490
feedback, quindi un componente che ci

45
00:03:58,630 --> 00:04:04,960
consente registrare un ascoltatore di tocchi senza fornire alcun feedback visivo perché è esattamente ciò di

46
00:04:04,960 --> 00:04:07,060
cui abbiamo bisogno qui.

47
00:04:07,150 --> 00:04:11,080
Possiamo avvolgere tutto il nostro schermo con questo, quindi la

48
00:04:11,080 --> 00:04:18,190
nostra intera vista può essere racchiusa con questo toccabile senza ascoltatore di feedback in modo che dentro o là,

49
00:04:18,190 --> 00:04:24,070
ora possiamo registrarci o ascoltare l'evento della stampa e quando si verifica una stampa, voglio

50
00:04:24,070 --> 00:04:30,010
chiudere la tastiera e, per questo, React Native ci fornisce un'API utile che possiamo importare da

51
00:04:30,010 --> 00:04:37,240
React Native e questa è l'API della tastiera. Questo non è un componente ma è un'API in cui possiamo

52
00:04:37,240 --> 00:04:43,820
interagire con il dispositivo nativo stesso, per così dire, in questo caso con la tastiera e qui premendo un pulsante, voglio

53
00:04:43,820 --> 00:04:50,230
attivare una funzione e qui andrò con una semplice funzione in linea, una breve funzione anonima, puoi ovviamente usare anche una

54
00:04:50,230 --> 00:04:52,700
funzione con nome, ma qui tutto quello che

55
00:04:52,870 --> 00:04:57,230
voglio fare è chiamare la tastiera. respingere.

56
00:04:57,310 --> 00:05:02,680
Questa è una funzione che questa API della tastiera che stiamo importando da React Native ci offre

57
00:05:02,680 --> 00:05:04,220
e fa esattamente ciò

58
00:05:04,360 --> 00:05:06,570
che i nomi suggeriscono, quindi ora se

59
00:05:06,580 --> 00:05:12,610
tocchiamo qui, possiamo digitare ma se tocco da qualche altra parte, eliminiamo la tastiera e quella di Ovviamente accade su

60
00:05:12,640 --> 00:05:17,740
entrambe le piattaforme e penso che sia un'esperienza utente migliore perché è quello che ti aspetteresti,

61
00:05:18,160 --> 00:05:21,040
che chiudi la tastiera se tocchi altrove sullo schermo.