Então, passo a passo, estamos progredindo, o que não
podemos fazer é inserir um número.
Bem, eu acho que tecnicamente podemos digitar um número se encontrarmos o campo de entrada, aqui está, mas não
é muito divertido procurá-lo, seria melhor se você pudesse vê-lo, não?
Portanto, vamos estilizar esse campo de entrada, esse
campo de entrada de texto aqui um pouco e, como antes, na verdade, eu fiz isso em um componente
separado.
Portanto, na pasta de componentes, adicionarei minha própria entrada. js e lá dentro, como sempre importe o React do React e,
em seguida, importe a entrada de texto do React Native e aqui, na verdade, não precisarei da
visualização, pois apenas a entrada de texto aqui está em estilo e configurada aqui e,
em seguida, temos o constante de entrada aqui, que é o nosso componente funcional, que no final exportamos, é claro, e uma
coisa de que precisamos com certeza
é a folha de estilo, porque agora deve ser estilizada aqui para que tenhamos uma aparência de
entrada padrão que poderíamos reutilizar neste aplicação, se precisávamos de várias entradas em lugares
diferentes e essa
é realmente a mentalidade em que você deve entrar, crie componentes reutilizáveis para
que você não precise copiar código ou se repetir, mas que possa compartilhar seus componentes e criar aplicativos
com facilidade você deseja obter o conjunto de blocos de construção que você mesmo criou no final.
Então, aqui, meus estilos se opõem à Folha de estilo. criar, assim, fica bem e agora nesse componente, quero retornar
uma entrada de texto,
portanto essa entrada de texto embutida.
Agora, é claro, minha ideia é que podemos
estilizá-lo daqui, então vamos atribuir um estilo a partir daqui, mas, assim como no cartão, seria bom se pudéssemos também definir alguns estilos de fora,
como uma largura especial ou uma borda especial, qualquer coisa assim. Para habilitar isso, novamente eu passarei um objeto
aqui para estilizar e, por
exemplo, pegue todos os meus estilos configurados no meu objeto styles e digamos em uma
propriedade de entrada que ainda precisamos adicionar e também adicione todos os estilos que está obtendo do estilo props para que possamos
definir estilos de fora também e agora na folha de estilo, podemos adicionar o
estilo de entrada para atribuir algum estilo à entrada. Então, aqui, podemos dar uma altura de, digamos, 30, que deve
ser uma altura que pareça relativamente boa e, para ver alguma coisa, eu também quero adicionar uma borda na parte inferior.
Você também pode adicionar uma borda ao redor de toda a entrada com a cor e a largura da borda e assim
por diante, mas eu gosto desse visual em que só temos uma borda abaixo da entrada, mas é claro que é
totalmente subjetivo e algo que você pode configurar de acordo com suas preferências pessoais .
Uma borda na parte inferior só pode ser definida com a cor inferior da borda e lá vou
eu com cinza, outra cor pré-criada que podemos usar com esse atalho e dar a essa borda inferior também uma largura aqui de uma, adicione uma
margem vertical de 10 para ter algum espaçamento ao redor da entrada, pelo menos para cima e
para baixo e agora com isso, o estilo
base para esta entrada
de texto está pronto, agora vamos usá-lo na tela do jogo. Então, lá, eu quero importar minha própria entrada da pasta de
componentes, assim e substituir essa entrada de texto
aqui por minha própria entrada que, no final, envolve essa entrada de texto embutida, é
claro.
Então, use
minha própria entrada, livre-se da entrada de texto que não precisamos mais
e agora, se salvarmos, a vemos um pouco, mas é muito pequena, você mal consegue vê-la aqui no iOS e fica
maior à medida que você digita, o que certamente não é o que queremos, é claro.
É claro que ainda não terminamos.
Em vez de estilizar a largura, vou
para a tela inicial do
jogo, então, para o local em que usamos a entrada e configuramos
o estilo aqui, porque para mim faz sentido que tenhamos alguma noção geral. estilos que sempre
desejamos no componente de entrada, algo como a altura ou a borda, mas alguns estilos específicos, como o
tamanho,
a largura e a largura, é algo que você deseja
configurar no local em que realmente usa e, portanto, aqui, adicionarei essa propriedade de entrada no objeto da folha de estilo da tela de início do
jogo e talvez use uma largura de 50 pixels aqui, que deve parecer boa e atribuí-la à minha entrada personalizada aqui
com o estilo prop.
Então, agora, podemos apontar para estilos. entrada e, com isso, ele terá essa largura o tempo
todo e, se digitarmos lá, não a
tornaremos mais ampla; em vez disso, podemos simplesmente rolar automaticamente nessa entrada.
Agora, para esta entrada específica, para este layout específico aqui, também seria bom se o texto
fosse
centralizado, eu acho, para a maioria das entradas você deseja esse comportamento padrão de escrever da esquerda
para a direita
e começar na borda esquerda, mas aqui eu acho algum texto centralizado seria bom e, portanto, na tela inicial do jogo,
onde eu quero que esta centralize aqui, nesta entrada,
também podemos adicionar a propriedade de alinhamento de texto e configurá-la para centralizar e agora isso centralizará este texto aqui
no meio, como digitamos e
isso é muito bom apenas digitar um número, dessa forma.
Por falar nisso, agora podemos inserir qualquer coisa
lá, então certamente precisamos configurar essa entrada e, para isso, se eu for para o
componente de entrada onde usamos a entrada de texto, há muitas coisas que podemos configurar lá e
realmente o melhor recurso é sempre a documentação oficial. Lá nos documentos da API, se você for lá e
procurar a entrada de texto, encontrará não apenas uma explicação, mas também todos os acessórios que você pode definir lá e
definir coisas como multilinhas ou não , quanto
tempo o texto pode ser.
Você também pode definir um
texto de espaço reservado, definir a autocorreção e todas essas coisas divertidas. Verifique
esses documentos para encontrar a propriedade específica que você pode precisar para o seu caso de uso.
Quero poder definir esses objetos, mas quero defini-los no local em que
uso minha entrada personalizada. Portanto, não daqui, porque isso garantiria o uso da
mesma configuração para todas as entradas
que possamos ter em nosso aplicativo. Quero ter mais flexibilidade e apenas definir um estilo básico aqui e configurar
a entrada no local em que use-o em vez de no componente principal do wrapper.
O legal é React e isso não é React Native, é apenas React no Javascript normal, tem uma
sintaxe para isso.
Você pode pegar seus adereços que está recebendo e espalhá-los em seu componente assim.
A sintaxe pode parecer um pouco estranha, mas no final, ela usa todos
os acessórios que você possui, todos os acessórios que você define aqui e basicamente os adiciona ao seu componente como acessórios.
Agora, se você definir outros adereços, como estilo, e já tiver um estilo aqui, esse
estilo substituirá o estilo que você tem
aqui e é isso que eu quero, porque se eu definir um adereço de estilo em minha própria
entrada de fora, eu definitivamente deseja substituir isso por este suporte de estilo e adicionar esse estilo que está configurado lá para
esta entrada
de texto, mas se você configurar outros acessórios fora desse componente, no meu componente personalizado, eles serão adicionados à
entrada de texto e que nos permite adicionar todos os acessórios que podemos adicionar na entrada de texto
também em nossa entrada, assim como em nosso próprio componente.
Portanto, aqui onde usamos a entrada, agora podemos não apenas adicionar o estilo, mas também adicionar o blurOnSubmit, por exemplo,
para garantir que, ao pressionar o botão enviar, perquemos o foco
e fechemos o teclado virtual. Podemos definir a autocapitalização para nenhum, que é um dos valores permitidos,
se você verificar os documentos. Você pode defini-lo como none, sentenças, palavras
e assim por diante, para que eu não queira que as letras maiúsculas estejam ativadas aqui, porque apenas digitaremos o
número, mas também porque quero mostrar as diferentes configurações que você pode definir. Definirei aqui a correção automática aqui como falsa,
para não corrigirmos automaticamente a entrada do usuário e muito importante aqui,
definirei o tipo de teclado como numérico, para que o usuário precise digitar um número aqui.
Vou definir o comprimento máximo aqui como 2, para que você possa digitar apenas dois dígitos e não um número
muito longo, porque este jogo aqui e é apenas uma das restrições que tenho aqui, é que este jogo funciona
apenas com dois dígitos número. Com tudo isso configurado,
agora, se voltarmos e eu alternar meu teclado virtual, você verá esse teclado numérico aqui e poderá
digitar apenas dois dígitos e não mais do que isso, o que é obviamente exatamente o que eu quero.
Além disso, aqui no Android, vemos isso: se você clicar no botão confirmar,
isso será fechado, graças a essa coisa blurOnSubmit. No iOS, esse botão não existe aqui, então, na verdade, teremos que
encontrar uma solução diferente para fechar isso, se você tocar em outro lugar, por exemplo, porque agora,
isso não está acontecendo.
Mas o bom é que agora temos um teclado que podemos ver e um teclado onde podemos inserir números.
Uma coisa que quero mudar é que, agora, também posso inserir um separador decimal aqui.
Agora, para se livrar disso, você pode alterar o tipo de teclado para teclado numérico e ver todos os tipos de teclado disponíveis. Como sempre, os
documentos oficiais são o local ideal; lá, para a entrada de texto, você pode mergulhar em um tipo de teclado e
encontrar descubra o que você pode definir, o que funciona em todas as plataformas e o que você pode definir
se você tiver uma verificação que verifica em qual plataforma está executando o código sobre o qual ainda não
aprendemos.
O teclado numérico é suportado nas duas plataformas e, se
você definir isso, agora terá uma entrada na qual não poderá inserir uma casa decimal aqui, se
digitar aqui e não conseguir fazê-lo no iOS. Infelizmente, no Android, você pode, por isso,
também precisamos encontrar uma solução diferente.