1 00:00:02,280 --> 00:00:05,200 Vamos começar com o estilo da gaveta na tela 2 00:00:05,220 --> 00:00:06,560 de filtros, isso não 3 00:00:06,570 --> 00:00:11,080 é difícil, é algo que fizemos antes. No navegador de filtros aqui 4 00:00:11,100 --> 00:00:16,500 no navegador de pilha, no final, apenas precisamos configurar as opções de navegação padrão que também 5 00:00:16,500 --> 00:00:24,090 estamos usando para o navegador fav em nosso navegador de refeições. Portanto, podemos apenas copiar este segundo objeto de configuração aqui e 6 00:00:24,090 --> 00:00:29,270 adicioná-lo ao nosso navegador de filtros aqui como um segundo argumento para criar o navegador de pilha. 7 00:00:29,350 --> 00:00:31,870 Obviamente, podemos remover a linha comentada, mas 8 00:00:31,870 --> 00:00:39,220 com essa alteração simples, garantimos que estamos usando a mesma barra de navegação ou estilo de barra de 9 00:00:39,220 --> 00:00:40,450 ação aqui. 10 00:00:40,450 --> 00:00:45,580 Portanto, essa é uma mudança simples, mas útil, agora para a própria gaveta, que tal 11 00:00:45,580 --> 00:00:48,770 esse visual aqui e o estilo da gaveta? 12 00:00:48,780 --> 00:00:55,690 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 13 00:00:55,990 --> 00:01:01,120 padrão de ter uma lista com efeito cascata aqui no Android e um efeito diferente no iOS, 14 00:01:01,120 --> 00:01:01,910 mas acho 15 00:01:02,050 --> 00:01:05,680 que esse é um bom padrão. que eu realmente não quero mudar. 16 00:01:05,710 --> 00:01:10,930 Se desejar, você pode, no entanto, substituir todo este componente, que é renderizado aqui e anexado, e 17 00:01:10,930 --> 00:01:15,850 encontra um link para os documentos oficiais, onde você pode aprender mais sobre isso, caso 18 00:01:15,850 --> 00:01:16,510 precise personalizá-lo. 19 00:01:16,780 --> 00:01:25,050 O que eu obviamente quero mudar é o estilo desses itens e o texto que é exibido aqui. 20 00:01:25,060 --> 00:01:26,550 Agora isso não 21 00:01:26,590 --> 00:01:32,500 é muito difícil, vamos começar com o texto. Como um texto, como você pode ver, por padrão, leva esses 22 00:01:32,530 --> 00:01:34,550 identificadores aqui, filtros favoritos de refeições. 23 00:01:34,570 --> 00:01:39,020 Agora, é claro, ele pode fazer isso, mas as refeições favorecem, esse não é 24 00:01:39,040 --> 00:01:42,250 realmente um texto que queremos mostrar aos nossos usuários. 25 00:01:42,250 --> 00:01:47,540 Portanto, quero substituir isso e podemos fazer isso com as boas e antigas opções de 26 00:01:47,560 --> 00:01:53,920 navegação que, assim como antes com as guias onde também podemos controlar o texto do rótulo, temos que definir 27 00:01:54,160 --> 00:02:00,460 nossos navegadores de pilha, quando estamos criando o stack navigator, além de definir as opções de navegação padrão 28 00:02:00,460 --> 00:02:05,690 para todas as telas desse navegador, podemos definir opções de navegação para todo o navegador, 29 00:02:05,700 --> 00:02:10,510 que não é para as telas do navegador, mas para o navegador quando é 30 00:02:10,510 --> 00:02:11,500 usado como 31 00:02:11,740 --> 00:02:19,570 uma tela. estamos fazendo aqui e depois aqui, podemos definir um rótulo de gaveta e definir isso para filtros com alguns pontos de 32 00:02:19,570 --> 00:02:22,100 exclamação, apenas para vermos que isso tem 33 00:02:22,150 --> 00:02:23,720 efeito, agora vemos isso 34 00:02:23,770 --> 00:02:27,220 aqui, então é aqui que podemos definir isso, uma opção 35 00:02:27,220 --> 00:02:32,800 Como alternativa, aqui, ao criar o navegador da gaveta, podemos usar esse formato mais longo, onde 36 00:02:32,800 --> 00:02:38,260 configuramos uma tela e, em seguida, configuramos as opções de navegação aqui, e essas são apenas 37 00:02:38,590 --> 00:02:40,230 alternativas onde nenhum dos dois 38 00:02:40,240 --> 00:02:41,830 é melhor ou pior, 39 00:02:41,980 --> 00:02:47,840 você pode usar um dos seguintes eles e agora aqui, vou definir o rótulo da gaveta para 40 00:02:47,840 --> 00:02:52,760 as refeições, digamos, que faz mais sentido para mim do que as refeições favoritas. 41 00:02:53,600 --> 00:02:58,670 Então, com isso, se eu abrir a gaveta agora, vejo refeições e filtros. Para filtros, agora não substituí o título 42 00:02:58,670 --> 00:03:02,100 porque estou bem com o padrão de pegar meu 43 00:03:02,240 --> 00:03:04,580 identificador, mas nas refeições, substituí-lo. 44 00:03:04,580 --> 00:03:08,420 Agora, e o estilo, a cor e assim por diante? 45 00:03:08,420 --> 00:03:15,020 Bem, é claro que isso também pode ser controlado. Bem, como antes, por exemplo, nas guias em que também 46 00:03:15,020 --> 00:03:21,260 podemos passar um segundo argumento para criar o navegador da guia inferior para controlar o layout e o estilo 47 00:03:21,260 --> 00:03:22,130 das guias 48 00:03:22,130 --> 00:03:28,190 em geral, podemos fazer o mesmo pela gaveta. Para criar o navegador da gaveta, podemos passar um segundo argumento, 49 00:03:28,220 --> 00:03:31,320 que é um objeto configurado para o próprio navegador da gaveta 50 00:03:31,550 --> 00:03:33,290 e, aí, temos algumas opções. 51 00:03:33,320 --> 00:03:37,880 Mais uma vez, os documentos oficiais fornecem uma lista exaustiva de tudo o que você 52 00:03:37,880 --> 00:03:42,980 pode configurar, por exemplo, você tem suas opções de conteúdo que permitem controlar o conteúdo na gaveta, para 53 00:03:42,980 --> 00:03:47,730 que os itens da gaveta cheguem ao fim e lá você tenha várias configurações que você pode 54 00:03:47,930 --> 00:03:53,960 definir, por exemplo, você pode definir uma cor de tonalidade ativa que é basicamente a cor de um item quando está ativo 55 00:03:54,090 --> 00:03:59,870 e lá, podemos defini-la como cores, cor de destaque se quisermos, em vez de usar o padrão azul e portanto, 56 00:03:59,870 --> 00:04:00,320 agora, 57 00:04:00,320 --> 00:04:05,170 isso é laranja e é assim que é fácil mudar isso, é tudo o que precisamos fazer. 58 00:04:05,330 --> 00:04:08,980 Agora, se também quisermos alterar a fonte 59 00:04:09,080 --> 00:04:15,710 usada lá, também podemos fazer isso. Além de definir uma cor de tonalidade ativa aqui nas opções 60 00:04:15,710 --> 00:04:17,120 de conteúdo, podemos configurar 61 00:04:17,120 --> 00:04:22,010 um estilo de etiqueta aqui e usar um objeto de estilo que será aplicado ao componente 62 00:04:22,010 --> 00:04:24,810 de texto subjacente na gaveta, para que possamos configurar 63 00:04:24,950 --> 00:04:32,870 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, 64 00:04:32,870 --> 00:04:36,550 nem mesmo a versão em negrito. Se fizermos isso, vemos claramente uma diferença. 65 00:04:36,550 --> 00:04:40,790 Agora, voltarei a negrito, porque na verdade é melhor, mas para ver a diferença, 66 00:04:40,880 --> 00:04:42,890 acho que ficou claro sem negrito. 67 00:04:42,920 --> 00:04:44,950 Então, agora, estamos usando nossa própria 68 00:04:44,960 --> 00:04:47,570 fonte aqui, a versão em negrito e 69 00:04:47,570 --> 00:04:48,530 nossa própria 70 00:04:48,530 --> 00:04:54,130 cor, e isso é muito legal, eu diria, o mesmo, é claro, também funciona no Android. 71 00:04:54,170 --> 00:04:58,460 É assim que você pode trabalhar com sua gaveta, como também 72 00:04:58,460 --> 00:05:01,700 pode estilizar tudo e, com isso, aprendeu sobre 73 00:05:01,940 --> 00:05:07,850 os principais padrões de navegação que você pode adicionar ao seu aplicativo com a ajuda 74 00:05:07,850 --> 00:05:09,270 do React Navigation. 75 00:05:09,290 --> 00:05:15,770 Agora, obviamente, como enfatizei várias vezes ao longo deste módulo, há muito a ser configurado, todos esses navegadores 76 00:05:15,770 --> 00:05:20,990 têm opções e configurações de navegação diferentes para os próprios navegadores e, portanto, definitivamente 77 00:05:20,990 --> 00:05:26,060 confira os documentos oficiais e brinque com as diferentes configurações que você vê lá 78 00:05:26,060 --> 00:05:31,820 para experimente o que você pode fazer. As coisas que mostrei aqui e as que mudamos aqui são provavelmente 79 00:05:31,820 --> 00:05:35,000 as coisas comuns que você deseja personalizar, e foi por isso que as 80 00:05:35,090 --> 00:05:36,580 mostrei aqui, mas novamente há 81 00:05:36,590 --> 00:05:40,950 muito o que fazer, definitivamente confira os documentos oficiais. Para este aplicativo, a parte 82 00:05:40,970 --> 00:05:43,960 de navegação é basicamente concluída, não há muito a 83 00:05:43,970 --> 00:05:46,410 acrescentar, agora é hora de revisitar 84 00:05:46,430 --> 00:05:50,360 o estilo geral, por exemplo, verifique se estamos usando as fontes 85 00:05:50,360 --> 00:05:56,600 corretas em todos os lugares, também nas guias e no cabeçalho e por exemplo também para o texto 86 00:05:56,660 --> 00:06:00,590 aqui que atualmente não estamos e, em seguida, também preencha o 87 00:06:00,590 --> 00:06:06,050 restante do aplicativo com um pouco de carne. Por exemplo, a página de detalhes aqui que 88 00:06:06,050 --> 00:06:11,810 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. 89 00:06:11,810 --> 00:06:14,290 É o que farei no restante 90 00:06:14,330 --> 00:06:20,330 deste módulo. Depois, no próximo módulo, também garantiremos que adicionemos mais lógica e que, por exemplo, possamos 91 00:06:20,330 --> 00:06:25,700 marcar algo como favorito e, portanto, adicioná-lo aos favoritos. guia que atualmente não funciona. 92 00:06:25,910 --> 00:06:30,470 Mas, por enquanto, vamos terminar o estilo e adicionar o restante do layout e conteúdo a este aplicativo.