Na tela de categorias, queremos garantir que nosso item possa ser tocado
lá, então importarei o toque e a opacidade do toque aqui para ter um leve efeito de opacidade,
mas é claro
que depende de você qual
padrão ou qual componente você usa deve haver um componente palpável no qual você envolve o item aqui
e agora
com a opacidade palpável, adicionarei o onPress para que possamos fazer algo quando pressionado.
O que nós queremos fazer?
Queremos ir para a tela de refeições da categoria, que é o tipo de página de detalhes de uma categoria escolhida para mostrar
todas as receitas dessa categoria, ainda
não temos receitas, mas ainda quero ir para a página.
Portanto, aqui, precisamos acionar uma ação de navegação e anteriormente fizemos isso com a navegação
de acessórios, certo?
O problema é que não temos adereços disponíveis aqui, porque estamos dentro da função de item da grade
de renderização que está fora do nosso componente.
Agora podemos simplesmente mover isso para dentro do nosso componente para corrigir esse problema.
Se criarmos essa função lá, teremos acesso a adereços porque agora estamos dentro da nossa função
de componente e agora poderemos chamar de navegar aqui. Podemos ligar para navegar e eu quero ir para o
nome de uma rota e, é claro, o nome da rota para a qual quero ir pode ser encontrado em nosso navegador
é a categoria refeições corretas, porque queremos carregar todas as refeições para a categoria escolhida.
Então, vamos para a categoria refeições aqui e, se adicionarmos e salvarmos, veremos agora que nosso estilo está um
pouco quebrado, vou corrigir isso em um segundo, mas a navegação funciona,
também temos esse efeito de opacidade, então está funcionando . Agora, corrigir o estilo é fácil, nós o perdemos porque
envolvi a opacidade palpável em torno da
minha visualização, só precisamos adicionar esse estilo aqui, que adiciona a margem ao redor do item e assim por diante,
à opacidade palpável, em vez da visualização aqui e com isso, recuperamos esse estilo e agora está funcionando como deveria.
A questão mais interessante é: como podemos realmente definir o título do cabeçalho? Agora, para isso, temos algumas opções, vamos
dar
uma olhada na opção número um. Em cada componente React que você carregará como
uma tela, o que significa o que você mapeia para esse nome de tela, por exemplo no navegador de pilha, você pode adicionar uma propriedade.
Agora, lembre-se de que a tela de categorias é obviamente um componente React, mas tecnicamente, é uma função
Javascript, certo?
É uma função que recebe o argumento props e, em seguida, executa esse corpo que retorna alguns
jsx e, portanto, o React pode usar isso como um
componente, mas tecnicamente é uma função Javascript.
Agora, as funções Javascript são apenas objetos, ou
seja, Javascript,
funções são objetos e nos objetos, podemos adicionar propriedades. Portanto, a tela de categorias é apenas um objeto
Javascript,
portanto, podemos adicionar uma propriedade depois de criá-la.
Portanto, aqui, depois de definir a função da tela de categorias e, portanto, esse objeto, podemos acessá-lo e adicionar uma propriedade com
a notação de ponto, é assim que o Javascript funciona, você pode simplesmente adicionar
essa propriedade.
Agora você pode adicionar aqui uma propriedade especial cuja aparência será a navegação do React e essa é a propriedade
das opções de navegação.
Você não precisa adicioná-lo e isso não será um problema se
você não o fizer, não o fizemos até agora, mas você pode adicioná-lo; se você adicionar, será respeitado pelo React navegação.
Agora, existem várias opções que você pode configurar e, obviamente, uma lista completa pode ser
encontrada nos documentos oficiais.
Da forma mais simples, você simplesmente atribui um objeto Javascript aqui com esse
monte de opções que agora pode configurar neste objeto e a opção em que estou interessado aqui é o
título do cabeçalho, que pode ser simplesmente definido como um texto, por exemplo categorias de refeição, porque estamos na tela de categorias, o que
seria um título adequado. Se salvarmos isso, agora
você verá as categorias de refeição como um título aqui no cabeçalho.
Agora você também pode estilizar o cabeçalho aqui com a ajuda da propriedade style do cabeçalho; isso requer um
objeto de estilo no qual você geralmente pode configurar o que pode ser configurado como estilos nas visualizações e, além
disso, pode adicionar uma cor de fundo que seja o estilo mais comum que você normalmente aplica.
Agora eu quero configurar uma cor aqui e vou usar uma abordagem que já usei
anteriormente no curso, vou adicionar uma pasta de constantes e lá, vou adicionar cores. arquivo js no qual exportarei um objeto Javascript onde todas as
cores que eu quero usar repetidamente no aplicativo estão configuradas.
Lá, configurarei uma cor primária para a qual pré-selecionei um código hexadecimal # 4a148C, mas é claro que você pode experimentar cores diferentes,
se quiser, e configurarei uma cor de destaque ou uma cor secundária cujo código hexadecimal seja #
ff6f00 e essas são apenas as cores que eu escolhi, como eu
mencionei, você pode usar diferentes, é claro. De volta à tela de categorias, agora
quero usar cores e, para isso, você precisa importá-las, importar cores com C maiúsculo, que é
apenas uma convenção que estou usando para indicar que isso é uma constante, de constantes / Cores , também chamado com
C maiúsculo e, aqui, usamos Cores. primaryColor por exemplo. Se você fizer isso, verá que seu cabeçalho agora
tem essa cor roxa escura que eu escolhi. Isso torna o título um pouco difícil de ler,
mas felizmente, você pode estilizar isso também, não com o estilo do cabeçalho, porque essa é
apenas a caixa do cabeçalho, por assim dizer, não seu conteúdo, mas o título pode ser estilizado com a cor da tonalidade do cabeçalho e novamente, a
documentação oficial é o lugar onde você pode aprender tudo sobre essas opções disponíveis, é assim
que eu sei sobre
elas, é onde você lê sobre elas.
Agora, a cor da tonalidade do cabeçalho sempre pode ser uma cor, por exemplo, branco aqui, que se ajusta
à minha cor padrão e agora você vê que é branco. É claro que você também pode querer uma aparência diferente para Android e
iOS; pode parecer onde isso parece mais iOS-ish, o que significa que você não tem
um plano de fundo colorido, mas apenas um texto é colorido e você pode conseguir isso com o bom
API da plataforma antiga que você aprendeu anteriormente no curso. Podemos usar a API da plataforma para
alternar dinamicamente quais cores usamos aqui com base na plataforma em que nosso aplicativo está sendo executado.
Então aqui para a cor de fundo, podemos usar a plataforma. SO e veja se esse é
o Android; nesse caso, quero usar a cor principal; caso contrário, nesta expressão ternária, não usarei cores,
para que possamos usar o branco aqui, por exemplo, um fundo branco normal ou simplesmente configurar nenhuma cor assim,
e você obterá a cor de fundo padrão. E para a cor da tonalidade, é a
mesma coisa, verifico se o sistema operacional é Android no
qual a cor do texto deve ser branca, caso contrário, configurarei isso para Cores. primaryColour e, com isso, agora você tem mais iOS, mais iOS
parece aqui no iOS e tem a aparência padrão do Android, que é mais colorida no Android.
É assim que você pode configurar as opções
de navegação aqui. Agora, o que dizer dessa tela, onde vamos aos nossos detalhes aqui, às refeições italianas
ou às refeições rápidas e fáceis? Seria bom se pudéssemos ver rápido e fácil aqui ou italiano aqui no
cabeçalho nesse caso.
Portanto, é a próxima coisa que devemos cuidar e, para isso, precisamos passar algumas
informações dessa tela para essa tela. Então, veremos como isso funciona no próximo vídeo.