1 00:00:02,140 --> 00:00:06,630 Agora começamos a trabalhar na entrada e ela não parece muito ruim, mas queremos garantir 2 00:00:06,630 --> 00:00:13,980 que os usuários possam digitar apenas números que sejam apenas dígitos e que não possamos inserir um ponto aqui ou uma vírgula ou colar em 3 00:00:13,980 --> 00:00:16,440 alguns caracteres não- conteúdo numérico e, para 4 00:00:16,530 --> 00:00:20,280 isso, é claro que precisamos validar o que o usuário digitou aqui. 5 00:00:20,550 --> 00:00:27,900 Agora, para validar o que o usuário digitou, quero, como já mostrei antes, basicamente salvou o valor que o usuário digitou 6 00:00:27,900 --> 00:00:28,440 em 7 00:00:28,440 --> 00:00:33,510 cada pressionamento de tecla e o alimenta de volta na entrada, mas após cada 8 00:00:33,510 --> 00:00:39,000 pressionamento de tecla, também quero validar a entrada a ser feita certifique-se de que temos 9 00:00:39,000 --> 00:00:44,770 um valor válido lá, então basicamente um número. Antes de tudo, precisamos gerenciar algum estado 10 00:00:44,860 --> 00:00:54,510 aqui na tela inicial do jogo, então importarei use state e, em seguida, aqui no início deste componente, configurarei minha chamada de estado de uso, 11 00:00:54,520 --> 00:01:02,180 portanto, registre alguns state e esse será o valor inserido e, mesmo que esse seja um número mais tarde, 12 00:01:02,300 --> 00:01:08,000 tecnicamente é uma string no início, porque toda a entrada é apenas uma string 13 00:01:08,000 --> 00:01:09,080 e você 14 00:01:09,080 --> 00:01:15,170 deve manualmente convertê-la em um número, se desejar. Também adicionarei uma função de valor inserido aqui, o 15 00:01:15,170 --> 00:01:19,220 segundo elemento que recuperamos desse estado de uso da matriz nos fornece e 16 00:01:19,430 --> 00:01:25,660 agora podemos adicionar uma constante aqui, que nomeei como manipulador de entrada de número ou o que você quiser nomear. 17 00:01:25,700 --> 00:01:32,830 Isso obterá o texto de entrada e essa é a função, porque é apenas uma 18 00:01:32,830 --> 00:01:40,690 função que estou armazenando nessa constante que quero conectar à minha entrada e ao onChangeText, aponte para 19 00:01:40,960 --> 00:01:43,930 o manipulador de entrada de 20 00:01:43,930 --> 00:01:48,330 número e alimente o valor de volta. valor inserido. 21 00:01:48,420 --> 00:01:54,480 Agora, normalmente, diríamos apenas definir valor inserido aqui e definir o texto de entrada como nosso 22 00:01:54,480 --> 00:01:56,720 novo valor inserido, que retornamos 23 00:01:56,820 --> 00:02:01,220 à entrada, mas aqui, na verdade, antes de tudo, valido a entrada. 24 00:02:01,290 --> 00:02:06,300 Então, o que vou fazer aqui é não definir meu valor inserido como 25 00:02:06,330 --> 00:02:15,790 texto aqui. Em vez disso, definirei meu texto de entrada onde substituo e posso chamar de substituir porque o texto de entrada será uma 26 00:02:15,790 --> 00:02:22,450 sequência e isso é um método Javascript normal que existe em strings, onde substituo algum conteúdo com 27 00:02:22,450 --> 00:02:27,430 base em uma expressão regular. Agora, expressões regulares podem ser assustadoras, 28 00:02:27,430 --> 00:02:36,010 mas é simples, criamos com duas barras e adicionamos colchetes e, basicamente, com essa expressão, digamos que estou substituindo qualquer coisa que 29 00:02:36,040 --> 00:02:45,250 não seja um número de 0 a 9, então não é um número, globalmente no texto inteiro, o que significa que ele não 30 00:02:45,250 --> 00:02:51,630 procurará apenas basicamente o primeiro hit, mas pesquisará todo o texto. Eu o substituirei por uma 31 00:02:52,850 --> 00:02:53,940 string vazia, 32 00:02:56,620 --> 00:03:02,440 então basicamente eliminarei qualquer número não valor. É o que está acontecendo aqui e é o que 33 00:03:02,440 --> 00:03:04,540 eu guardo no meu novo estado 34 00:03:04,600 --> 00:03:09,460 e, com isso, devemos garantir que o usuário não possa inserir nada que não seja um número. 35 00:03:09,460 --> 00:03:11,410 Então, vamos verificar isso aqui 36 00:03:11,410 --> 00:03:16,720 no Android, se eu pressionar a vírgula, você verá que instantaneamente é removido e é 37 00:03:16,720 --> 00:03:19,960 exatamente isso que precisamos aqui, apenas permitimos valores numéricos. 38 00:03:19,960 --> 00:03:24,030 Portanto, isso é um pouco de validação que temos 39 00:03:24,030 --> 00:03:32,890 aqui, não é tudo o que quero, mas ainda não terminamos a entrada porque no iOS, se estamos nesse modo de entrada 40 00:03:32,890 --> 00:03:37,410 e queremos fechar o teclado, agora isso não é realmente factível. 41 00:03:37,420 --> 00:03:44,500 Não podemos clicar fora e fechá-lo e seria bom se pudéssemos. Agora, para garantir que possamos fechar o teclado se 42 00:03:44,500 --> 00:03:47,960 o usuário tocar em outro lugar, na verdade 43 00:03:48,160 --> 00:03:56,020 envolverei toda a exibição aqui com um componente especial fornecido pelo React Native e esse é o componente tocável 44 00:03:56,020 --> 00:03:58,490 sem feedback, portanto, um componente que 45 00:03:58,630 --> 00:04:04,960 nos permite registrar um ouvinte sensível ao toque sem fornecer feedback visual, porque é exatamente 46 00:04:04,960 --> 00:04:07,060 isso que precisamos aqui. 47 00:04:07,150 --> 00:04:11,080 Podemos envolver nossa tela inteira com isso, para que toda a 48 00:04:11,080 --> 00:04:18,190 nossa visão possa ser envolvida com esse toque, sem o ouvinte de feedback, para que lá ou ali, agora possamos 49 00:04:18,190 --> 00:04:24,070 registrar ou ouvir o evento da imprensa e, quando uma imprensa acontecer, eu quero dispensar o 50 00:04:24,070 --> 00:04:30,010 teclado e, para isso, o React Native nos fornece uma API útil que podemos importar do 51 00:04:30,010 --> 00:04:37,240 React Native e essa é a API do teclado. Agora isso não é um componente, mas é uma API na qual 52 00:04:37,240 --> 00:04:43,820 podemos interagir com o próprio dispositivo nativo, por assim dizer, neste caso com o teclado e aqui, ao pressionar este botão, quero 53 00:04:43,820 --> 00:04:50,230 disparar uma função e aqui irei com uma função embutida simples, uma função anônima curta, é claro que você também pode 54 00:04:50,230 --> 00:04:52,700 usar uma função nomeada, mas aqui tudo o 55 00:04:52,870 --> 00:04:57,230 que quero fazer é chamar o teclado. dispensar. 56 00:04:57,310 --> 00:05:02,680 Essa é uma função que a API do teclado que estamos importando do React Native nos fornece e faz 57 00:05:02,680 --> 00:05:04,220 exatamente o que os 58 00:05:04,360 --> 00:05:06,570 nomes sugerem, para que agora, se tocarmos aqui, 59 00:05:06,580 --> 00:05:12,610 podemos digitar, mas se eu tocar em outro lugar, descartamos o teclado e o de O curso acontece nas duas plataformas 60 00:05:12,640 --> 00:05:17,740 e acho que é uma experiência melhor para o usuário, porque é o que você esperaria, que 61 00:05:18,160 --> 00:05:21,040 fechasse o teclado se tocar em outro lugar na tela.