Então, vamos para a tela de filtros e, agora, eu só tenho o meu conteúdo
fictício, a tela de filtro, e é claro que
não é isso que eu quero lá. Em vez disso, quero ter algum texto na parte superior, na verdade, onde digo filtros disponíveis
/ restrições ou algo parecido com este onde eu quero apontar para um certo objeto de
estilo com estilos, vamos chamá-lo de título, talvez porque será nosso título principal aqui e abaixo disso, quero ter meus filtros
diferentes.
Agora, como é um filtro? Precisamos de alguma opção, alguma caixa de seleção, algo assim,
que permita ativar e desativar um filtro e um rótulo para isso.
Agora, isso significa que provavelmente uma visão faz sentido agrupar rótulo e que alternam
e posicione-as lado a
lado, provavelmente, e eu darei à visão um estilo de contêiner de filtro, algo assim e, como eu disse, quero tenha um texto com um rótulo, por exemplo,
diga glutenFree e, ao lado disso, um switch e, felizmente, o React
Native possui um switch interno, chamado switch. O componente switch transforma um bom
switch que podemos usar, então aqui podemos
apenas usar um switch como esse e renderizar na tela. Precisamos configurar isso, mas para
começar, podemos usá-lo assim. Agora, para um estilo básico, para o título e o contêiner de
filtro aqui, vamos
descer aqui, vamos adicionar o
contêiner de filtro e o título aqui, e o título é bem direto. Lá, quero usar a família de fontes
open sans bold (realce) e tamanho de fonte 22, uma margem em todas as direções de 20 e também
definir alinhamento de texto para centralizar e centralizar isso. A tela geral, a propósito, não deve mais centralizar itens no eixo principal;
portanto, a centralização vertical não deve mais acontecer
e, para isso, podemos simplesmente nos
livrar do centro de conteúdo justificado e do recipiente de filtro, por outro lado, deve posicionar a chave e
o texto próximos um do outro em uma fileira.
Portanto, aqui podemos definir a direção da flexão para alinhar, justificar o conteúdo, talvez adicionando espaço ao redor e alinhando os itens no eixo transversal,
no centro, de modo que seja centralizado verticalmente. Agora vamos dar uma olhada nisso, se salvarmos isso
e formos para a tela de filtro, é isso que obtemos. Aqui temos uma chave e, como você vê agora, está sempre
voltando atrás, isso é
algo que tomaremos para cuidar em um segundo, mas geralmente, vemos e aqui nos filtros para Android, temos uma chave Android
que também salta de volta, mas que já está convenientemente pré-estilizado para o Android, então esse é outro componente
incorporado
ao React Native que possui uma aparência padrão para o Android. Então isso não é
tão ruim.
Uma coisa que quero mudar é para o contêiner de filtro, quero atribuir
uma largura fixa de, digamos, 80% e, na verdade, alterá-la aqui para um espaço
entre,
não um espaço ao redor, porque acho que parece um pouco melhor agora, sim, definitivamente, também no Android e agora, podemos garantir que essa opção
realmente funcione e que não volte ao acioná-la. Para isso, é necessário saber que, para os comutadores, você precisa
gerenciar manualmente o estado deles e isso não é realmente novo. No React, geralmente é o caso desses componentes de entrada,
é necessário armazenar o que o usuário digita e enviá-lo de volta ao componente para refletir isso na interface do
usuário atualizada e fazemos
isso com o gerenciamento de estado.
Portanto, importamos para usar o gancho de estado do React, para que possamos gerenciar o
estado aqui neste componente funcional e que aqui, eu terei meu estado de glúten e o nomeio éGlutenFree e defini o estado de uso isGlutenFree, inicialmente falso
e agora em diante essa opção
aqui, você tem
uma propriedade value, que é uma propriedade incorporada à opção interna onde eu alimento isGlutenFree, portanto, é necessário um
booleano que indica se essa opção é renderizada como ativa ou não, por isso, se estiver marcada como
marcada ou não marcado, devo dizer e você tem uma propriedade onValueChange que aceita uma
função que é acionada sempre que
o usuário clica nessa opção. Essa função aqui obtém o novo
valor; portanto, se a opção estava no modo falso, no modo desmarcado, o novo valor será verdadeiro e o
contrário, é claro, e podemos usá-lo para atualizar nosso estado e definir isGlutenFree como o novo valor
e como também alimentamos esse estado novamente, agora nossa opção deve ser alterável e permanecer
nesse modo atualizado.
Então, agora, se dermos uma olhada nisso, agora podemos realmente alternar essa opção e isso é uma melhoria.
O estilo do switch não é o que eu quero, no entanto, ele usa
algumas cores padrão, é claro que eu gostaria de usar minhas cores que
uso no aplicativo o tempo todo e, para isso, podemos importar nossas
cores constantemente, é claro, então importar cores de constantes / Colors e o switch tiver outra propriedade que nos ajude a estilizar aqui, podemos adicionar cores de trilha, o que
nos permite personalizar as cores para esse switch, para que a cor de fundo e assim por
diante e a cor da trilha tomem um objeto como um valor, portanto, temos um objeto que passamos aqui para essa ligação dinâmica, na qual
é possível definir uma cor de plano de fundo para o estado falso; portanto, se ele estiver inativo, se estiver
desmarcado, e eu estou bem com o padrão na verdade, isso é bom para eu, mas você
também pode
definir um para o caso verdadeiro, que é o caso em que
é verificado e lá eu quero usar cores, cores primárias e, claro, você pode escolher qualquer cor que desejar.
E se fizermos isso e voltarmos aos filtros, agora usamos nossa própria cor aqui, o que obviamente está
mais alinhado com o restante
deste aplicativo e, obviamente, isso também funcionará aqui no Android. Também podemos definir a cor do polegar, que é a cor do
polegar aqui, que é verde aqui no Android e isso leva apenas uma sequência, uma sequência de cores, de modo que um
código hexadecimal, por exemplo, também podemos apontar para as cores cores primárias e se fazemos isso, no iOS, agora tem
essa cor e a mesma
no Android.
Agora, é claro, no iOS, isso não parece muito bom.
Gostaria de manter o padrão e a solução é bastante simples.
Podemos usar novamente a boa e antiga API da plataforma, importar isso e aqui ao atribuir
uma cor de polegar. , Eu verifico a plataforma. os é igual ao Android; nesse caso, quero usar a cor principal do polegar;
caso contrário, definirei isso como uma sequência vazia, o que significa que ele usará o padrão branco no iOS.
E com isso, aqui temos a mesma aparência de que eu gosto no iOS, mas é
claro, você também pode
ajustar isso de acordo com seus requisitos e no Android, ainda teremos a aparência que vimos antes, se eu for para
o filtro tela aqui que parece bom lá também. Então essa é a opção e
como podemos adicioná-la, agora precisamos repetir isso também para todas as
outras opções, para todos os outros filtros. Portanto, posso copiar essa visualização e adicioná-la
novamente
sem lactose ou vegana, mas se você copiar e colar várias vezes enquanto
tentamos fazê-lo aqui, é sempre um bom argumento para criar um componente separado ou um função que
processa esse código reutilizável.
E aqui, novamente, criarei um componente separado no mesmo arquivo, porque eu realmente o uso apenas lá;
novamente,
você também pode optar por um arquivo separado, se quiser.
Vou chamá-lo de switch de filtro e isso obtém alguns props e,
neste componente, no final, retorno esse código, configuramos um para com a view e o texto e assim por diante
e,
é claro, agora o texto precisa ser dinâmico. Lá, podemos definir isso como adereços e é totalmente
com você o que você escolhe aqui, porque você será quem passará os valores de adereços
mais tarde e, é claro, aqui, o que acontece no ValueChange e o que passamos para o valor também difere.
Portanto, aqui, esse deve ser o estado de adereços, por exemplo, ou valor de adereços, ou o que você quiser usar e
aqui para onValueChange, simplesmente apontarei para adereços. onChange, por exemplo, mas, novamente, todos esses nomes de
adereços, é claro, dependem de você, porque você será o único a usar esse
componente e nós o usaremos agora aqui, assim, como um componente de fechamento automático, onde agora podemos definir um rótulo porque eu estou esperando um
suporte de etiqueta aqui, se você o nomeou de maneira diferente,
é necessário nomeá-lo de forma
diferente aqui, é claro, e o rótulo é, obviamente, GlutenFree, porque estou prestes a substituir essa opção aqui.
Em seguida, precisamos passar para um estado, porque eu adicionei um suporte de estado aqui para gerenciar meu valor.
Se você o nomeou de forma diferente, também precisa nomeá-lo lá
embaixo, e aqui vou apontar para isGlutenFree, para minhas
necessidades de estado e onChange
a ser fornecido porque aqui estou usando o suporte onChange para vinculá-lo ao onValueChange.
Portanto, isso deve apontar para uma função e, é claro, aqui, vou simplesmente mantê-la
aqui e, como apenas uso onChange aqui para encaminhá-lo para onValueChange, também obtemos o novo argumento de valor aqui.
Agora podemos nos livrar dessa visão lá em baixo e apenas usar nosso componente de chave de filtro e agora
simplesmente repetir o que é obviamente muito mais fácil.
Então agora aqui também podemos ter lactoseFree, vegan e vegetariano e precisamos adicionar
três novos estados agora, então, deixe-me replicar isso, temos isLactoseFree e set isLactoseFree,
aqui temos isVegan e set isVegan
e aqui temos isVegetarian
e set isVegetarian.
Agora, precisamos apenas garantir que usemos os estados nos lugares certos; portanto, para o segundo comutador de
filtro em que temos o filtro lactoseFree, encaminho o estado isLactoseFree
e atualizo o conjunto isLactoseFree, é claro. Para a troca vegan,
encaminho isVegan e o atualizamos com set isVegan e para vegetarianos, encaminhámos
isVegetarian e atualizamos set isVegetarian, assim.
OK,
deve ser isso, se agora salvarmos isso, teremos uma tela de filtro com nossos diferentes filtros que podemos
definir independentemente, porque estamos tendo estados independentes. Eu acho que seria bom ter
algum espaçamento entre essas linhas, então vamos implementar isso. No nosso contêiner de filtro aqui, podemos simplesmente adicionar
uma margem vertical, digamos 10 ou 50, talvez, um pouco mais e isso deve garantir que haja algum
espaçamento lá,
sim, e isso parece muito bom.