1
00:00:02,260 --> 00:00:07,540
Portanto, para isso, como mencionado, estou de volta ao projeto em que trabalhamos e, é claro, agora a tela

2
00:00:07,540 --> 00:00:09,640
de edição do produto aqui é o

3
00:00:09,640 --> 00:00:16,060
que me interessa. Essa é a tela em que tenho essas entradas de texto aqui com meus rótulos e depois com o botão

4
00:00:16,060 --> 00:00:19,540
entrada de texto, onde atualmente temos uma manipulação de entrada muito básica,

5
00:00:19,540 --> 00:00:25,390
estamos pelo menos buscando a entrada do usuário e armazenando-a com a ajuda do estado React, com o gancho de

6
00:00:25,450 --> 00:00:26,460
estado de

7
00:00:26,560 --> 00:00:30,200
uso, e depois inserimos os valores do Android na entrada e é isso.

8
00:00:30,310 --> 00:00:37,210
Isso nos permite capturar e usar a entrada do usuário, mas, por um lado, podemos melhorar a maneira como

9
00:00:37,210 --> 00:00:42,730
fazemos isso, podemos escrever isso de uma maneira mais reutilizável e não estamos fazendo nenhuma

10
00:00:42,760 --> 00:00:46,510
validação, portanto, é isso que quero mudar neste módulo.

11
00:00:46,530 --> 00:00:50,850
Além disso, também não estamos configurando nossas entradas de maneira alguma, o que significa

12
00:00:50,940 --> 00:00:53,850
que agora todas as entradas de texto são iguais.

13
00:00:53,850 --> 00:00:57,140
Nós não mudamos o tipo de teclado que

14
00:00:57,270 --> 00:01:02,910
estamos apresentando, não estamos oferecendo entradas multilinhas, por exemplo, para textos mais longos, como aqui

15
00:01:02,910 --> 00:01:08,370
para a descrição, nada disso está acontecendo e, portanto, vamos começar a configurar essas entradas

16
00:01:08,370 --> 00:01:15,120
antes de prosseguirmos. para validação e assim por diante. Uma configuração importante que você pode adicionar aos teclados

17
00:01:15,180 --> 00:01:21,420
é o tipo de teclado. O tipo de teclado prop pode ser definido e você tem alguns valores disponíveis. Agora você tem alguns valores

18
00:01:21,420 --> 00:01:26,970
aqui, mas os documentos oficiais também são um lugar que você deve consultar ao pensar sobre o

19
00:01:26,970 --> 00:01:33,230
tipo que deseja atribuir aqui, porque quando visita a documentação oficial de entrada de texto, é claro que você vê

20
00:01:33,230 --> 00:01:38,270
alguns exemplos, mas depois você também vê todos os acessórios que possui e, pode aprender

21
00:01:38,270 --> 00:01:41,450
mais sobre cada acessório e como configurá-lo. Para o tipo

22
00:01:41,450 --> 00:01:46,010
de teclado, por exemplo, aprendemos que apenas esses tipos são compatíveis com várias plataformas.

23
00:01:46,160 --> 00:01:52,080
Portanto, embora tenhamos tipos específicos para iOS e Android disponíveis, esses tipos só podem ser usados junto com uma verificação

24
00:01:52,130 --> 00:01:53,750
de plataforma, para garantir que você

25
00:01:53,750 --> 00:01:58,310
não use o tipo no Android que não é suportado lá e que, portanto, não

26
00:01:58,310 --> 00:01:59,560
teria nenhum efeito.

27
00:02:00,230 --> 00:02:06,430
Portanto, continuarei com os tipos de plataforma cruzada, para que não precise adicionar uma verificação extra de plataforma e, normalmente, digamos

28
00:02:06,440 --> 00:02:11,600
texto normal, manteremos o padrão, o que, obviamente, é um tipo que não o fazemos. precisamos atribuir, mas

29
00:02:11,600 --> 00:02:18,110
isso, por exemplo, muda quando analisamos nossa entrada de preço. Lá, quero ter certeza de que as pessoas digitam apenas

30
00:02:18,110 --> 00:02:24,860
números válidos, que não digitem texto e, portanto, é claro que quero mostrar o teclado certo para ajudá-las com isso

31
00:02:24,860 --> 00:02:27,850
e, se dermos uma olhada na documentação oficial, veremos

32
00:02:28,130 --> 00:02:33,170
que existem três tipos principais de teclados de plataforma cruzada que podemos mostrar - teclado

