Então, vamos começar a implementar a autenticação e um passo muito importante para isso é que adicionamos uma nova
tela, a tela de autenticação, que deve apresentar um formulário de login ou inscrição que o usuário pode usar para
fazer login ou inscrição e, portanto, aqui na tela
de autenticação, importarei o react from react e também importarei algumas
coisas do React Native porque, a partir daí, do React Native, quero ter a visualização de rolagem, porque
criaremos um formulário e quero verifique se os usuários de todos os tamanhos de dispositivo
podem interagir com ele.
Vou adicionar uma folha de estilo aqui e deve ser por enquanto, sempre
podemos adicionar mais se precisarmos de mais.
Também podemos incluir uma visualização e o teclado evitando a visualização, para garantir que todas as
entradas estejam sempre acessíveis.
Agora, falando em entradas, é claro que adicionaremos um formulário e, portanto, reutilizarei o componente de entrada que construímos
na seção de formulários que posso encontrar na pasta da interface do usuário dos componentes.
Portanto, verifique esta seção para saber o que esse componente faz e como podemos
gerenciar um formulário com ele.
Com isso, podemos criar o componente de tela de autenticação aqui, que recebe objetos e também podemos criar esse
objeto de estilos com a folha de estilo, o método
de criação ali e, é claro, exportar a tela de autenticação, assim.
Agora, obviamente, a pergunta agora também é: como apresentamos essa tela de autenticação? Como podemos garantir que vemos isso
se não estivermos logados?
Agora isso é algo que refinaremos ao longo deste módulo, mas, para começar, podemos acessar o
navegador e garantir que, quando o aplicativo for iniciado, vejamos a tela de autenticação e, para isso, possamos
usar um novo navegador especial que não temos. usado antes do qual foi desenvolvido especificamente, você quase poderia dizer
para este caso de uso de autenticação e que a função create navigator do switch que
nos ajuda a criar um navegador de switch. O aspecto especial desse navegador é que ele
sempre exibe exatamente uma tela e você não pode voltar para outra tela se navegar para outra tela.
Portanto, não é permitido voltar explicitamente, o que é exatamente o que queremos, porque você não poderá
voltar à tela de login se tiver feito apenas o login.
Portanto, aqui na parte inferior do arquivo, criarei um novo navegador, talvez meu navegador principal, o
nome é totalmente seu, é claro, com create switch navigator e, como antes, esse navegador usa um argumento
onde configuramos então, como um objeto em que o configuramos e lá, quero vincular minha tela de
autenticação e, claro, minha pilha de lojas posteriormente. Agora, para ter um bom cabeçalho, também criarei
meu navegador de autenticação aqui, que é um navegador de pilha criado com o navegador de pilha de criação e, lá,
vou apenas mapear a tela de autenticação na qual comecei a
trabalhar e, é claro, nós precisa importá-lo, então nesse ShopNavigator. js, podemos importar a tela de autenticação da tela de autenticação do
usuário como
esta e, com essa importação adicionada, se descermos, mapeamos isso aqui para autenticação no navegador de autenticação e o
navegador de autenticação é mapeado para autenticação aqui no navegador de comutador e é claro que o shop está
mapeado para o navegador da loja e agora é o navegador principal que envolvemos
com o container de aplicativo para criação e, portanto, se salvarmos isso, renderizaremos a tela
de autenticação como a
primeira tela que no momento não renderá nenhum válido jsx, obtemos um erro, mas podemos trabalhar nisso, é claro, porque o objetivo agora
é renderizar essa tela de autenticação onde podemos fazer login e executar nossas tarefas. Então, aqui, quero apresentar essas entradas e, na verdade, também importarei o
componente do cartão dos componentes da placa de interface do usuário para que este belo cartão seja exibido aqui e tenha minhas entradas
lá e, é claro, isso é totalmente opcional, mas aqui vou
adicionar aqui, vou adicionar o cartão e no cartão, podemos adicionar a visualização de rolagem para que
possamos rolar dentro desse cartão, é claro que você também pode adicionar a
visualização de rolagem ao redor do cartão para poder rolar a tela geral tela, mas eu farei assim, também adicionarei meu próprio
estilo aqui ao cartão, que nomeei como container de autenticação, talvez o nome seja totalmente de sua responsabilidade e também mostrarei tudo isso
aqui como um invólucro ver onde vou adicionar um estilo que vou nomear tela. Na verdade, aqui já podemos usar o teclado evitando a visualização, acho que com um
comportamento de preenchimento e, em seguida, esse deslocamento vertical do teclado, digamos 50. Portanto, agora, dentro da visualização de rolagem aqui
que temos em nossa placa, podemos começar a adicionar as entradas, a entrada personalizada
que construímos anteriormente no curso. Por exemplo, aqui, uma entrada com o email de identificação
e um rótulo de email, pois desejo buscar o endereço de email do usuário e, portanto, o tipo de teclado do endereço
de email compatível com iOS e Android.
Também deve ser necessário e eu quero usar o validador de e-mail, essas são
duas das funcionalidades de validação que eu construí na entrada anteriormente neste curso, também as maiúsculas
automáticas devem ser desativadas. o endereço de e-mail não é realmente útil
e a mensagem de erro que eu quero mostrar se houver algo errado, digite um endereço de e-mail válido, algo assim.
Agora, quando o valor muda, então, sobre alteração de valor, queremos fazer alguma coisa, mas por
enquanto não farei nada aqui, apenas forneça uma função vazia para não recebermos um erro e o valor inicial
que quero mostrar aqui, bem, isso é apenas uma
string vazia no final, porque eu não quero fornecer nenhum outro valor inicial.
Agora, é claro, essa não é a única entrada, então repetirei isso porque também preciso
de uma entrada de senha aqui com um rótulo de senha e o tipo de teclado aqui deve ser o padrão, porque quero ter a palavra-chave de texto
normal,
mas quero obscurece a entrada para que não possamos vê-la e isso
pode ser feito adicionando aqui a entrada de texto segura.
Obviamente, isso não é um suporte suportado pelo meu componente personalizado, mas lembre-se
de que, nesse componente, encaminhamos todos os acessórios para a entrada de texto incorporada e a entrada de texto incorporada
oferece suporte a essa propriedade segura de entrada de texto aqui; é por isso que eu
pode definir isso. Aqui a validação
também não deve verificar se esse é um endereço de email, mas
verifique se temos um comprimento mínimo de, digamos, cinco caracteres. A capitalização automática também pode ser desativada aqui, a mensagem de
erro seria digitar uma senha válida e, com isso, acabei de ver que aqui é claro que tenho um erro
de digitação, que deve ser o endereço de e-mail, a senha aqui e deixarei isso aqui como isso é.
Agora, para poder enviar
isso, também preciso de um botão, então aqui importarei o botão do React Native e adicionarei dois botões no
cartão
e, portanto, também dentro da visualização de rolagem. O primeiro botão tem um título de
login, digamos, e depois mudaremos para login ou inscrição, dependendo do modo em que
estamos e a cor é importada ou adicionada com a ajuda das cores constantes que você
deve importar e nessas cores constantes, vou usar cores. primary e onPress no momento podem simplesmente apontar para uma função
vazia e repetirei isso porque quero um segundo botão onde digito alterne para se
inscrever e, é claro, isso também dirá posteriormente para alternar para fazer login se estivermos logados modo up e talvez
possamos usar nossa cor de destaque. Se agora salvarmos isso, devemos ter uma tela de
login básica, aqui está, não parece com a aparência, mas temos
nossas entradas aqui, temos esses
dois botões, também no Android, uma vez que isso é feito,
aqui nós vamos
e agora é claro que eu gostaria de estilizar isso apropriadamente.
Então, vamos para a folha
de estilo e observe que eu tenho dois estilos no final atribuídos - screen e auth container, então aqui nos
estilos que eu quero adicionar screen e auth container, esses
são os dois estilos com os quais planejo trabalhar. Agora, para a tela, definirei flex como
um e justificarei meu conteúdo no centro e alinharei os itens no centro para que fiquem
centralizados no eixo
vertical e horizontal e no contêiner de autenticação. Quero definir uma
largura digamos 80% para não usar a largura total disponível e uma largura máxima,
na verdade, de 400 pixels, caso 80% seja mais do que isso, restringimos a 400 pixels e talvez uma altura de, digamos, 50%, mas uma altura máxima de também 400.
Vamos ver como isso se parece. Se
salvarmos isso, é isso
que recebo aqui.
Agora posso rolar para lá porque configurei uma exibição de rolagem e, na verdade, esse não é o comportamento
que desejo.
Não vou definir uma
altura aqui, apenas adicionarei uma altura máxima para que isso seja limitado
a uma certa altura, mas, por padrão, leva apenas a altura necessária e, portanto, prefiro
adicionar um pouco de preenchimento para termos alguns espaço em torno das entradas e ele não
fica
na borda do cartão, então isso parece muito melhor e vamos ver como isso se parece no Android;
sim, geralmente parece bom.
Se eu tocar lá, isso também
rolará para cima, para que a visualização de teclado evite seu trabalho, mas é claro que ainda recebo um erro aqui ao
alterar a entrada que está causando um erro, porque sim, eu adicionei uma alteração de
valor aqui, que deve ser na alteração de entrada, não na alteração de valor.
Então isso é uma pequena correção, mas estamos indo na direção certa.
Agora, ainda não terminei, quero ter um título
de cabeçalho e que tal alguma cor de fundo aqui, que provavelmente também seria legal.
Então, para isso, em relação ao título do cabeçalho, é claro, podemos adicionar o AuthScreen. navigationOptions e trabalhar com algumas opções estáticas no
momento, porque eu só quero adicionar um título de cabeçalho aqui e definir isso
para autenticar ou apenas autenticar, algo assim e para o plano
de fundo,
é claro que poderíamos dar uma visão aqui que contém tudo cor
de fundo, mas na verdade quero mostrar um novo componente que não usamos até agora
e, para isso, precisamos instalar um novo pacote e esse é o pacote expo-linear-gradient que você instalou com
o npm install --save gradiente expo-linear.
Este é um pacote que nos permite adicionar
um gradiente linear
com facilidade; portanto, de uma maneira muito simples e após a instalação, você
só precisa importar do expo-linear-gradient e importar um componente exposto, o componente gradiente linear.
Agora, esse é um componente que você pode usar em sua página e aqui eu o usarei dentro do
teclado, evitando a visualização, gradiente linear como este e envolvendo-o em todo o outro conteúdo como este aqui e agora você pode
configurar
isso e ali. deseja certificar-se de que isso tenha uma chave de cores que permita que as cores
entre elas sejam transferidas porque um gradiente é simplesmente um gradiente entre várias cores, pelo
menos duas, mas você pode adicionar mais e agora pode adicionar apenas cores, como vermelho ou
adicionando os códigos hexadecimais e eu quero fazer a transição entre #ffedff e, digamos, outro código hexadecimal, # ffe3ff, e é claro
que você pode experimentar cores diferentes aqui.
Agora também precisamos adicionar um estilo aqui e vou nomear esse gradiente de estilos que agora podemos adicionar aqui e esse
gradiente terá uma largura de 100% e uma altura de 100%, para que ele ocupe toda a largura e altura.
pode ser, é assim que parece, mas agora temos um problema, é
claro que nosso
conteúdo não está mais centrado. Para garantir que esse seja
o caso, agora precisamos adicionar conteúdo justificado e alinhar itens novamente e, portanto, aqui
na
tela ao redor, podemos nos livrar disso.
Agora, temos a mesma aparência
de antes, obviamente, também podemos conseguir isso não definindo largura e altura, mas apenas flexionando uma.
Portanto, agora com esta configuração aqui e é importante que a tela não tente centralizar
porque, caso contrário,
o gradiente será centralizado, mas com essa configuração, agora temos essa aparência com esse belo gradiente e, para ver o título
do cabeçalho aqui, apenas precisamos garantir que, na configuração da navegação, no navegador da loja, atribuímos nossos acessórios de
navegação padrão ao navegador de autenticação.
Então, adicionarei o segundo argumento para criar o navegador de pilha e as opções de navegação padrão apenas apontam para as opções
de navegação padrão que configuram a cor do cabeçalho, a cor do título do cabeçalho e assim por diante.
Obviamente, verifique se você não possui erros de digitação aqui nas opções de navegação da tela de
autenticação, como eu.
Então, com isso corrigido, esta é a configuração que temos aqui, é claro
que você pode experimentar as cores e usar cores diferentes, se
preferir, estou feliz com isso e agora a única coisa que quero corrigir aqui é o meu estilo para os
botões, algum espaçamento ao redor deles seria bom e isso pode ser facilmente adicionado colocando os botões nas visualizações aqui, na verdade os dois botões.
Então, eu farei isso aqui e agora darei a cada visualização um estilo aqui, talvez o contêiner de botões de estilos, faça isso na primeira e na segunda e agora podemos
dar a esse contêiner um estilo
lá em baixo na folha de estilo e aqui pode definir uma margem
superior, por exemplo, 10 para garantir que cada botão tenha uma pequena margem até o topo, para que os
botões não fiquem diretamente próximos um do outro, o que eu acho que realmente
ajudaria nossos botões.
Portanto, isso parece bom
no iOS, também vamos ver no Android,
sim, isso não parece tão ruim.
Então, com isso, temos essa configuração básica, agora vamos ter certeza de que isso também faz algo útil e
que realmente tentamos fazer login com isso.