Agora começamos a trabalhar na entrada e ela não parece muito ruim, mas queremos garantir
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
alguns caracteres não- conteúdo numérico e, para
isso, é claro que precisamos validar o que o usuário digitou aqui.
Agora, para validar o que o usuário digitou, quero, como já mostrei antes, basicamente salvou o valor que o usuário digitou
em
cada pressionamento de tecla e o alimenta de volta na entrada, mas após cada
pressionamento de tecla, também quero validar a entrada a ser feita certifique-se de que temos
um valor válido lá, então basicamente um número. Antes de tudo, precisamos gerenciar algum estado
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,
portanto, registre alguns state e esse será o valor inserido e, mesmo que esse seja um número mais tarde,
tecnicamente é uma string no início, porque toda a entrada é apenas uma string
e você
deve manualmente convertê-la em um número, se desejar. Também adicionarei uma função de valor inserido aqui, o
segundo elemento que recuperamos desse estado de uso da matriz nos fornece e
agora podemos adicionar uma constante aqui, que nomeei como manipulador de entrada de número ou o que você quiser nomear.
Isso obterá o texto de entrada e essa é a função, porque é apenas uma
função que estou armazenando nessa constante que quero conectar à minha entrada e ao onChangeText, aponte para
o manipulador de entrada de
número e alimente o valor de volta. valor inserido.
Agora, normalmente, diríamos apenas definir valor inserido aqui e definir o texto de entrada como nosso
novo valor inserido, que retornamos
à entrada, mas aqui, na verdade, antes de tudo, valido a entrada.
Então, o que vou fazer aqui é não definir meu valor inserido como
texto aqui. Em vez disso, definirei meu texto de entrada onde substituo e posso chamar de substituir porque o texto de entrada será uma
sequência e isso é um método Javascript normal que existe em strings, onde substituo algum conteúdo com
base em uma expressão regular. Agora, expressões regulares podem ser assustadoras,
mas é simples, criamos com duas barras e adicionamos colchetes e, basicamente, com essa expressão, digamos que estou substituindo qualquer coisa que
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
procurará apenas basicamente o primeiro hit, mas pesquisará todo o texto. Eu o substituirei por uma
string vazia,
então basicamente eliminarei qualquer número não valor. É o que está acontecendo aqui e é o que
eu guardo no meu novo estado
e, com isso, devemos garantir que o usuário não possa inserir nada que não seja um número.
Então, vamos verificar isso aqui
no Android, se eu pressionar a vírgula, você verá que instantaneamente é removido e é
exatamente isso que precisamos aqui, apenas permitimos valores numéricos.
Portanto, isso é um pouco de validação que temos
aqui, não é tudo o que quero, mas ainda não terminamos a entrada porque no iOS, se estamos nesse modo de entrada
e queremos fechar o teclado, agora isso não é realmente factível.
Não podemos clicar fora e fechá-lo e seria bom se pudéssemos. Agora, para garantir que possamos fechar o teclado se
o usuário tocar em outro lugar, na verdade
envolverei toda a exibição aqui com um componente especial fornecido pelo React Native e esse é o componente tocável
sem feedback, portanto, um componente que
nos permite registrar um ouvinte sensível ao toque sem fornecer feedback visual, porque é exatamente
isso que precisamos aqui.
Podemos envolver nossa tela inteira com isso, para que toda a
nossa visão possa ser envolvida com esse toque, sem o ouvinte de feedback, para que lá ou ali, agora possamos
registrar ou ouvir o evento da imprensa e, quando uma imprensa acontecer, eu quero dispensar o
teclado e, para isso, o React Native nos fornece uma API útil que podemos importar do
React Native e essa é a API do teclado. Agora isso não é um componente, mas é uma API na qual
podemos interagir com o próprio dispositivo nativo, por assim dizer, neste caso com o teclado e aqui, ao pressionar este botão, quero
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
usar uma função nomeada, mas aqui tudo o
que quero fazer é chamar o teclado. dispensar.
Essa é uma função que a API do teclado que estamos importando do React Native nos fornece e faz
exatamente o que os
nomes sugerem, para que agora, se tocarmos aqui,
podemos digitar, mas se eu tocar em outro lugar, descartamos o teclado e o de O curso acontece nas duas plataformas
e acho que é uma experiência melhor para o usuário, porque é o que você esperaria, que
fechasse o teclado se tocar em outro lugar na tela.