33
00:02:33,350 --> 00:02:40,460
numérico, teclado decimal e numérico e, por exemplo, teclado decimal é uma entrada que permite ao usuário inserir números decimais, exatamente o

34
00:02:40,460 --> 00:02:46,250
que eu quero aqui pelo meu preço. Portanto, definir esse tipo de teclado aqui faz

35
00:02:46,250 --> 00:02:50,660
muito sentido, porque agora, se dermos uma olhada nessa entrada de preço

36
00:02:51,080 --> 00:02:58,460
aqui e alterno o teclado virtual que você pode fazer com o atalho de comando k aqui no iOS ou com

37
00:02:58,520 --> 00:03:07,340
o menu de hardware lá em cima, então teclado, alterne o teclado do software, você vê que agora eu tenho esse teclado decimal abrindo aqui,

38
00:03:07,340 --> 00:03:12,860
enquanto nas outras entradas eu tenho um teclado de texto normal e, claro, é o

39
00:03:13,220 --> 00:03:14,750
mesmo no Android.

40
00:03:14,750 --> 00:03:20,590
Se formos para o administrador lá e depois vermos o preço, também veremos que lá, somos apresentados a essa

41
00:03:20,590 --> 00:03:26,200
entrada amigável de número, em vez do teclado de texto normal que encontramos nos outros campos de entrada.

42
00:03:26,480 --> 00:03:33,840
Então é assim que podemos configurar isso e essa é, obviamente, uma configuração importante. Também podemos configurar outras coisas,

43
00:03:34,010 --> 00:03:38,840
por exemplo, aqui na entrada do título aqui.

44
00:03:39,060 --> 00:03:43,950
Se você pressionar o espaço de controle e observar o preenchimento automático, verá que várias coisas podem ser

45
00:03:43,950 --> 00:03:49,560
configuradas, por exemplo, se isso deve ser capitalizado automaticamente. Lá você tem valores diferentes que

46
00:03:49,560 --> 00:03:55,590
podem ser definidos, por exemplo, que o caractere deve ser maiúsculo, apenas frases ou palavras

47
00:03:55,590 --> 00:04:01,020
completas e aqui, eu vou usar frases completas, por exemplo, para ajudar a capitalizá-las.

48
00:04:01,140 --> 00:04:07,350
Você também pode ativar a correção automática e, adicionando-a assim, assegura que a correção automática esteja ativada para

49
00:04:07,350 --> 00:04:12,540
esta entrada, definindo-a como false, você pode desativá-la ou apenas omitindo-a, é claro, isso também

50
00:04:12,540 --> 00:04:18,120
é uma opção e assim por diante . Há várias coisas que você pode configurar e eu

51
00:04:18,120 --> 00:04:23,730
recomendo fortemente, como sempre, que você dê uma olhada nos documentos oficiais, para aprender sobre as opções de configuração

52
00:04:23,790 --> 00:04:25,930
disponíveis e o que elas fazem,

53
00:04:25,980 --> 00:04:32,400
também simplesmente brinque com elas para que você obtenha uma idéia do que você pode fazer lá e o que cada

54
00:04:32,400 --> 00:04:40,090
opção faz e o que pode fazer sentido para o seu próximo aplicativo. Um outro valor que desejo definir, por exemplo, é o

55
00:04:40,090 --> 00:04:42,580
tipo de chave de retorno.

56
00:04:42,580 --> 00:04:44,920
Isso pode ser definido como alguns valores

57
00:04:44,980 --> 00:04:50,350
e, novamente, se você verificar os documentos oficiais, aprenderá que nem todos os valores estão disponíveis em

58
00:04:50,440 --> 00:04:56,260
todas as plataformas, apenas esses cinco estão disponíveis em várias plataformas e, basicamente, você pode configurar esse botão

59
00:04:56,260 --> 00:05:00,130
na parte inferior Esquina direita. Se você der uma olhada na sua

60
00:05:06,070 --> 00:05:12,090
entrada aqui e clicar em qualquer uma das entradas, é este botão aqui no canto inferior direito que indica

61
00:05:12,090 --> 00:05:15,950
retornar aqui para o imageUrl. Agora, no título, defino-o para o próximo;

62
00:05:15,960 --> 00:05:21,870
portanto, se você clicar no campo do título, verá agora um texto mais amplo, que é o alemão para o próximo

63
00:05:21,870 --> 00:05:27,770
e isso é apenas porque eu tenho um emulador alemão aqui e deixe-me reiniciar também no Android porque caiu lá para

64
00:05:27,770 --> 00:05:29,660
que eu possa mostrá-lo também.

