Criar uma entrada de verificação de código SMS Segmentada com movimento automático em Reagir Nativo

Jason Brown Blocked Unblock Seguir Seguindo 2 de janeiro

Muitos aplicativos fornecem uma maneira de verificar um usuário com base em uma mensagem de texto. Isso pode ser um código aleatório geralmente de 4 a 6 números. Realmente não importa, pois construiremos uma entrada que possa fazer tudo, mas uma interação comum é a entrada de avanço automático quando você digita.

Isso na superfície pode parecer trivial, mas pode ser complexo quando você está lidando com interações do usuário, como colar, excluir e gerenciar o foco.

Este tutorial foi inspirado em fazer login no Stripe e ver como eles lidaram com a verificação do código de texto. Isso foi adaptado da web para o nativo.

Configurar 6 retângulos

6 é arbitrário, isso funcionará com qualquer quantidade, desde que baseamos nossos cálculos no comprimento do array.

Nós começamos com um pouco de estado. Nós manteremos nosso valor em uma única string e usaremos o método split para transformá-lo em uma matriz. Nós vamos passar por cima de nosso CODE_LENGTH apenas para que possamos pegar o índice e renderizar em nosso valor de exibição.

Nosso valor de exibição será View s, que tem a borda da direita da mesma cor e tamanho do wrap. A div de envolvimento fornecerá a aparência da borda e as peças de exibição fornecerão a separação no interior.

Usaremos alguma lógica para remover a borda da última tela, para que não tenhamos uma borda dupla no lado direito da tela e bordas de quebra automática. Se é a última entrada, aplicamos nosso estilo noBorder .

Também usamos use alignItems: 'center' e justifyContent: 'center' para centralizar nosso texto dentro de cada célula de exibição.

Configurar nossa entrada

Precisamos ter acesso à nossa TextInput por meio de um ref, para que possamos controlar seu foco.

Nós renderizamos nosso TextInput , e uma parte importante é colocar value="" . A razão para isso é indicar Reactir que é uma entrada controlada, e que mesmo se as pessoas digitarem, nunca queremos exibir um valor.

Se deixássemos isso fora, a entrada de texto seria descontrolada e a entrada do usuário seria exibida. Em vez de exibir o conteúdo na entrada, dividimos nosso valor do estado e processamos em View s separados.

Nós renderizaremos nossa entrada absolutamente porque nós quereremos controlar o movimento dela mais tarde para que nós não tenhamos que falsificar um cursor, mas movamos a entrada para a célula ativa.

Lidar com foco / desfoque

Na peça importante está controlando o foco e desfoque. Nós precisaremos rastrear se temos foco para podermos mostrar os contornos apropriados. Então, adicionamos um valor booleano focused ao estado e anexamos um onFocus e onBlur à nossa entrada.

Não só isso, precisamos lidar com o que acontece quando o usuário pressiona o envoltório externo. Se estiver pressionado, precisamos nos concentrar na entrada. Em React Native, queremos usar um elemento Tocável, no nosso caso, o TouchableWithoutFeedback, já que não precisamos de nenhum outro efeito. Então, adicionamos um onPress e chamamos atenção ao nosso ref que havíamos criado anteriormente.

Chamar o foco diretamente assim ativará nosso manipulador onFocus portanto, não precisamos definir nenhum estado no método handlePress .

Mova nossa entrada

Uma peça importante é mover a entrada. Conforme o usuário digita, nós o moveremos da posição 0 até o comprimento total do código. Fazemos isso assim como o usuário digita a entrada pode exibir na célula com um cursor real piscando.

Fazemos algumas contas para determinar o índice selecionado para multiplicar por 32 que é apenas a largura de cada célula de exibição.

Se o comprimento atual do código digitado for menor que o total de valores possíveis, retornamos o valor values.length que é apenas o tamanho dos caracteres digitados pelos usuários.

Se chegarmos ao ponto em que o usuário digitou todos os caracteres possíveis, retornamos o comprimento total possível de caracteres. Isso limita a entrada para estar sempre visível no último quadrado e não mais.

Lidar com digitação

Agora, quando o usuário digitar, teremos o fogo do evento de alteração. Geralmente, você atualizaria o estado apenas atualizando o valor de onChangeText mas como nós adicionamos value="" o valor sempre será o caractere singular que o usuário digitou.

Estamos em estado anterior de referência, por isso precisamos usar o estilo setState retorno de chamada.

Além disso, o método handleChange poderia ser potencialmente chamado com mais de um caractere se o usuário colasse no número. Assim, para combater qualquer possibilidade de ultrapassar o limite máximo de caracteres, combinaremos o estado atual, novo valor de entrada, e slice o tamanho máximo.

Se um usuário colou em 8 caracteres, pegaríamos de 0 a 6 no nosso caso e apenas atualizaríamos o estado com os 6 primeiros caracteres.

Além disso, se o comprimento atual for maior ou igual ao tamanho máximo do código, retornaremos null. Isso impedirá a digitação em mais do que o valor permitido ou caracteres.

Esboço falso

A acessibilidade é importante para pensar e, portanto, precisaremos recriar o esquema que normalmente seria exibido quando o usuário tiver foco. Poderíamos acrescentar no esquema, mas optar por fazê-lo desta forma para um melhor design / fins estéticos.

Para conseguir isso, precisamos saber se uma célula atual está selecionada ou se tudo está preenchido.

Se estiver atualmente selecionado, queremos renderizar nosso esquema ou, se todos os números tiverem sido preenchidos, queremos renderizar o contorno na última entrada. Fazemos isso comparando o índice em que estamos passando diretamente pelo tamanho dos caracteres que foram digitados.

Então, para verificar se está preenchido, comparamos o comprimento dos valores digitados e também verificamos se o loop chegou à entrada final.

Também precisamos verificar se o usuário está focado no momento. Se eles não estão focados na entrada, então não queremos renderizar nosso esboço.

Para renderizar o contorno, renderizamos outro div totalmente posicionado. Nós renderizamos a nossa shadow Veja absolutamente e dê um borderWidth de borderWidth de 4. Então, borderWidth la para a left/right/bottom/top -4 modo que quando a borda renderizar, ela se borderWidth exatamente como um contorno.

Lidar com Excluir

Precisamos manipular a exclusão manualmente porque a entrada não tem nenhum valor. Portanto, não há como detectar uma alteração de valor para remover um número. Podemos pegar a chave do retorno de chamada onKeyPress e verificar se é backspace. Se o usuário estiver excluindo, podemos usar o slice para remover o último caractere de nosso value no estado.

Lidar com casos de borda

Um caso de borda final é manipular quando o usuário digitou completamente a quantidade de caracteres. Eles podem digitar 5 caracteres e ser focados no 6º, mas depois que digitarem o caractere final, o selectedIndex moverá a entrada para a direita.

No entanto, se tivermos todos os números, a entrada tentará coletar um caractere para coisas que não queremos / precisamos. Normalmente, no React, você apenas descompacta a entrada, mas se o usuário clicar em nosso div de empacotamento, precisamos ter acesso ao TextInput para que possamos nos concentrar. Caso contrário, depois que o usuário digitasse todos os números, eles não teriam como excluí-los se errassem.

Para lidar com isso, vamos verificar se o usuário digitou todos os caracteres do que apenas ocultar a entrada usando opacidade.

Final

É isso, agora temos uma entrada que avança automaticamente sempre que você digita e pára quando o limite máximo de caracteres é atingido.

Para o código completo, confira o artigo Code Daily