Adicionar um botão ao cabeçalho como eu quero aqui, como um botão de navegação, exige
um pouco de trabalho extra inicialmente, mas depois é muito direto.
Antes de tudo, precisamos instalar um pacote extra para facilitar isso porque, teoricamente, você tem
muito poder aqui.
Você pode adicionar esses botões com a ajuda das opções de
navegação; portanto, aqui na MealDetailScreen, ao lado de definir um título de cabeçalho, você pode definir headerLeft e headerRight para
adicionar botões à esquerda e à direita do título.
Normalmente, você deseja usar a direita porque a esquerda é reservada para o botão voltar e, geralmente,
você pode simplesmente retornar um elemento jsx
para lá, para que você possa simplesmente defini-lo como texto, como favorito, que é algo que você pode fazer aqui e realmente
me deixar mostre isso para você e, portanto, reinicie o servidor antes
de usarmos um pacote, pois, embora você possa apenas adicionar um componente aqui, obtendo o estilo certo, o posicionamento correto
para todas as plataformas diferentes, especialmente se você não estiver apenas usando texto aqui, mas também talvez um
ícone que você normalmente queira ter lá, que pode ser realmente complicado e é por isso
que instalaremos um pacote extra que facilitará as coisas assim.
Então, deixe-me reiniciar isso com o npm start, não o npm install, o npm start e com
ele funcionando novamente, vamos recarregar isso aqui no iOS e deixe-me mostrar o que temos aqui agora que eu renderizo um texto.
Você vê este texto
aqui, então isso
está sendo renderizado, mas como eu disse, ter o preenchimento certo, o alinhamento certo, o estilo certo, o tamanho
certo, super irritante se você fizer tudo sozinho, porque não está apenas fazendo isso para um
dispositivo, mas para muitos dispositivos.
É por isso que vamos instalar um pacote especial aqui que nos ajuda com isso.
Portanto, saia do processo por enquanto, execute o processo dev e use o npm
install --save e instale o pacote react-navigation-header-buttons, que é um pacote que ajuda você, surpreendentemente, se você der
uma olhada no nome, na configuração alguns botões no cabeçalho, na
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
com o npm start e agora vou criar um novo componente auxiliar na pasta de componentes, que nomeei auxiliar, um
botão de cabeçalho, não um botão de cabeçalho, e não um auxiliar. Lá, importarei o React do
React porque esse será um componente normal do React que criaremos lá
e importará algo desse novo pacote react-navigation-header-buttons que acabamos de instalar e que
algo que eu importo é o botão do cabeçalho. Além disso, vamos importar também algo do @ expo / vector-icons que deve
estar disponível, mas apenas para ser super seguro, você também pode executar o npm install
--save @ expo / vector-icons para instalar este pacote também porque você ' Precisamos disso e o que
precisamos importar desse pacote são ionicons. Claro, você pode usar qualquer conjunto de
ícones que desejar, eu cobri os ícones no início deste curso e você pode usar qualquer ícone
que desejar no botão do cabeçalho; trabalharei com ionicons porque os uso no restante este
curso também, mas, novamente, você pode usar os ícones que desejar e, é claro, no
cabeçalho, não precisa usar ícones, também pode usar outro texto, mas normalmente, você usa ícones, é claro,
é isso que os usuários normalmente são usados em outros aplicativos.
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
personalizado ou apenas o botão de cabeçalho, o que você quiser, mas já estamos importando, tenho que escolher um
nome diferente aqui para não ter um conflito de nomes e isso
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
extra e é por isso que estou agrupando isso em um componente separado para
que não tenhamos que repetir essa configuração para todos os botões que estamos usando em qualquer
lugar do
aplicativo e, é claro, exportarei meu botão de cabeçalho personalizado padrão.
Então agora este botão de cabeçalho que estou usando aqui neste pacote que instalamos, que receberá todos os adereços
que estamos recebendo com este pequeno truque que podemos usar no React, onde encaminhamos todos os adereços
com este atalho, retirando todos os pares de valores-chave e passá-los para esse objeto que é esse
componente no final.
Então essa é a primeira coisa, precisamos encaminhar todos os adereços e isso
é super
importante, não esqueça disso, caso contrário não funcionará corretamente.
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
estamos obtendo deste pacote espera e lá passo o ionicons. Portanto, isso espera que um pacote
de ícones vetoriais que possa ser usado para renderizar ícones, não precise ser ionicons, mas seja a partir
de @ expo / vector-icons ou do pacote de ícones vetoriais React Native subjacente no qual o pacote
expo se baseia on e você também pode analisar em um tamanho de ícone e padronizarei isso
para que todos os meus botões de cabeçalho em todo o aplicativo tenham o
mesmo tamanho de 23, que achei que funcionava muito bem. Por último, mas não menos importante, também configurarei uma cor aqui
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,
nosso cabeçalho terá a cor principal como plano de fundo, então queremos usar uma cor
de ícone branca.
Então aqui, vou verificar a plataforma. os, se é igual ao Android, quero usar branco aqui e
somente se for iOS, quero usar a cor principal.
Portanto, agora temos o botão de cabeçalho
pré-configurado, agora podemos usá-lo no local, no componente em que queremos adicioná-lo ao nosso cabeçalho e esse
é o MealDetailScreen nesse caso. Agora, precisamos importar outra coisa
do pacote recém-instalado, portanto, a partir dos botões react-navigation-header-buttons, deste
pacote, aqui temos que instalar ou importar os botões do cabeçalho, para não o botão do cabeçalho que
usamos no outro arquivo mas botões de cabeçalho, plural. Adicionamos isso aqui, porque agora lá embaixo,
onde configuramos as opções de navegação para esse componente, em vez de usar nosso componente
de texto, quero usar os botões de cabeçalho, esse componente apenas adicionei
a importação e envolvo isso em torno de outro elemento que temos importar dos botões de cabeçalho
de navegação de reação e esse é o item. Item é outro componente que importamos, que
agora podemos usar entre as tags de abertura e
fechamento dos botões do cabeçalho; portanto, aqui adicionamos item e item é um componente de fechamento automático, onde descrevemos o ícone
que queremos renderizar no final. Também podemos atribuir a ele um título que seria
renderizado como substituto e nomearemos esse favorito, mas normalmente não o
veremos. Em vez disso, também posso configurar um
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
mostrei no início do curso, que você também encontra anexada a este vídeo para obter os possíveis
ícones que você pode usar aqui.
Apenas certifique-se de usar um ícone do conjunto de ícones usado nos botões do cabeçalho,
no meu caso, dos ionicons.
Agora, isso indica qual ícone
usar, agora também podemos adicionar o onPress para registrar uma função que deve ser acionada quando esse
ícone for pressionado ou quando o item no
cabeçalho for pressionado e, por enquanto, vou apenas marcar como favorito aqui, registre isso no console para ver se funcionou.
Ainda não estamos totalmente lá porque não estamos usando nosso botão de
cabeçalho personalizado, essa é a última peça que falta.
Precisamos importar esse componente que criamos,
portanto, importe o botão de cabeçalho dos componentes e, em seguida, do botão de cabeçalho, esse é o botão
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
apontamos para o botão componente que deve ser usado para renderizar esse item no final.
Agora, tudo isso é muito complexo, como você pode ver, muitos componentes aninhados, essa é apenas
uma configuração um pouco complicada na primeira vez em que você faz isso, mas quando você o usa em
outros componentes, trata-se apenas de copiar a mesma configuração aqui, alterando o título, alterando o
ícone e alterando a lógica e você está lá. Portanto, isso é tudo o
que você precisa fazer no futuro; apenas
a configuração inicial é um trabalho extra aqui. Com toda essa configuração, no
entanto, se agora
salvarmos isso, poderemos ver nossa estrela aqui. Este é o ícone que vemos e podemos pressionar
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
e, se eu pressionar essa estrela aqui, também vemos a
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
não relacionado ao botão do cabeçalho, apenas vendo. Então, no MealItem. arquivo js, no item
refeição, na verdade adicionarei uma margem vertical de 10, novamente, totalmente
não é algo que você precisa aqui, apenas para garantir que isso pareça melhor se tivermos vários
itens.
O importante aqui é que temos nosso botão de cabeçalho, este ícone e é assim que você
pode adicionar botões ou itens de ícones aqui ao cabeçalho e, é
claro, você pode adicionar mais de um. Aqui na tela de detalhes da refeição,
você pode ter vários itens entre os botões do cabeçalho aqui, configurados no headerRight nas opções de navegação.
É assim que você
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
um pouco diferente para que possamos ver a diferença aqui, agora
temos dois aqui .
Portanto, isso é possível, é claro que você não deve sobrecarregar isso para que sua interface do usuário permaneça limpa e funcione,
mas é assim que você pode adicionar ícones aqui à sua tela. A propósito, o aviso que estou chegando aqui sobre as teclas duplas, o
título aqui também é usado como uma chave para seus itens. Portanto, se você tiver vários
itens, não use o mesmo título, mas eu o adicionei
apenas para de qualquer forma, para fins de demonstração, então simplesmente me livrarei disso e estamos bem.
Agora, nosso ícone de estrela ainda não faz nada, isso é algo
que adicionaremos mais tarde, mas pelo menos o vemos e isso é realmente importante em um módulo em que
falamos sobre navegação e trabalho com o cabeçalho.