1 00:00:02,250 --> 00:00:07,590 Adicionar um botão ao cabeçalho como eu quero aqui, como um botão de navegação, exige 2 00:00:07,590 --> 00:00:11,670 um pouco de trabalho extra inicialmente, mas depois é muito direto. 3 00:00:11,700 --> 00:00:17,160 Antes de tudo, precisamos instalar um pacote extra para facilitar isso porque, teoricamente, você tem 4 00:00:17,160 --> 00:00:18,540 muito poder aqui. 5 00:00:18,660 --> 00:00:21,690 Você pode adicionar esses botões com a ajuda das opções de 6 00:00:21,690 --> 00:00:27,450 navegação; portanto, aqui na MealDetailScreen, ao lado de definir um título de cabeçalho, você pode definir headerLeft e headerRight para 7 00:00:27,450 --> 00:00:30,330 adicionar botões à esquerda e à direita do título. 8 00:00:30,330 --> 00:00:36,330 Normalmente, você deseja usar a direita porque a esquerda é reservada para o botão voltar e, geralmente, 9 00:00:36,330 --> 00:00:39,310 você pode simplesmente retornar um elemento jsx 10 00:00:39,450 --> 00:00:47,220 para lá, para que você possa simplesmente defini-lo como texto, como favorito, que é algo que você pode fazer aqui e realmente 11 00:00:47,220 --> 00:00:51,870 me deixar mostre isso para você e, portanto, reinicie o servidor antes 12 00:00:51,870 --> 00:00:58,890 de usarmos um pacote, pois, embora você possa apenas adicionar um componente aqui, obtendo o estilo certo, o posicionamento correto 13 00:00:58,950 --> 00:01:05,430 para todas as plataformas diferentes, especialmente se você não estiver apenas usando texto aqui, mas também talvez um 14 00:01:05,430 --> 00:01:11,160 ícone que você normalmente queira ter lá, que pode ser realmente complicado e é por isso 15 00:01:11,160 --> 00:01:14,810 que instalaremos um pacote extra que facilitará as coisas assim. 16 00:01:18,260 --> 00:01:25,510 Então, deixe-me reiniciar isso com o npm start, não o npm install, o npm start e com 17 00:01:25,850 --> 00:01:34,320 ele funcionando novamente, vamos recarregar isso aqui no iOS e deixe-me mostrar o que temos aqui agora que eu renderizo um texto. 18 00:01:34,520 --> 00:01:35,930 Você vê este texto 19 00:01:35,960 --> 00:01:37,180 aqui, então isso 20 00:01:37,190 --> 00:01:43,010 está sendo renderizado, mas como eu disse, ter o preenchimento certo, o alinhamento certo, o estilo certo, o tamanho 21 00:01:43,010 --> 00:01:47,870 certo, super irritante se você fizer tudo sozinho, porque não está apenas fazendo isso para um 22 00:01:47,870 --> 00:01:49,300 dispositivo, mas para muitos dispositivos. 23 00:01:49,370 --> 00:01:54,320 É por isso que vamos instalar um pacote especial aqui que nos ajuda com isso. 24 00:01:54,320 --> 00:02:01,250 Portanto, saia do processo por enquanto, execute o processo dev e use o npm 25 00:02:01,250 --> 00:02:10,130 install --save e instale o pacote react-navigation-header-buttons, que é um pacote que ajuda você, surpreendentemente, se você der 26 00:02:10,310 --> 00:02:16,220 uma olhada no nome, na configuração alguns botões no cabeçalho, na 27 00:02:16,280 --> 00:02:24,850 barra de ferramentas superior aqui. Este é um pacote que facilitará a adição de tais botões. Com isso adicionado, vou reiniciar meu servidor de desenvolvimento 28 00:02:24,850 --> 00:02:30,490 com o npm start e agora vou criar um novo componente auxiliar na pasta de componentes, que nomeei auxiliar, um 29 00:02:30,490 --> 00:02:37,290 botão de cabeçalho, não um botão de cabeçalho, e não um auxiliar. Lá, importarei o React do 30 00:02:37,300 --> 00:02:44,210 React porque esse será um componente normal do React que criaremos lá 31 00:02:44,570 --> 00:02:51,980 e importará algo desse novo pacote react-navigation-header-buttons que acabamos de instalar e que 32 00:02:51,980 --> 00:03:02,650 algo que eu importo é o botão do cabeçalho. Além disso, vamos importar também algo do @ expo / vector-icons que deve 33 00:03:02,680 --> 00:03:08,830 estar disponível, mas apenas para ser super seguro, você também pode executar o npm install 34 00:03:08,830 --> 00:03:16,270 --save @ expo / vector-icons para instalar este pacote também porque você ' Precisamos disso e o que 35 00:03:19,050 --> 00:03:24,630 precisamos importar desse pacote são ionicons. Claro, você pode usar qualquer conjunto de 36 00:03:24,630 --> 00:03:30,270 ícones que desejar, eu cobri os ícones no início deste curso e você pode usar qualquer ícone 37 00:03:30,270 --> 00:03:35,250 que desejar no botão do cabeçalho; trabalharei com ionicons porque os uso no restante este 38 00:03:35,460 --> 00:03:40,440 curso também, mas, novamente, você pode usar os ícones que desejar e, é claro, no 39 00:03:40,440 --> 00:03:45,900 cabeçalho, não precisa usar ícones, também pode usar outro texto, mas normalmente, você usa ícones, é claro, 40 00:03:45,900 --> 00:03:49,470 é isso que os usuários normalmente são usados em outros aplicativos. 41 00:03:49,740 --> 00:03:58,040 Além disso, também importarei cores das constantes / Cores e agora crio meu componente aqui e esse é o, digamos, o botão de cabeçalho 42 00:03:58,070 --> 00:04:04,850 personalizado ou apenas o botão de cabeçalho, o que você quiser, mas já estamos importando, tenho que escolher um 43 00:04:05,030 --> 00:04:09,290 nome diferente aqui para não ter um conflito de nomes e isso 44 00:04:09,650 --> 00:04:17,390 receberá alguns adereços e retornará o botão de cabeçalho que estamos recebendo deste pacote que instalamos, mas em breve adicionaremos uma configuração 45 00:04:17,390 --> 00:04:22,280 extra e é por isso que estou agrupando isso em um componente separado para 46 00:04:22,280 --> 00:04:27,800 que não tenhamos que repetir essa configuração para todos os botões que estamos usando em qualquer 47 00:04:27,800 --> 00:04:28,990 lugar do 48 00:04:29,140 --> 00:04:33,250 aplicativo e, é claro, exportarei meu botão de cabeçalho personalizado padrão. 49 00:04:33,340 --> 00:04:39,850 Então agora este botão de cabeçalho que estou usando aqui neste pacote que instalamos, que receberá todos os adereços 50 00:04:39,850 --> 00:04:45,790 que estamos recebendo com este pequeno truque que podemos usar no React, onde encaminhamos todos os adereços 51 00:04:45,790 --> 00:04:51,700 com este atalho, retirando todos os pares de valores-chave e passá-los para esse objeto que é esse 52 00:04:51,700 --> 00:04:53,060 componente no final. 53 00:04:53,110 --> 00:04:56,790 Então essa é a primeira coisa, precisamos encaminhar todos os adereços e isso 54 00:04:56,800 --> 00:04:57,670 é super 55 00:04:57,670 --> 00:05:00,470 importante, não esqueça disso, caso contrário não funcionará corretamente. 56 00:05:00,490 --> 00:05:07,540 O segundo passo é que adicionamos o componente de componente de ícone com um capital I, que é o suporte que o botão de cabeçalho que 57 00:05:07,540 --> 00:05:13,580 estamos obtendo deste pacote espera e lá passo o ionicons. Portanto, isso espera que um pacote 58 00:05:13,580 --> 00:05:20,730 de ícones vetoriais que possa ser usado para renderizar ícones, não precise ser ionicons, mas seja a partir 59 00:05:20,730 --> 00:05:27,800 de @ expo / vector-icons ou do pacote de ícones vetoriais React Native subjacente no qual o pacote 60 00:05:27,800 --> 00:05:34,850 expo se baseia on e você também pode analisar em um tamanho de ícone e padronizarei isso 61 00:05:34,850 --> 00:05:40,370 para que todos os meus botões de cabeçalho em todo o aplicativo tenham o 62 00:05:40,370 --> 00:05:48,470 mesmo tamanho de 23, que achei que funcionava muito bem. Por último, mas não menos importante, também configurarei uma cor aqui 63 00:05:49,160 --> 00:05:59,360 e usarei minha cor principal, embora, é claro, tenhamos que garantir a diferenciação por plataforma. Então, também importarei a plataforma do React Native, porque no Android, 64 00:05:59,390 --> 00:06:06,210 nosso cabeçalho terá a cor principal como plano de fundo, então queremos usar uma cor 65 00:06:06,210 --> 00:06:08,000 de ícone branca. 66 00:06:08,150 --> 00:06:15,320 Então aqui, vou verificar a plataforma. os, se é igual ao Android, quero usar branco aqui e 67 00:06:15,360 --> 00:06:18,350 somente se for iOS, quero usar a cor principal. 68 00:06:18,470 --> 00:06:21,020 Portanto, agora temos o botão de cabeçalho 69 00:06:21,020 --> 00:06:26,840 pré-configurado, agora podemos usá-lo no local, no componente em que queremos adicioná-lo ao nosso cabeçalho e esse 70 00:06:26,840 --> 00:06:31,030 é o MealDetailScreen nesse caso. Agora, precisamos importar outra coisa 71 00:06:31,120 --> 00:06:34,520 do pacote recém-instalado, portanto, a partir dos botões react-navigation-header-buttons, deste 72 00:06:34,720 --> 00:06:41,140 pacote, aqui temos que instalar ou importar os botões do cabeçalho, para não o botão do cabeçalho que 73 00:06:41,140 --> 00:06:47,710 usamos no outro arquivo mas botões de cabeçalho, plural. Adicionamos isso aqui, porque agora lá embaixo, 74 00:06:47,770 --> 00:06:53,650 onde configuramos as opções de navegação para esse componente, em vez de usar nosso componente 75 00:06:53,650 --> 00:06:58,200 de texto, quero usar os botões de cabeçalho, esse componente apenas adicionei 76 00:06:58,250 --> 00:07:04,940 a importação e envolvo isso em torno de outro elemento que temos importar dos botões de cabeçalho 77 00:07:04,960 --> 00:07:11,940 de navegação de reação e esse é o item. Item é outro componente que importamos, que 78 00:07:12,090 --> 00:07:16,710 agora podemos usar entre as tags de abertura e 79 00:07:16,710 --> 00:07:26,600 fechamento dos botões do cabeçalho; portanto, aqui adicionamos item e item é um componente de fechamento automático, onde descrevemos o ícone 80 00:07:26,600 --> 00:07:31,970 que queremos renderizar no final. Também podemos atribuir a ele um título que seria 81 00:07:32,000 --> 00:07:35,170 renderizado como substituto e nomearemos esse favorito, mas normalmente não o 82 00:07:35,180 --> 00:07:37,670 veremos. Em vez disso, também posso configurar um 83 00:07:37,670 --> 00:07:46,280 nome de ícone e agora deve ser, por exemplo, ios- star, que é um ícone válido do ionicons, e você pode pesquisar na lista @ expo / vector-icons que 84 00:07:46,280 --> 00:07:51,440 mostrei no início do curso, que você também encontra anexada a este vídeo para obter os possíveis 85 00:07:51,440 --> 00:07:53,570 ícones que você pode usar aqui. 86 00:07:53,570 --> 00:07:59,540 Apenas certifique-se de usar um ícone do conjunto de ícones usado nos botões do cabeçalho, 87 00:07:59,540 --> 00:08:01,990 no meu caso, dos ionicons. 88 00:08:02,000 --> 00:08:03,830 Agora, isso indica qual ícone 89 00:08:03,830 --> 00:08:09,680 usar, agora também podemos adicionar o onPress para registrar uma função que deve ser acionada quando esse 90 00:08:09,680 --> 00:08:12,570 ícone for pressionado ou quando o item no 91 00:08:12,650 --> 00:08:19,220 cabeçalho for pressionado e, por enquanto, vou apenas marcar como favorito aqui, registre isso no console para ver se funcionou. 92 00:08:19,220 --> 00:08:22,720 Ainda não estamos totalmente lá porque não estamos usando nosso botão de 93 00:08:22,730 --> 00:08:25,870 cabeçalho personalizado, essa é a última peça que falta. 94 00:08:26,000 --> 00:08:28,370 Precisamos importar esse componente que criamos, 95 00:08:28,430 --> 00:08:35,120 portanto, importe o botão de cabeçalho dos componentes e, em seguida, do botão de cabeçalho, esse é o botão 96 00:08:35,120 --> 00:08:42,740 em que trabalhamos e passamos isso para os botões de cabeçalho aqui, porque isso espera um componente de botão de cabeçalho para onde 97 00:08:42,740 --> 00:08:47,870 apontamos para o botão componente que deve ser usado para renderizar esse item no final. 98 00:08:47,870 --> 00:08:52,220 Agora, tudo isso é muito complexo, como você pode ver, muitos componentes aninhados, essa é apenas 99 00:08:52,220 --> 00:08:57,500 uma configuração um pouco complicada na primeira vez em que você faz isso, mas quando você o usa em 100 00:08:57,500 --> 00:09:01,790 outros componentes, trata-se apenas de copiar a mesma configuração aqui, alterando o título, alterando o 101 00:09:01,790 --> 00:09:05,860 ícone e alterando a lógica e você está lá. Portanto, isso é tudo o 102 00:09:05,870 --> 00:09:07,970 que você precisa fazer no futuro; apenas 103 00:09:08,000 --> 00:09:12,740 a configuração inicial é um trabalho extra aqui. Com toda essa configuração, no 104 00:09:12,740 --> 00:09:14,540 entanto, se agora 105 00:09:19,710 --> 00:09:25,770 salvarmos isso, poderemos ver nossa estrela aqui. Este é o ícone que vemos e podemos pressionar 106 00:09:25,770 --> 00:09:35,290 isso e, enquanto pressiono, você verá a marca como favorita sendo registrada aqui no console. Vamos ver também que, no Android, sempre temos a estrela 107 00:09:35,300 --> 00:09:40,150 e, se eu pressionar essa estrela aqui, também vemos a 108 00:09:40,160 --> 00:09:47,100 marca como favorita, então está funcionando. Uma pequena nota que acabei de ver se temos várias receitas, podemos querer um estilo extra lá, totalmente 109 00:09:47,100 --> 00:09:52,470 não relacionado ao botão do cabeçalho, apenas vendo. Então, no MealItem. arquivo js, no item 110 00:09:52,470 --> 00:09:56,460 refeição, na verdade adicionarei uma margem vertical de 10, novamente, totalmente 111 00:09:56,520 --> 00:10:02,520 não é algo que você precisa aqui, apenas para garantir que isso pareça melhor se tivermos vários 112 00:10:02,520 --> 00:10:03,050 itens. 113 00:10:03,060 --> 00:10:08,670 O importante aqui é que temos nosso botão de cabeçalho, este ícone e é assim que você 114 00:10:09,180 --> 00:10:13,100 pode adicionar botões ou itens de ícones aqui ao cabeçalho e, é 115 00:10:13,170 --> 00:10:18,570 claro, você pode adicionar mais de um. Aqui na tela de detalhes da refeição, 116 00:10:18,600 --> 00:10:24,770 você pode ter vários itens entre os botões do cabeçalho aqui, configurados no headerRight nas opções de navegação. 117 00:10:24,850 --> 00:10:26,220 É assim que você 118 00:10:26,220 --> 00:10:33,750 adiciona itens aqui, você pode ter mais de um, por exemplo, aqui também poderíamos ter o ios-star-outline, que é outro ícone que parece 119 00:10:33,750 --> 00:10:37,260 um pouco diferente para que possamos ver a diferença aqui, agora 120 00:10:37,260 --> 00:10:38,630 temos dois aqui . 121 00:10:38,790 --> 00:10:45,600 Portanto, isso é possível, é claro que você não deve sobrecarregar isso para que sua interface do usuário permaneça limpa e funcione, 122 00:10:46,710 --> 00:10:55,010 mas é assim que você pode adicionar ícones aqui à sua tela. A propósito, o aviso que estou chegando aqui sobre as teclas duplas, o 123 00:10:55,010 --> 00:10:59,910 título aqui também é usado como uma chave para seus itens. Portanto, se você tiver vários 124 00:10:59,930 --> 00:11:03,350 itens, não use o mesmo título, mas eu o adicionei 125 00:11:03,350 --> 00:11:08,640 apenas para de qualquer forma, para fins de demonstração, então simplesmente me livrarei disso e estamos bem. 126 00:11:08,810 --> 00:11:12,290 Agora, nosso ícone de estrela ainda não faz nada, isso é algo 127 00:11:12,320 --> 00:11:17,660 que adicionaremos mais tarde, mas pelo menos o vemos e isso é realmente importante em um módulo em que 128 00:11:17,660 --> 00:11:20,300 falamos sobre navegação e trabalho com o cabeçalho.