Vamos começar com o estilo da gaveta na tela
de filtros, isso não
é difícil, é algo que fizemos antes. No navegador de filtros aqui
no navegador de pilha, no final, apenas precisamos configurar as opções de navegação padrão que também
estamos usando para o navegador fav em nosso navegador de refeições. Portanto, podemos apenas copiar este segundo objeto de configuração aqui e
adicioná-lo ao nosso navegador de filtros aqui como um segundo argumento para criar o navegador de pilha.
Obviamente, podemos remover a linha comentada, mas
com essa alteração simples, garantimos que estamos usando a mesma barra de navegação ou estilo de barra de
ação aqui.
Portanto, essa é uma mudança simples, mas útil, agora para a própria gaveta, que tal
esse visual aqui e o estilo da gaveta?
Agora, por exemplo, você pode controlar a gaveta inteira e alterar a forma como os itens são dispostos lá e não usar esse
padrão de ter uma lista com efeito cascata aqui no Android e um efeito diferente no iOS,
mas acho
que esse é um bom padrão. que eu realmente não quero mudar.
Se desejar, você pode, no entanto, substituir todo este componente, que é renderizado aqui e anexado, e
encontra um link para os documentos oficiais, onde você pode aprender mais sobre isso, caso
precise personalizá-lo.
O que eu obviamente quero mudar é o estilo desses itens e o texto que é exibido aqui.
Agora isso não
é muito difícil, vamos começar com o texto. Como um texto, como você pode ver, por padrão, leva esses
identificadores aqui, filtros favoritos de refeições.
Agora, é claro, ele pode fazer isso, mas as refeições favorecem, esse não é
realmente um texto que queremos mostrar aos nossos usuários.
Portanto, quero substituir isso e podemos fazer isso com as boas e antigas opções de
navegação que, assim como antes com as guias onde também podemos controlar o texto do rótulo, temos que definir
nossos navegadores de pilha, quando estamos criando o stack navigator, além de definir as opções de navegação padrão
para todas as telas desse navegador, podemos definir opções de navegação para todo o navegador,
que não é para as telas do navegador, mas para o navegador quando é
usado como
uma tela. estamos fazendo aqui e depois aqui, podemos definir um rótulo de gaveta e definir isso para filtros com alguns pontos de
exclamação, apenas para vermos que isso tem
efeito, agora vemos isso
aqui, então é aqui que podemos definir isso, uma opção
Como alternativa, aqui, ao criar o navegador da gaveta, podemos usar esse formato mais longo, onde
configuramos uma tela e, em seguida, configuramos as opções de navegação aqui, e essas são apenas
alternativas onde nenhum dos dois
é melhor ou pior,
você pode usar um dos seguintes eles e agora aqui, vou definir o rótulo da gaveta para
as refeições, digamos, que faz mais sentido para mim do que as refeições favoritas.
Então, com isso, se eu abrir a gaveta agora, vejo refeições e filtros. Para filtros, agora não substituí o título
porque estou bem com o padrão de pegar meu
identificador, mas nas refeições, substituí-lo.
Agora, e o estilo, a cor e assim por diante?
Bem, é claro que isso também pode ser controlado. Bem, como antes, por exemplo, nas guias em que também
podemos passar um segundo argumento para criar o navegador da guia inferior para controlar o layout e o estilo
das guias
em geral, podemos fazer o mesmo pela gaveta. Para criar o navegador da gaveta, podemos passar um segundo argumento,
que é um objeto configurado para o próprio navegador da gaveta
e, aí, temos algumas opções.
Mais uma vez, os documentos oficiais fornecem uma lista exaustiva de tudo o que você
pode configurar, por exemplo, você tem suas opções de conteúdo que permitem controlar o conteúdo na gaveta, para
que os itens da gaveta cheguem ao fim e lá você tenha várias configurações que você pode
definir, por exemplo, você pode definir uma cor de tonalidade ativa que é basicamente a cor de um item quando está ativo
e lá, podemos defini-la como cores, cor de destaque se quisermos, em vez de usar o padrão azul e portanto,
agora,
isso é laranja e é assim que é fácil mudar isso, é tudo o que precisamos fazer.
Agora, se também quisermos alterar a fonte
usada lá, também podemos fazer isso. Além de definir uma cor de tonalidade ativa aqui nas opções
de conteúdo, podemos configurar
um estilo de etiqueta aqui e usar um objeto de estilo que será aplicado ao componente
de texto subjacente na gaveta, para que possamos configurar
coisas como alinhamento de texto se queremos, ou no meu caso aqui, simplesmente configurar a família de fontes e definir isso para abrir sans, talvez assim,
nem mesmo a versão em negrito. Se fizermos isso, vemos claramente uma diferença.
Agora, voltarei a negrito, porque na verdade é melhor, mas para ver a diferença,
acho que ficou claro sem negrito.
Então, agora, estamos usando nossa própria
fonte aqui, a versão em negrito e
nossa própria
cor, e isso é muito legal, eu diria, o mesmo, é claro, também funciona no Android.
É assim que você pode trabalhar com sua gaveta, como também
pode estilizar tudo e, com isso, aprendeu sobre
os principais padrões de navegação que você pode adicionar ao seu aplicativo com a ajuda
do React Navigation.
Agora, obviamente, como enfatizei várias vezes ao longo deste módulo, há muito a ser configurado, todos esses navegadores
têm opções e configurações de navegação diferentes para os próprios navegadores e, portanto, definitivamente
confira os documentos oficiais e brinque com as diferentes configurações que você vê lá
para experimente o que você pode fazer. As coisas que mostrei aqui e as que mudamos aqui são provavelmente
as coisas comuns que você deseja personalizar, e foi por isso que as
mostrei aqui, mas novamente há
muito o que fazer, definitivamente confira os documentos oficiais. Para este aplicativo, a parte
de navegação é basicamente concluída, não há muito a
acrescentar, agora é hora de revisitar
o estilo geral, por exemplo, verifique se estamos usando as fontes
corretas em todos os lugares, também nas guias e no cabeçalho e por exemplo também para o texto
aqui que atualmente não estamos e, em seguida, também preencha o
restante do aplicativo com um pouco de carne. Por exemplo, a página de detalhes aqui que
ainda possui algum conteúdo fictício no momento e também nossa página de filtros, que também possui apenas conteúdo fictício.
É o que farei no restante
deste módulo. Depois, no próximo módulo, também garantiremos que adicionemos mais lógica e que, por exemplo, possamos
marcar algo como favorito e, portanto, adicioná-lo aos favoritos. guia que atualmente não funciona.
Mas, por enquanto, vamos terminar o estilo e adicionar o restante do layout e conteúdo a este aplicativo.