Estamos extraindo nossa categoria aqui em nosso componente porque estamos obtendo nosso parâmetro lá com a ajuda
de adereços de navegação.
Agora, na verdade, quero exibir o título no meu cabeçalho.
Agora você aprendeu como configurar esse cabeçalho com a ajuda das opções de navegação, portanto, no componente de
tela de refeição de categoria e, portanto, esta é uma função, portanto, este é um objeto, podemos adicionar opções de navegação
e você aprendeu que este é um O objeto Javascript no qual você pode
configurar um título de cabeçalho e um título de cabeçalho agora deve ser meu nome de categoria.
O problema aqui é que, aqui, a categoria selecionada está disponível, mas faz parte da função do componente.
Isso, é claro, por outro lado, não é algo que possamos acessar aqui, porque isso acontece após a
definição da função.
Portanto, não temos acesso à categoria que identificamos lá,
isso é um problema.
O bom é que as opções de navegação podem ser um objeto se você tiver valores de configuração codificados estáticos, mas também
pode ser uma função se você precisar de uma configuração dinâmica que depende da alteração de dados e, é claro,
os dados de que dependemos aqui estão mudando porque ' estamos usando uma mesma
tela para diferentes categorias e, portanto, o ID e o título da categoria mudam toda vez
que usamos essa tela. Uma vez, usamos para
a categoria italiana, da próxima vez, para a categoria exótica. Essa função que você também pode usar, é
obviamente suportada pela navegação React e,
se for uma função, o que você está passando para as opções de navegação,
a navegação React chamará isso para você e passará alguns dados de navegação, portanto passar um objeto com alguns dados que devem
ajudá-lo, veremos o que está lá em um segundo, porque podemos simplesmente registrar esses dados de
navegação aqui.
Vamos começar com isso, agora
vamos a esta página e vamos ver o que está lá.
Se eu expandir isso aqui, esse é o log que obtive e você
verá que temos outro suporte de navegação nos dados de navegação. Lá temos ações, navegamos pop, push,
basicamente
o que sabíamos. Também temos o getParam
lá e isso deve ser útil, pois isso nos permitirá extrair dados aqui dentro de nossas opções
de navegação no final, o que deve ser super útil. Portanto, no final, obtemos o mesmo suporte de navegação que também recebemos nos nossos componentes.
Então, aqui, agora podemos usar navigationData. navegação. getParam para obter meu ID de categoria,
exatamente o que fizemos no componente. Assim, podemos repetir o código que tínhamos em um
componente e obter a categoria selecionada, não apenas no componente, mas agora também nesta função que usamos para configurar nossas opções de navegação.
Então agora aqui, também temos acesso à categoria selecionada e agora, opções de navegação, essa função, se
for uma função, deve, é claro, retornar um objeto com suas opções de navegação.
Portanto, o que anteriormente definimos diretamente como opções de navegação quando agora só havia valores codificados,
deve
ser retornado, mas agora podemos usar esses dados derivados dinamicamente ou as informações derivadas dinamicamente aqui.
Portanto, agora ainda podemos configurar um título de cabeçalho aqui e o título do cabeçalho agora pode
ser selecionadoCategory. título.
É assim que podemos derivar dinamicamente isso e, portanto, agora, se você voltar,
verá italiano aqui, verá rápido e fácil aqui, verá alemão aqui e isso simplesmente funciona.
Observe que, por padrão, você também recebe um texto do botão Voltar, que é o título da tela anterior, esse é outro
recurso padrão que o React Navigation fornece. Aqui vemos as categorias de refeição porque somos
provenientes de categorias de refeição. Somente em uma maneira rápida e fácil,
onde isso seria muito longo ao lado deste título um pouco mais longo, ele reverte e volta ao padrão, que é um bom comportamento
padrão que você pode substituir, mas que eu estou feliz aqui. No Android, não temos um texto de volta, mas é
claro que temos um botão de voltar e, lá, o cabeçalho também é preenchido corretamente para as telas carregadas.
É assim que também podemos obter nossos dados dinamicamente aqui nas opções de navegação. Um problema que você pode notar, porém, o que é
mais visível aqui no Android, é que o cabeçalho na nova tela que estamos carregando não tem o mesmo estilo
que o nosso cabeçalho aqui, não tem a cor de fundo, ou seja. Agora, é claro, isso é facilmente corrigido, porque nas
opções de navegação da categoria refeições, podemos simplesmente trazer o estilo do cabeçalho e a cor do cabeçalho
que configuramos aqui na outra tela também. Então, podemos copiar isso aqui e
isso significa que precisamos importar a API da plataforma e, é claro, nossa cor constante. Portanto, importe cores
de constantes / cores como essa e, quando fizermos isso, veremos que, se formos para lá , agora temos o mesmo estilo de cabeçalho para esta nova
página, que é o que você normalmente deseja. O que você normalmente não quer é que
você precise copiar a mesma configuração para todas as telas, porque neste aplicativo, não temos
muitas telas, certamente podemos fazer isso, mas em aplicativos maiores, onde você tem
mais telas, que seria super chato e super pesado, então definitivamente não é o caminho a percorrer.
Então, vamos dar uma olhada em uma alternativa na próxima palestra.