Portanto, para isso, como mencionado, estou de volta ao projeto em que trabalhamos e, é claro, agora a tela
de edição do produto aqui é o
que me interessa. Essa é a tela em que tenho essas entradas de texto aqui com meus rótulos e depois com o botão
entrada de texto, onde atualmente temos uma manipulação de entrada muito básica,
estamos pelo menos buscando a entrada do usuário e armazenando-a com a ajuda do estado React, com o gancho de
estado de
uso, e depois inserimos os valores do Android na entrada e é isso.
Isso nos permite capturar e usar a entrada do usuário, mas, por um lado, podemos melhorar a maneira como
fazemos isso, podemos escrever isso de uma maneira mais reutilizável e não estamos fazendo nenhuma
validação, portanto, é isso que quero mudar neste módulo.
Além disso, também não estamos configurando nossas entradas de maneira alguma, o que significa
que agora todas as entradas de texto são iguais.
Nós não mudamos o tipo de teclado que
estamos apresentando, não estamos oferecendo entradas multilinhas, por exemplo, para textos mais longos, como aqui
para a descrição, nada disso está acontecendo e, portanto, vamos começar a configurar essas entradas
antes de prosseguirmos. para validação e assim por diante. Uma configuração importante que você pode adicionar aos teclados
é o tipo de teclado. O tipo de teclado prop pode ser definido e você tem alguns valores disponíveis. Agora você tem alguns valores
aqui, mas os documentos oficiais também são um lugar que você deve consultar ao pensar sobre o
tipo que deseja atribuir aqui, porque quando visita a documentação oficial de entrada de texto, é claro que você vê
alguns exemplos, mas depois você também vê todos os acessórios que possui e, pode aprender
mais sobre cada acessório e como configurá-lo. Para o tipo
de teclado, por exemplo, aprendemos que apenas esses tipos são compatíveis com várias plataformas.
Portanto, embora tenhamos tipos específicos para iOS e Android disponíveis, esses tipos só podem ser usados junto com uma verificação
de plataforma, para garantir que você
não use o tipo no Android que não é suportado lá e que, portanto, não
teria nenhum efeito.
Portanto, continuarei com os tipos de plataforma cruzada, para que não precise adicionar uma verificação extra de plataforma e, normalmente, digamos
texto normal, manteremos o padrão, o que, obviamente, é um tipo que não o fazemos. precisamos atribuir, mas
isso, por exemplo, muda quando analisamos nossa entrada de preço. Lá, quero ter certeza de que as pessoas digitam apenas
números válidos, que não digitem texto e, portanto, é claro que quero mostrar o teclado certo para ajudá-las com isso
e, se dermos uma olhada na documentação oficial, veremos
que existem três tipos principais de teclados de plataforma cruzada que podemos mostrar - teclado
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
que eu quero aqui pelo meu preço. Portanto, definir esse tipo de teclado aqui faz
muito sentido, porque agora, se dermos uma olhada nessa entrada de preço
aqui e alterno o teclado virtual que você pode fazer com o atalho de comando k aqui no iOS ou com
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,
enquanto nas outras entradas eu tenho um teclado de texto normal e, claro, é o
mesmo no Android.
Se formos para o administrador lá e depois vermos o preço, também veremos que lá, somos apresentados a essa
entrada amigável de número, em vez do teclado de texto normal que encontramos nos outros campos de entrada.
Então é assim que podemos configurar isso e essa é, obviamente, uma configuração importante. Também podemos configurar outras coisas,
por exemplo, aqui na entrada do título aqui.
Se você pressionar o espaço de controle e observar o preenchimento automático, verá que várias coisas podem ser
configuradas, por exemplo, se isso deve ser capitalizado automaticamente. Lá você tem valores diferentes que
podem ser definidos, por exemplo, que o caractere deve ser maiúsculo, apenas frases ou palavras
completas e aqui, eu vou usar frases completas, por exemplo, para ajudar a capitalizá-las.
Você também pode ativar a correção automática e, adicionando-a assim, assegura que a correção automática esteja ativada para
esta entrada, definindo-a como false, você pode desativá-la ou apenas omitindo-a, é claro, isso também
é uma opção e assim por diante . Há várias coisas que você pode configurar e eu
recomendo fortemente, como sempre, que você dê uma olhada nos documentos oficiais, para aprender sobre as opções de configuração
disponíveis e o que elas fazem,
também simplesmente brinque com elas para que você obtenha uma idéia do que você pode fazer lá e o que cada
opção faz e o que pode fazer sentido para o seu próximo aplicativo. Um outro valor que desejo definir, por exemplo, é o
tipo de chave de retorno.
Isso pode ser definido como alguns valores
e, novamente, se você verificar os documentos oficiais, aprenderá que nem todos os valores estão disponíveis em
todas as plataformas, apenas esses cinco estão disponíveis em várias plataformas e, basicamente, você pode configurar esse botão
na parte inferior Esquina direita. Se você der uma olhada na sua
entrada aqui e clicar em qualquer uma das entradas, é este botão aqui no canto inferior direito que indica
retornar aqui para o imageUrl. Agora, no título, defino-o para o próximo;
portanto, se você clicar no campo do título, verá agora um texto mais amplo, que é o alemão para o próximo
e isso é apenas porque eu tenho um emulador alemão aqui e deixe-me reiniciar também no Android porque caiu lá para
que eu possa mostrá-lo também.
Se formos para a nossa entrada lá, clicar no título, você verá este próximo botão aqui, no imageUrl,
você terá este botão pronto aqui e que pode ser configurado com o tipo de chave
de retorno, embora esteja ciente de que isso só controla como isso é exibido, o que diz lá, qual é
o rótulo lá ou que tipo de
botão é apresentado, não muda automaticamente o que esse botão faz; por exemplo, se eu clicar no botão mais
largo, este
teclado fecha, o mesmo acontece se Clico na chave de retorno aqui.
Agora, quando falamos sobre comportamentos de entradas de texto, todos os eventos que podemos ouvir são interessantes.
Com on, você tem uma idéia de todos os eventos que pode
ouvir e, por exemplo, no onBlur, que é acionado sempre que uma entrada perde o foco, o onChange é acionado, portanto, a
cada pressionamento de tecla e o evento de entrada completo, onChangeText, que também é acionado em cada pressionamento de tecla,
mas apenas fornece o texto digitado, que normalmente é o que mais lhe interessa.
onEndEditing, onde também podemos ter uma idéia de quando isso é acionado, por isso, se eu inserir onEndEditing aqui, vamos ver quando
isso será impresso no console,
se agora for para minha entrada e observe que estou na entrada do título, por isso, se Eu digito lá test, vemos que
ele não disparou aqui, se eu clicar
fora disso, agora ele disparou em EndEditing. O mesmo acontece se eu clicar no botão
mais largo aqui, por exemplo, então basicamente sempre que deixamos este teclado com o foco ou, em geral, quando clicamos
no botão pronto também.
Além disso, também temos outros ouvintes, como o onFocus, que obviamente dispara quando essa entrada ganha foco, ou
também noSelectionChange quando selecionamos texto lá ou no onSubmitEditing, que é acionado quando esse botão de retorno é clicado, por isso, se eu adicionar
onSubmitEditing aqui, quando eu adicione também
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
é acionado, sempre que clico aqui fora, também não é acionado, obtemos apenas o onEndEditing faça logon aqui,
mas ele
será acionado se eu pressionar a tecla mais larga aqui, você vê emSubmitEditing, portanto, este é um
ouvinte que você usaria
para ouvir quando a tecla de retorno é clicada e, em seguida, você pode
fazer o que quiser, como enviar seu dados ou mova automaticamente o foco para a próxima
entrada com a ajuda de referências, por exemplo, se desejar.
É assim que você pode configurar isso e, como eu disse, eu recomendaria que você mergulhasse nisso
para ter uma ideia de como
isso funciona. Agora vou seguir em frente e quero ter certeza de que não apenas ouviremos as entradas e
armazene os valores, mas também validamos o que o usuário digita.