Agora que tiramos esses fundamentos do caminho e antes de mergulharmos mais fundo no React Native e
também como podemos estilizar nossos aplicativos de uma maneira um pouco mais bonita, porque obviamente o
nosso estilo aqui definitivamente ainda tem algum potencial para colocá-lo assim, antes
de mergulharmos em tudo isso, deixe-me mostrar-lhe outro componente empolgante embutido no React Native e
que também mostra a facilidade com que você pode adicionar recursos interessantes aos aplicativos React Native e esse
é o componente modal.
Você encontra, é claro, nos documentos oficiais em que componentes e APIs guia aqui
e ali, você encontrará um modal lá em baixo.
Agora está sob outros e aqui, este modal é um bom componente que permite que você adicione uma
sobreposição tão boa, sobreposição de tela cheia com um pouco de esforço.
Agora vamos adicionar um modal para realmente hospedar nossa entrada de meta, agora a entrada
de meta está aqui no topo e está tudo bem, mas eu
realmente quero mover isso para um modal para que ele tenha uma sobreposição de tela cheia no final e nós
só temos um botão aqui no
topo, então no lugar da entrada de meta que abre aquele modal.
Então, vamos para a entrada do objetivo
e
lá, eu quero envolver isso em um modal. Então eu vou importar o modal do
React Native porque é um componente que
vem com o React Native e lá, eu quero usar esse modal em torno da minha view
aqui, então como agora e agora vamos salvar isso e vamos
ver se isso já muda alguma coisa um
pouco sim, nosso
estilo está desligado, estamos perdendo aquele preenchimento que montamos originalmente, certo?
No aplicativo. js, temos esse preenchimento geral em nossa visualização de
tela, que é essa visão externa, certamente não está sendo aplicada nas duas plataformas, nos dois dispositivos porque nosso conteúdo
está muito fora dessa tela, de modo que o modal já está fazendo alguma coisa e é
claro que não estamos vendo muito isso. Agora para modal, então para este
componente modal, você pode definir uma chave visível que define se esta é atualmente visível
ou não e que usa um booleano se definirmos isto como false por exemplo e depois disso
se olharmos nossas
aplicações, nós é claro visto tela vazia. By the way, no caso de Android não
deve atualizar para você depois de definir isso para false, basta fechar o aplicativo aqui com a ajuda da gaveta do aplicativo e, posteriormente, em seu
processo lá em baixo, o processo de inicialização npm, pressione a novamente para reiniciar este no Android.
Então, agora temos uma tela vazia quando isso está
definido como falso, agora, obviamente, codificar isso não é a solução.
Em vez disso, no aplicativo. js, agora eu quero ter um botão que nos permita abrir esse modal e,
em seguida, vamos fechar o modal
de dentro do modal quando pressionamos o botão add lá. Agora já estamos importando o botão aqui no aplicativo. js e agora que eu
vejo isso, podemos, claro, também se livrar dessas importações que não estamos usando
aqui agora,
então apenas deixe o botão import aqui junto com as outras importações que estamos
usando e agora aqui no topo , podemos adicionar o botão, que é uma tag de
fechamento automático e definir o título para adicionar uma nova meta, talvez, algo assim. Se fizermos isso, é claro que devemos ver esse botão aqui no topo e
aqui
está e agora
quando pressionamos esse botão, queremos mostrar esse modal, certo? Agora, para isso, precisamos gerenciar mais
estado.
Então, aqui, além de gerenciar as metas do curso, agora também vou gerenciar se estamos no modo
adicionar no curso ou se não estamos.
Então, inicialmente, não estamos assim, o estado inicial que estou definindo é falso e eu vou nomear
o meu estado aqui
e, claro, isso é totalmente com você, vou nomeá-lo como AddMode e setIsAddMode.
Mais uma vez esses
nomes são com você, eu estou apenas tendo uma convenção aqui que você também encontra nos documentos oficiais do React, onde aqui tentamos
dar ao estado que estamos controlando um nome adequado e então basicamente pegamos esse nome e adicionamos set
na frente dele para deixar claro que esta é a função de mudar esse estado.
Então setIsAddMode é o que nós, no final, precisamos chamar quando este botão é pressionado e
aqui podemos usar uma função inline ou usar uma função nomeada e apenas adicionar o manipulador aqui, o que
você quiser.
Eu irei com a função inline e chamará o set isAddMode e configurarei isto para true
aqui quando este botão for chamado para que possamos abrir o modal. Agora podemos pegar o estado isAddMode que estamos mudando e passar
isso para a entrada de meta para depois mudar a visibilidade do modal lá. Então, aqui, poderíamos adicionar um objeto visível, mas o nome do
prop depende de você, porque ele está no nosso próprio componente e eu passo o isAddMode, então
é o estado que
estamos controlando, para o modo visível, então o
valor armazenado em isAddMode é passado como um valor para o prop visível.
Agora, na entrada do objetivo, podemos, portanto, usar agora esse objeto
visível, então aqui podemos usar adereços visíveis, agora
nos referindo ao objeto visível que alcançamos na entrada do objetivo e então encaminhamos para
o objeto visível do modal. Se agora salvarmos isso e analisarmos nosso
aplicativo, se eu pressionar adicionar novo objetivo aqui, você verá esse conteúdo modal aqui novamente.
Agora, obviamente, não parece tão bonito aqui,
então devemos mudar isso
e uma outra coisa que eu quero mudar é que uma animação seria legal aqui para abrir o modal, certo?
Então, vamos adicionar o tipo de animação que é uma boa propriedade que podemos definir aqui e você pode definir isso para uma string e
lá você tem três opções - nenhuma é a padrão, mas você pode definir isso
como slide e agora o modal deve aparecer deslizando acima.
Então, se você pressionar adicionar novo objetivo, agora isso desliza
para cima, também no Android.
Então, essa é uma experiência de usuário muito melhor, eu diria, o próximo passo é garantirmos que nosso conteúdo
no modal seja apresentado de uma maneira mais agradável, talvez centralizada aqui no meio do modal.