1 00:00:02,390 --> 00:00:05,610 Então, passo a passo, estamos progredindo, o que não 2 00:00:05,660 --> 00:00:08,150 podemos fazer é inserir um número. 3 00:00:08,150 --> 00:00:14,090 Bem, eu acho que tecnicamente podemos digitar um número se encontrarmos o campo de entrada, aqui está, mas não 4 00:00:14,090 --> 00:00:17,920 é muito divertido procurá-lo, seria melhor se você pudesse vê-lo, não? 5 00:00:18,680 --> 00:00:22,270 Portanto, vamos estilizar esse campo de entrada, esse 6 00:00:22,280 --> 00:00:30,470 campo de entrada de texto aqui um pouco e, como antes, na verdade, eu fiz isso em um componente 7 00:00:30,470 --> 00:00:31,260 separado. 8 00:00:31,310 --> 00:00:40,520 Portanto, na pasta de componentes, adicionarei minha própria entrada. js e lá dentro, como sempre importe o React do React e, 9 00:00:40,520 --> 00:00:46,580 em seguida, importe a entrada de texto do React Native e aqui, na verdade, não precisarei da 10 00:00:46,580 --> 00:00:51,970 visualização, pois apenas a entrada de texto aqui está em estilo e configurada aqui e, 11 00:00:51,970 --> 00:00:59,880 em seguida, temos o constante de entrada aqui, que é o nosso componente funcional, que no final exportamos, é claro, e uma 12 00:00:59,880 --> 00:01:01,980 coisa de que precisamos com certeza 13 00:01:02,280 --> 00:01:08,550 é a folha de estilo, porque agora deve ser estilizada aqui para que tenhamos uma aparência de 14 00:01:08,550 --> 00:01:13,710 entrada padrão que poderíamos reutilizar neste aplicação, se precisávamos de várias entradas em lugares 15 00:01:13,710 --> 00:01:15,120 diferentes e essa 16 00:01:15,120 --> 00:01:20,130 é realmente a mentalidade em que você deve entrar, crie componentes reutilizáveis para 17 00:01:20,130 --> 00:01:26,460 que você não precise copiar código ou se repetir, mas que possa compartilhar seus componentes e criar aplicativos 18 00:01:26,460 --> 00:01:32,700 com facilidade você deseja obter o conjunto de blocos de construção que você mesmo criou no final. 19 00:01:32,700 --> 00:01:41,650 Então, aqui, meus estilos se opõem à Folha de estilo. criar, assim, fica bem e agora nesse componente, quero retornar 20 00:01:41,710 --> 00:01:44,230 uma entrada de texto, 21 00:01:44,230 --> 00:01:46,990 portanto essa entrada de texto embutida. 22 00:01:46,990 --> 00:01:49,830 Agora, é claro, minha ideia é que podemos 23 00:01:49,870 --> 00:01:58,180 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, 24 00:01:58,180 --> 00:02:05,200 como uma largura especial ou uma borda especial, qualquer coisa assim. Para habilitar isso, novamente eu passarei um objeto 25 00:02:05,380 --> 00:02:08,050 aqui para estilizar e, por 26 00:02:08,050 --> 00:02:14,470 exemplo, pegue todos os meus estilos configurados no meu objeto styles e digamos em uma 27 00:02:14,470 --> 00:02:23,970 propriedade de entrada que ainda precisamos adicionar e também adicione todos os estilos que está obtendo do estilo props para que possamos 28 00:02:23,970 --> 00:02:30,060 definir estilos de fora também e agora na folha de estilo, podemos adicionar o 29 00:02:30,060 --> 00:02:37,180 estilo de entrada para atribuir algum estilo à entrada. Então, aqui, podemos dar uma altura de, digamos, 30, que deve 30 00:02:37,180 --> 00:02:43,420 ser uma altura que pareça relativamente boa e, para ver alguma coisa, eu também quero adicionar uma borda na parte inferior. 31 00:02:43,450 --> 00:02:49,120 Você também pode adicionar uma borda ao redor de toda a entrada com a cor e a largura da borda e assim 32 00:02:49,310 --> 00:02:54,970 por diante, mas eu gosto desse visual em que só temos uma borda abaixo da entrada, mas é claro que é 33 00:02:55,060 --> 00:02:59,120 totalmente subjetivo e algo que você pode configurar de acordo com suas preferências pessoais . 34 00:02:59,250 --> 00:03:06,160 Uma borda na parte inferior só pode ser definida com a cor inferior da borda e lá vou 35 00:03:06,160 --> 00:03:16,110 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 36 00:03:16,110 --> 00:03:22,680 margem vertical de 10 para ter algum espaçamento ao redor da entrada, pelo menos para cima e 37 00:03:22,890 --> 00:03:26,380 para baixo e agora com isso, o estilo 38 00:03:26,400 --> 00:03:28,170 base para esta entrada 39 00:03:28,170 --> 00:03:36,660 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 40 00:03:36,660 --> 00:03:39,890 componentes, assim e substituir essa entrada de texto 41 00:03:40,930 --> 00:03:46,690 aqui por minha própria entrada que, no final, envolve essa entrada de texto embutida, é 42 00:03:46,690 --> 00:03:47,440 claro. 43 00:03:47,500 --> 00:03:48,510 Então, use 44 00:03:48,510 --> 00:03:52,300 minha própria entrada, livre-se da entrada de texto que não precisamos mais 45 00:03:52,600 --> 00:03:59,370 e agora, se salvarmos, a vemos um pouco, mas é muito pequena, você mal consegue vê-la aqui no iOS e fica 46 00:03:59,410 --> 00:04:04,600 maior à medida que você digita, o que certamente não é o que queremos, é claro. 47 00:04:04,900 --> 00:04:06,590 É claro que ainda não terminamos. 48 00:04:07,200 --> 00:04:09,290 Em vez de estilizar a largura, vou 49 00:04:09,300 --> 00:04:10,950 para a tela inicial do 50 00:04:10,980 --> 00:04:14,460 jogo, então, para o local em que usamos a entrada e configuramos 51 00:04:14,460 --> 00:04:19,200 o estilo aqui, porque para mim faz sentido que tenhamos alguma noção geral. estilos que sempre 52 00:04:19,380 --> 00:04:24,720 desejamos no componente de entrada, algo como a altura ou a borda, mas alguns estilos específicos, como o 53 00:04:24,720 --> 00:04:25,230 tamanho, 54 00:04:25,350 --> 00:04:28,480 a largura e a largura, é algo que você deseja 55 00:04:28,650 --> 00:04:36,150 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 56 00:04:36,150 --> 00:04:42,360 jogo e talvez use uma largura de 50 pixels aqui, que deve parecer boa e atribuí-la à minha entrada personalizada aqui 57 00:04:42,450 --> 00:04:43,760 com o estilo prop. 58 00:04:43,830 --> 00:04:51,840 Então, agora, podemos apontar para estilos. entrada e, com isso, ele terá essa largura o tempo 59 00:04:51,840 --> 00:04:55,380 todo e, se digitarmos lá, não a 60 00:04:55,380 --> 00:05:00,040 tornaremos mais ampla; em vez disso, podemos simplesmente rolar automaticamente nessa entrada. 61 00:05:00,150 --> 00:05:05,760 Agora, para esta entrada específica, para este layout específico aqui, também seria bom se o texto 62 00:05:05,760 --> 00:05:06,500 fosse 63 00:05:06,600 --> 00:05:12,330 centralizado, eu acho, para a maioria das entradas você deseja esse comportamento padrão de escrever da esquerda 64 00:05:12,330 --> 00:05:13,220 para a direita 65 00:05:13,260 --> 00:05:20,480 e começar na borda esquerda, mas aqui eu acho algum texto centralizado seria bom e, portanto, na tela inicial do jogo, 66 00:05:20,480 --> 00:05:23,550 onde eu quero que esta centralize aqui, nesta entrada, 67 00:05:23,660 --> 00:05:30,470 também podemos adicionar a propriedade de alinhamento de texto e configurá-la para centralizar e agora isso centralizará este texto aqui 68 00:05:30,470 --> 00:05:32,330 no meio, como digitamos e 69 00:05:32,330 --> 00:05:35,830 isso é muito bom apenas digitar um número, dessa forma. 70 00:05:36,920 --> 00:05:40,260 Por falar nisso, agora podemos inserir qualquer coisa 71 00:05:40,550 --> 00:05:45,980 lá, então certamente precisamos configurar essa entrada e, para isso, se eu for para o 72 00:05:45,980 --> 00:05:52,250 componente de entrada onde usamos a entrada de texto, há muitas coisas que podemos configurar lá e 73 00:05:52,250 --> 00:05:59,030 realmente o melhor recurso é sempre a documentação oficial. Lá nos documentos da API, se você for lá e 74 00:05:59,030 --> 00:06:05,990 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 75 00:06:06,320 --> 00:06:09,230 definir coisas como multilinhas ou não , quanto 76 00:06:09,230 --> 00:06:11,100 tempo o texto pode ser. 77 00:06:11,330 --> 00:06:13,730 Você também pode definir um 78 00:06:13,730 --> 00:06:18,700 texto de espaço reservado, definir a autocorreção e todas essas coisas divertidas. Verifique 79 00:06:18,770 --> 00:06:25,670 esses documentos para encontrar a propriedade específica que você pode precisar para o seu caso de uso. 80 00:06:25,730 --> 00:06:31,970 Quero poder definir esses objetos, mas quero defini-los no local em que 81 00:06:31,970 --> 00:06:37,640 uso minha entrada personalizada. Portanto, não daqui, porque isso garantiria o uso da 82 00:06:37,730 --> 00:06:40,150 mesma configuração para todas as entradas 83 00:06:40,430 --> 00:06:46,550 que possamos ter em nosso aplicativo. Quero ter mais flexibilidade e apenas definir um estilo básico aqui e configurar 84 00:06:46,550 --> 00:06:51,440 a entrada no local em que use-o em vez de no componente principal do wrapper. 85 00:06:51,440 --> 00:06:57,140 O legal é React e isso não é React Native, é apenas React no Javascript normal, tem uma 86 00:06:57,140 --> 00:06:58,200 sintaxe para isso. 87 00:06:58,460 --> 00:07:05,920 Você pode pegar seus adereços que está recebendo e espalhá-los em seu componente assim. 88 00:07:05,920 --> 00:07:11,110 A sintaxe pode parecer um pouco estranha, mas no final, ela usa todos 89 00:07:11,140 --> 00:07:19,120 os acessórios que você possui, todos os acessórios que você define aqui e basicamente os adiciona ao seu componente como acessórios. 90 00:07:19,150 --> 00:07:23,600 Agora, se você definir outros adereços, como estilo, e já tiver um estilo aqui, esse 91 00:07:23,650 --> 00:07:26,020 estilo substituirá o estilo que você tem 92 00:07:26,040 --> 00:07:31,210 aqui e é isso que eu quero, porque se eu definir um adereço de estilo em minha própria 93 00:07:31,210 --> 00:07:37,450 entrada de fora, eu definitivamente deseja substituir isso por este suporte de estilo e adicionar esse estilo que está configurado lá para 94 00:07:37,450 --> 00:07:38,200 esta entrada 95 00:07:38,200 --> 00:07:43,630 de texto, mas se você configurar outros acessórios fora desse componente, no meu componente personalizado, eles serão adicionados à 96 00:07:43,630 --> 00:07:49,010 entrada de texto e que nos permite adicionar todos os acessórios que podemos adicionar na entrada de texto 97 00:07:49,120 --> 00:07:52,120 também em nossa entrada, assim como em nosso próprio componente. 98 00:07:52,120 --> 00:08:03,400 Portanto, aqui onde usamos a entrada, agora podemos não apenas adicionar o estilo, mas também adicionar o blurOnSubmit, por exemplo, 99 00:08:03,400 --> 00:08:09,670 para garantir que, ao pressionar o botão enviar, perquemos o foco 100 00:08:09,670 --> 00:08:16,430 e fechemos o teclado virtual. Podemos definir a autocapitalização para nenhum, que é um dos valores permitidos, 101 00:08:16,480 --> 00:08:20,040 se você verificar os documentos. Você pode defini-lo como none, sentenças, palavras 102 00:08:20,050 --> 00:08:24,610 e assim por diante, para que eu não queira que as letras maiúsculas estejam ativadas aqui, porque apenas digitaremos o 103 00:08:24,610 --> 00:08:30,610 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, 104 00:08:30,610 --> 00:08:35,050 para não corrigirmos automaticamente a entrada do usuário e muito importante aqui, 105 00:08:35,080 --> 00:08:41,000 definirei o tipo de teclado como numérico, para que o usuário precise digitar um número aqui. 106 00:08:41,320 --> 00:08:47,590 Vou definir o comprimento máximo aqui como 2, para que você possa digitar apenas dois dígitos e não um número 107 00:08:47,620 --> 00:08:53,890 muito longo, porque este jogo aqui e é apenas uma das restrições que tenho aqui, é que este jogo funciona 108 00:08:53,890 --> 00:08:57,140 apenas com dois dígitos número. Com tudo isso configurado, 109 00:08:57,140 --> 00:09:02,990 agora, se voltarmos e eu alternar meu teclado virtual, você verá esse teclado numérico aqui e poderá 110 00:09:02,990 --> 00:09:09,180 digitar apenas dois dígitos e não mais do que isso, o que é obviamente exatamente o que eu quero. 111 00:09:09,260 --> 00:09:14,170 Além disso, aqui no Android, vemos isso: se você clicar no botão confirmar, 112 00:09:14,180 --> 00:09:21,140 isso será fechado, graças a essa coisa blurOnSubmit. No iOS, esse botão não existe aqui, então, na verdade, teremos que 113 00:09:21,140 --> 00:09:25,730 encontrar uma solução diferente para fechar isso, se você tocar em outro lugar, por exemplo, porque agora, 114 00:09:25,760 --> 00:09:27,150 isso não está acontecendo. 115 00:09:27,320 --> 00:09:32,090 Mas o bom é que agora temos um teclado que podemos ver e um teclado onde podemos inserir números. 116 00:09:32,090 --> 00:09:37,910 Uma coisa que quero mudar é que, agora, também posso inserir um separador decimal aqui. 117 00:09:37,910 --> 00:09:44,420 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 118 00:09:44,420 --> 00:09:49,650 documentos oficiais são o local ideal; lá, para a entrada de texto, você pode mergulhar em um tipo de teclado e 119 00:09:49,650 --> 00:09:54,650 encontrar descubra o que você pode definir, o que funciona em todas as plataformas e o que você pode definir 120 00:09:54,650 --> 00:09:59,480 se você tiver uma verificação que verifica em qual plataforma está executando o código sobre o qual ainda não 121 00:09:59,480 --> 00:09:59,990 aprendemos. 122 00:10:00,230 --> 00:10:03,200 O teclado numérico é suportado nas duas plataformas e, se 123 00:10:03,350 --> 00:10:08,380 você definir isso, agora terá uma entrada na qual não poderá inserir uma casa decimal aqui, se 124 00:10:08,390 --> 00:10:13,990 digitar aqui e não conseguir fazê-lo no iOS. Infelizmente, no Android, você pode, por isso, 125 00:10:14,090 --> 00:10:16,490 também precisamos encontrar uma solução diferente.