65
00:05:30,730 --> 00:05:36,280
Se formos para a nossa entrada lá, clicar no título, você verá este próximo botão aqui, no imageUrl,

66
00:05:36,280 --> 00:05:41,080
você terá este botão pronto aqui e que pode ser configurado com o tipo de chave

67
00:05:41,080 --> 00:05:47,020
de retorno, embora esteja ciente de que isso só controla como isso é exibido, o que diz lá, qual é

68
00:05:47,020 --> 00:05:49,150
o rótulo lá ou que tipo de

69
00:05:49,300 --> 00:05:55,150
botão é apresentado, não muda automaticamente o que esse botão faz; por exemplo, se eu clicar no botão mais

70
00:05:55,150 --> 00:05:56,200
largo, este

71
00:05:56,200 --> 00:05:59,990
teclado fecha, o mesmo acontece se Clico na chave de retorno aqui.

72
00:06:00,150 --> 00:06:05,040
Agora, quando falamos sobre comportamentos de entradas de texto, todos os eventos que podemos ouvir são interessantes.

73
00:06:05,340 --> 00:06:09,190
Com on, você tem uma idéia de todos os eventos que pode

74
00:06:09,210 --> 00:06:15,350
ouvir e, por exemplo, no onBlur, que é acionado sempre que uma entrada perde o foco, o onChange é acionado, portanto, a

75
00:06:15,420 --> 00:06:21,090
cada pressionamento de tecla e o evento de entrada completo, onChangeText, que também é acionado em cada pressionamento de tecla,

76
00:06:21,150 --> 00:06:25,230
mas apenas fornece o texto digitado, que normalmente é o que mais lhe interessa.

77
00:06:25,980 --> 00:06:35,000
onEndEditing, onde também podemos ter uma idéia de quando isso é acionado, por isso, se eu inserir onEndEditing aqui, vamos ver quando

78
00:06:35,010 --> 00:06:37,440
isso será impresso no console,

79
00:06:37,440 --> 00:06:46,710
se agora for para minha entrada e observe que estou na entrada do título, por isso, se Eu digito lá test, vemos que

80
00:06:46,710 --> 00:06:49,350
ele não disparou aqui, se eu clicar

81
00:06:49,350 --> 00:06:54,930
fora disso, agora ele disparou em EndEditing. O mesmo acontece se eu clicar no botão

82
00:06:54,930 --> 00:07:01,920
mais largo aqui, por exemplo, então basicamente sempre que deixamos este teclado com o foco ou, em geral, quando clicamos

83
00:07:01,920 --> 00:07:03,890
no botão pronto também.

84
00:07:03,960 --> 00:07:10,620
Além disso, também temos outros ouvintes, como o onFocus, que obviamente dispara quando essa entrada ganha foco, ou

85
00:07:10,620 --> 00:07:19,640
também noSelectionChange quando selecionamos texto lá ou no onSubmitEditing, que é acionado quando esse botão de retorno é clicado, por isso, se eu adicionar

86
00:07:19,640 --> 00:07:21,860
onSubmitEditing aqui, quando eu adicione também

87
00:07:21,860 --> 00:07:30,820
este ouvinte e também adicione uma instrução de log do console, você verá que agora isso será acionado, sempre que digito aqui, não

88
00:07:30,820 --> 00:07:37,820
é acionado, sempre que clico aqui fora, também não é acionado, obtemos apenas o onEndEditing faça logon aqui,

89
00:07:37,960 --> 00:07:39,130
mas ele

90
00:07:39,130 --> 00:07:45,600
será acionado se eu pressionar a tecla mais larga aqui, você vê emSubmitEditing, portanto, este é um

91
00:07:45,610 --> 00:07:47,290
ouvinte que você usaria

92
00:07:47,290 --> 00:07:52,870
para ouvir quando a tecla de retorno é clicada e, em seguida, você pode

93
00:07:52,870 --> 00:07:59,230
fazer o que quiser, como enviar seu dados ou mova automaticamente o foco para a próxima

94
00:07:59,230 --> 00:08:03,090
entrada com a ajuda de referências, por exemplo, se desejar.

95
00:08:03,200 --> 00:08:08,240
É assim que você pode configurar isso e, como eu disse, eu recomendaria que você mergulhasse nisso

96
00:08:08,240 --> 00:08:10,370
para ter uma ideia de como

97
00:08:10,400 --> 00:08:16,160
isso funciona. Agora vou seguir em frente e quero ter certeza de que não apenas ouviremos as entradas e

98
00:08:16,160 --> 00:08:19,460
armazene os valores, mas também validamos o que o usuário digita.