Agora que entendemos o básico da navegação, que somos capazes de transmitir dados, vamos
dar um passo atrás e focar no aplicativo que estamos construindo, o que obviamente não parece tão bom e
vamos nos concentrar nesses itens de categoria aqui na grade.
Podemos tocar neles, mas obviamente este não
é um aplicativo que você gostaria de usar. Agora, para tornar isso mais utilizável na
tela de categorias aqui, vou pegar esse item aqui,
essa opacidade palpável, para que esse item da grade e o terceirize em um componente separado,
não algo que você deve fazer, mas que talvez queira fazer simplesmente para manter seus componentes mais magros e limpos.
Para isso na pasta de componentes, adicionarei um CategoryGridTile. arquivo js, é claro que o
nome é totalmente seu e, aí, precisamos importar o React do React, certamente também precisaremos de
algumas coisas do React Native para criar um componente, a saber, precisaremos de uma opacidade palpável claro, precisaremos
da visualização, precisaremos de texto e precisaremos de uma folha de estilo para que também possamos estilizar isso
aqui e agora possamos criar o componente de
bloco de grade de categoria aqui que recebe alguns adereços. Vamos precisar de uma folha de estilo
aqui, que armazenarei nos estilos constantes e, é claro, como sempre, podemos depois exportar o
componente e dentro dessa função do componente, retornarei o código jsx que acabei de cortar na
tela de categorias aqui . Portanto, aqui, a opacidade palpável configurada, esse item da grade está configurado,
mas teremos que mudar algumas coisas. Na tela de categorias, por exemplo, estou configurando o estilo do item de grade aqui. Agora, podemos deixá-lo aqui e
meio que passá-lo para o nosso bloco de grade e, em seguida, juntá-lo lá como você aprendeu,
mas simplesmente configurarei todo o estilo no componente em si, porque usaremos apenas o
bloco de categoria no grade na tela de categorias. Então, adicionarei o estilo do item de grade aqui à
folha de
estilo neste arquivo. Portanto, isso funcionará novamente. O manipulador onPress ainda não funcionará. Vamos corrigir isso em breve e agora
podemos voltar à tela de categorias e, é claro, importe nosso componente. Portanto, importe o componente do bloco de grade
da categoria para lá da pasta de
componentes e para lá, bloco da grade de categoria e agora simplesmente retorne isso aqui quando renderizarmos um novo item.
Agora, é claro que
assim não funcionará, precisamos encaminhar alguns dados para o bloco de grade para que funcionem corretamente
lá e também precisamos garantir que pressionar isso nos navegue. Agora, vou passar os dados que precisamos para lá, que é
o título, então esse é itemData. item. title e agora é um
adereço que podemos usar no bloco de grade de categoria e também quero passar outro adereço que passe
em uma função que possamos executar para navegar e o nomeei onSelect, mas você pode nomear o que quiser e aí, eu
só quero executar o código que atualmente executo no onPress. Então, cortarei isso daqui para fora do bloco de grade
da categoria, moverei isso de volta para a tela de categorias, para esta função que passo para
onSelect e agora tudo o que precisamos fazer é acionar onSelect de dentro do bloco de
grade da categoria, é claro um padrão normal que você conheceria no React. Então, de volta ao bloco de grade da categoria, o onPress pode simplesmente apontar para
adereços onSelect para acionar a função que é passada no adereço onSelect.
Agora, o título que estou lançando aqui também pode ser apenas adereços. title porque estamos recebendo esse suporte
de título como suporte em nosso bloco de grade de categorias que estamos passando aqui.
Com isso, dividimos nosso componente um pouco, mas é claro que agora eu também quero
trabalhar um pouco mais no estilo. Então, voltando ao bloco de grade da categoria,
por exemplo, quero usar a cor que estou configurando, porque cada categoria recebe uma cor
armazenada nessa propriedade de cor aqui, por isso seria bom usá-la. Portanto, também podemos encaminhar o bloco de grade da categoria, avançar a cor aqui; é
claro, você pode nomear esse suporte o que quiser no item. propriedade de cor
e aqui, tem que ser. color porque nomeamos a cor da propriedade aqui no modelo e agora
em um bloco de grade de categoria, podemos usar essa cor para estilizá-la aqui.
Então, como estilizar isso, como isso deve ser? Ao adicionar um estilo à visualização que temos
dentro da opacidade palpável, porque o próprio componente de opacidade palpável é invisível, mas a
visualização não existe, podemos passar um objeto e definir a cor do plano
de fundo como adereços. cor.
Bem, vamos ver como é isso, se salvarmos isso e esperarmos que isso seja
recarregado, não parecerá muito ruim, mas é
muito pequeno, deve preencher todo o item da grade e não apenas a linha com o texto.
Então, para melhorar isso, eu vou ter esse estilo embutido aqui, mas vou mesclar isso em um objeto circundante com outra
configuração de estilo que eu configurei na folha de estilo e nomeiei esse contêiner, você pode chamá-lo como quiser deseja,
contêiner de estilos,
retire todos os pares de valores-chave também para
que possamos mesclar esses estilos aqui e agora, contêiner é um objeto da folha de estilo que podemos
adicionar lá e aqui, podemos definir o flex one para garantir que cada item preenche todo
o espaço que ganha e agora isso parece muito melhor.
Agora ainda não estou 100% feliz, quero
adicionar um pouco de raio de borda aqui, digamos que 10 tenha cantos arredondados e, é
claro, você pode configurar qualquer estilo que quiser aqui,
se preferir, eu também configurará uma cor de sombra preta e uma opacidade de sombra de. 26 e um deslocamento de sombra de largura 0, altura 2 e raio de sombra
de 10 e elevação de 3, elevação para Android se você se lembrar, porque essas propriedades de sombra afetam apenas
o iOS, para que possamos obter um pouco desse cartão tridimensional olhe
e, é claro, como mencionei, você pode estilizar isso da maneira que desejar.
Agora, além disso, quero garantir que este texto fique no canto inferior direito e tenha um pouco
de preenchimento ao
redor, é claro, um pouco de espaçamento ao redor. Então, adicionarei um pouco de preenchimento aqui, digamos 10
e agora defina o conteúdo justificado para flex-end, a direção da flexão no contêiner é obviamente de cima para baixo porque é coluna, então o flex
end moverá isso para o embaixo aqui e agora para também movê-lo para a direita no eixo horizontal, defino
os itens de alinhamento para flexionar também a
extremidade e isso move isso para o final do eixo transversal, que é deixado da esquerda para a direita
em uma visualização normal onde você não mude a direção do flex. Com isso, obtemos esse visual que eu diria que
é melhor, mas é claro, o texto aqui, o estilo do texto também pode mudar e um pouco
mais de preenchimento
pode parecer bom, talvez 15, mas é claro que podemos experimentar isso e também Uma observação
importante: neste aplicativo, não vou focar na construção de uma experiência
totalmente responsiva aqui, tentarei manter isso breve e conciso, porque o foco principal deste módulo, é claro,
é a navegação; portanto, não otimizo isso. para todas as telas e plataformas possíveis.
É claro que isso é algo que você
pode fazer como prática. Não vou aderir para não inchar desnecessariamente este módulo; portanto, configurarei um estilo que
ficará bem nesses emuladores.
Dito isto, um pouco mais de preenchimento pode fazer sentido e eu também quero
estilizar o título aqui, portanto, adicionarei, digamos,
o estilo
do título aqui, configurado na folha
de estilo, vamos adicioná-lo aqui e ali, quero usar minha família de fontes, open sans
bold, que posso usar, é claro, porque estou registrando-a aqui no aplicativo. js, então open sans bold é adicionado agora aqui e talvez também mude o tamanho da
fonte um pouco para 22. Nós salvamos isso,
isso parece bastante decente.
Agora, há uma última coisa que eu quero
fazer no meu bloco de grade de categorias, no texto aqui, vou definir o número de linhas como 2, para que qualquer texto que seja maior
que o realmente seja cortado, o que eu acho que parece um pouco melhor. E por último, mas não menos importante, você pode
perceber que no Android é leve e agradável, isso fica à esquerda aqui porque
está dividido em duas linhas, para garantir que também esteja à
direita, no título aqui, definirei alinhar o texto à direita para forçar que ela fique à direita.
Então, vamos esperar que isso seja
recarregado e agora está parecendo o que deveria.
Agora isso não é tão ruim
aqui, agora você pode perceber que o efeito parece um pouco estranho se eu tocar em um item
aqui, temos uma borda extra estranha em torno dele.
Agora, uma coisa que ainda farei aqui é totalmente opcional, mas ainda assim, adicionarei aqui, adicionarei a API da
plataforma e também adicionarei feedback nativo palpável para realmente usar o efeito cascata em vez de opacidade
palpável, se suportado.
Então, aqui, terei meu componente tocável, que por padrão é a opacidade
palpável, mas se a plataforma. os é igual ao Android e, como você aprendeu no início do curso, a versão
é maior ou igual a 21, então sabemos que o feedback nativo tocável é
suportado, então definirei o componente tocável igual ao feedback nativo tocável, como este.
Use o componente tocável aqui em vez da opacidade palpável
e, com isso, devemos ter um bom
efeito cascata no Android,
no iOS temos o efeito opacidade que queremos e no Android, agora
temos um efeito cascata, mas o estilo está desativado agora.
No entanto, isso é algo que podemos corrigir adicionando uma visualização extra em torno disso, que recebe nosso estilo
de itens de grade em vez do componente tocável aqui
e, com isso, basta adicionar uma propriedade de estilo extra ao componente tocável e definir flex
um.
Estou fazendo isso com um estilo embutido
aqui, rápido e sujo, você pode adicionar um estilo separado na folha de estilo. Com isso, parece e parece o mesmo no
iOS e
agora também no Android, o efeito cascata está lá.
Agora, porém, ele não está usando nossos cantos arredondados; em vez disso, renderiza um quadrado ou um retângulo e você também aprendeu
anteriormente como consertar isso. Para corrigi-lo, tudo o
que precisamos fazer é no item da grade, adicionamos o raio da borda
10 e, na verdade, adicionamos o estouro oculto para garantir que os itens filhos não possam ser renderizados fora dessa
exibição de
agrupamento, o que significa que a ondulação efeito não pode sair dessa caixa arredondada.
Agora temos essa aparência e esse é o único ajuste que quero fazer aqui para diferentes plataformas
e, com isso, isso não parece tão ruim, eu diria.
Agora, é claro, você pode alterar a aparência disso, o tamanho da fonte e assim por diante, fazer com que
pareça realmente bom nos dispositivos que você está testando.
Estou feliz com esse visual e agora é hora de renderizar algumas receitas quando
selecionamos uma categoria aqui.