Para adicionar o item de ação ao cabeçalho, farei algo que fiz também na seção de navegação, na pasta
de componentes, desejo adicionar meu
próprio botão de cabeçalho e, agora,
adicionarei uma nova subpasta em lá que eu vou nomear interface do usuário e minha idéia aqui é simples.
Eu tenho a pasta da loja que contém todos os componentes que eu uso na minha
loja, que produzem algumas informações relacionadas à loja. Na pasta UI, quero ter alguns blocos
de construção gerais da interface do usuário que, é claro, também uso neste
aplicativo de loja, mas que não estão realmente focados na saída de dados relacionados à loja
ou ao produto, mas que simplesmente existem para fornecer estilo ou layout padrão. nesta pasta da interface do usuário em que adicionarei meu próprio
botão de cabeçalho, importando o React do React e importando o botão do cabeçalho dos botões do cabeçalho de navegação do React,
este pacote que eu instalei no início do módulo, se você não tiver feito isso , certifique-se de instalar o
npm neste pacote e também importe Ionicons do @ expo / vector-icons.
Agora, para ter certeza absoluta de que você o tem instalado, execute o npm install --save @ expo / vector-icons, para que
este pacote esteja disponível no seu projeto.
Essas são as importações que eu
preciso aqui, agora também quero importar minhas cores da pasta constantes e aí, as cores. arquivo js e agora aqui, adicionarei meu componente de
botão de cabeçalho personalizado, que é um componente React normal no final que recebe adereços e precisa retornar algum
jsx e, é claro, exportarei meu botão de cabeçalho personalizado aqui no final e agora o jsx retornado
aqui é o botão do cabeçalho que estou importando dos botões do cabeçalho do React
Navigation, mas preciso configurá-lo de uma certa maneira. Use o botão do cabeçalho aqui dos botões
do cabeçalho do React Navigation. Por um lado, ele deve receber todos os
adereços que obtemos aqui, então apenas os encaminhamos, mas além disso, definirei meu componente de ícones
aqui como Ionicons, para que sempre usemos Ionicons para renderizar
isso e, claro, você poderia usar um dos os diferentes conjuntos de ícones vetoriais fornecidos pelo @ expo / vector-icons também.
Definirei o tamanho do ícone como 23, que achei muito bom, mas é claro que você também pode experimentar
valores diferentes aqui, talvez também se estiver
usando um conjunto de ícones diferente, experimente um tamanho de ícone diferente. E para a cor, depende de tudo, porque no
Android temos um
fundo vermelho aqui, no iOS não temos, então precisamos definir uma cor diferente com
base na plataforma em que estamos rodando, então eu
vou na verdade, importe a plataforma do React Native aqui e, em seguida, podemos verificar a plataforma aqui e, se a versão do
sistema operacional for Android, sei
que tenho esse plano de fundo de campo
sólido; portanto, o ícone deve estar branco. Por outro lado, no iOS, o fundo não é
preenchido, é transparente e, portanto, no iOS, definirei minha cor do ícone como Cores. primário.
Agora podemos usar isso para adicionar um ícone aqui na tela de visão geral dos produtos, nas minhas opções
de
navegação aqui, quero adicionar minha seção de cabeçalho à direita, portanto, um ícone à direita do meu cabeçalho e para
isso aqui, precisamos importar algumas coisas, precisamos importar botões e itens do cabeçalho do pacote React
navigation header buttons que instalamos.
É claro que também preciso importar meu próprio botão de cabeçalho dos botões de cabeçalho da interface do usuário dos componentes. Portanto, neste
componente em que trabalhamos e agora lá embaixo, o cabeçalho à direita é um botão de cabeçalho como um invólucro para possivelmente ter vários itens, mas
vou adicionar apenas um item, um elemento de fechamento automático, nos botões do cabeçalho antes de continuarmos com
o item, precisamos definir o componente do botão do cabeçalho igual ao botão do cabeçalho, portanto, para
o nosso próprio botão de cabeçalho aqui. E o item agora pode ser configurado, ele deve receber um título
que
pode ser carrinho, ele deve receber um nome de ícone e, na verdade, eu quero usar um ícone
diferente com base na plataforma em que estamos executando, portanto, a partir de React Native, I vai importar a plataforma, isso é opcional,
você pode usar o mesmo ícone para ambas as plataformas, mas acho que também parece bom ter ícones diferentes.
E aqui, vou verificar o SO da plataforma e, se for Android, quero usar o ícone md cart, que é o ícone do carrinho Ionicon para design
de materiais, caso contrário, usarei o ícone do carrinho iOS e, novamente, você encontrará todos os disponíveis ícones nesta lista de
ícones que mostrei no início do curso, a
lista de ícones expo / vector-icon e por último, mas não menos importante, quando o item é pressionado, provavelmente queremos
fazer alguma coisa e, por enquanto, não faço nada além de nós. vou mudar isso em breve.
Se agora salvarmos isso,
veremos
este ícone aqui, aqui
está, aqui está nosso carrinho, também no Android e agora apenas precisamos garantir que, quando tocamos
nele, somos levados para a tela do carrinho. Para isso, é claro, temos que adicionar alguma lógica ou alguma saída à tela do carrinho.
Portanto, dentro da tela do carrinho, é claro
que temos um componente React
normal, por isso importamos o React do React, também importamos algo do React Native e que algo é um componente de exibição
para envolver nossa tela, talvez, provavelmente produzimos algum texto também.
Vamos listar alguns itens do carrinho, o que podemos fazer com uma lista
simples para ter a otimização integrada, provavelmente queremos estilizar algumas coisas com uma folha de
estilo e também importarei o componente do botão interno. Agora, a tela do meu carrinho aqui, como sempre, é um componente React e eu configurarei esse
objeto de estilos aqui com a Folha de estilo. crie para que possamos estilizar esse componente
também e, no final, exportamos nossa tela de carrinho aqui como padrão.
Agora, é claro que você pode construir essa tela do carrinho da maneira que desejar, eu
a construirei para ter uma visão e, nessa visão, quero ter duas seções principais. A seção superior é como o resumo em
que vejo o valor total e onde tenho o botão "Encomendar agora".
Isso estará em uma linha, então terei uma visualização aninhada aqui, onde posso posicionar itens
próximos um do outro, onde tenho um texto em
que digo total e depois aqui cifrão e talvez meu preço total. Também podemos aninhar isso, você pode ter componentes de
texto aninhados, se você se lembrar, sem problemas, de dar a ela uma cor separada, por exemplo, então,
por enquanto, eu codifico 19. 99 lá, mas mais tarde isso será derivado dinamicamente.
Então isso
é uma coisa e, além disso, nessa mesma linha, quero ter um botão com um título de
pedido agora, onde posso pressioná-lo para fazer um pedido, limpar meu carrinho e adicioná-lo aos
meus pedidos que ainda precisamos
gerenciar e envie-o na tela de pedidos no final. Agora, abaixo desta seção de resumo, quero ter uma lista simples com meus itens de carrinho separados, para que
possamos realmente ver o que está
no carrinho, quais produtos estão lá, quanto de cada produto está lá, então
isso é outra coisa que eu vai sair lá. No momento, adicionarei uma visualização com um
texto dos itens do carrinho como espaço reservado, mas novamente, essa será uma lista simples
no futuro, mas vamos começar com o total aqui. Para obter esse total, podemos acessar o Redux
porque lá estamos gerenciando nosso carrinho, para que possamos usar o seletor de React Redux conforme você aprendeu a obter dados
de nossa loja e aqui, eu tenho o valor total do meu carrinho, talvez o que eu recebo
com a ajuda do seletor de uso do meu estado. carrinho, fatia. carrinho aqui, porque
no aplicativo. js em redutores combinados, designei uma chave de carrinho aqui para o redutor de carrinho.
Então aqui estou eu. carrinho e depois lá, dentro do
redutor do carrinho, eu gerencio minha quantidade total e o campo de quantidade total, então é isso que precisamos acessar aqui, quantidade total.
Isso fornece uma quantidade total ao carrinho e agora podemos usá-lo lá e com
isso para garantir que isso também pareça bom, é hora de estilizar.
Então, na vista superior aqui, adicionarei um estilo de tela, talvez porque isso envolva a
tela inteira
no final; então, nessa exibição, adicionarei um estilo de resumo, porque contém todos os
itens de resumo, e aqui neste texto,
adicionarei um estilo de texto de resumo e, em seguida, aqui, adicionarei um estilo de quantidade, para que possamos estilizar esse texto de maneira diferente.
Então, para os
estilos que eu quero definir, vamos até a folha de estilo e adicionar tela, resumo, texto de resumo e, também, como o nomeei?
quantidade e, claro, é sempre sempre com você como você deseja estilizar isso.
Agora vou começar com a tela, no final, quero tirar o tamanho máximo da tela, se precisarmos com
a lista simples mais tarde, mas vou começar simples e diremos apenas que quero ter uma margem em todas direções realmente aqui de 20,
então em torno de tudo, para que haja algum espaço em torno de tudo. Em seguida, aqui, resuma qual é a nossa caixa com todos os
itens lá com o pedido agora e nosso texto deve usar uma direção flexível da
linha para posicionar os itens em uma linha.
Fui alinhar itens no centro para garantir que eles fiquem centralizados verticalmente e em seu eixo
principal. Quero justificar o espaço do conteúdo entre eles para que os itens tenham espaço livre entre eles e os itens
sejam este texto aqui e este botão. Além disso, podemos adicionar um pouco de margem aqui,
talvez também 20,
o que é importante também para ter algum espaçamento entre o resumo e nossa lista simples, portanto,
na verdade, usarei o fundo da margem aqui para ter apenas alguma margem para o bottom e quero adicionar um preenchimento
de 10 aqui, porque o resumo deve estar em uma caixa elevada e, para
essa caixa aqui, irei ao componente do item de produto e copio minha sombra configurada aqui e na borda raio talvez eu tenha aqui e a cor do plano
de fundo, para que eu tenha a mesma aparência aqui no carrinho e é claro que depende de
você se você quer ou não, mas eu copio isso lá.
Para o texto de resumo, agora quero usar uma família de fontes open sans bold para realmente destacar esse total e um
tamanho de fonte 18 e, para a quantidade de texto, definirei a
cor como cores. cor de destaque.
Agora, para o que é importante, é claro, você precisa importar cores da pasta constantes e, em seguida, uso
sotaque e não primário para realmente destacar isso. Para ver se isso parece com o que queremos, precisamos
ter certeza de que tocar nesse botão de cabeçalho na tela de visão geral do produto
nos leva à tela do carrinho e, para isso, são necessárias duas coisas.
Por um lado, precisamos navegar aqui, mas antes que possamos fazer isso,
precisamos registrar a tela do carrinho em nosso navegador. Então, eu vou fazer isso primeiro, importarei minha tela do carrinho aqui da
pasta de telas sem surpresa, da pasta da loja e da tela do carrinho e agora essa é a terceira tela que eu
adiciono aqui a este navegador de pilha, pontos do carrinho na tela do carrinho . Com essa configuração adicionada aqui, podemos voltar à tela de visão
geral do produto e, agora, precisamos desse formulário funcional para as opções de navegação, porque os dados de
navegação nos permitem acessar o suporte de navegação e chamar a navegação,
portanto, precisamos agrupar isso em outro objeto que
retornamos e então aqui podemos chamar navData. navegação. navegar e lá, eu vou ao carrinho e,
é claro, esse é o identificador que escolhi no navegador da
loja aqui, este. Com isso, vamos ver, se
eu clicar aqui, aqui estamos, esse é
o
meu total. Na
verdade, acho que a cor do destaque não é tão
boa lá, então voltarei à tela do carrinho e o estilizarei para usar o cor primária também, mas o
principal é que podemos ir lá e se agora tentar adicionar itens ao carrinho, adicionei a camisa duas vezes
e o tapete uma vez, esse valor total me parece bom. Vamos também tentar isso no Android, é claro, para garantir que
funcione lá também e geralmente funcione, eu adiciono mais uma camisa vermelha e, portanto, aqui também vemos um
problema com a maneira como isso é exibido. Para corrigir isso, na tela do carrinho, verifique se, no
preço, sempre produzimos apenas duas casas decimais no valor com também fixo. Agora, a propósito, caso você esteja se perguntando de
onde isso veio, esse número longo,
isso não é um bug ou nada realmente para React Native, esse é um comportamento
Javascript normal quando você está trabalhando com números de ponto flutuante e, é claro, para corrigir não deve ser chamado no
estilo aqui, mas no valor total do carrinho. Portanto, esse era um comportamento normal,
não um bug. É assim que o Javascript armazena internamente números de ponto flutuante, mas
agora garantimos que o resultado seja gerado corretamente com duas casas decimais. O que falta é o botão e aqui agora eu realmente quero usar cores, cores acentuadas
para que meu botão seja colorido com destaque. Então, se agora eu vou ao meu carrinho aqui no iOS, é assim
que o botão fica lá, agora é assim no Android.
Sempre podemos pressionar isso, é claro que eu quero desativá-lo, mas se não houver nada no
carrinho e para isso, agora precisamos também obter os itens do carrinho. Assim, os itens do carrinho também podem ser buscados com o seletor de
uso, também da fatia do carrinho, mas lá estão os itens propostos no redutor do carrinho em que estamos interessados.
Então, se eu der uma olhada no redutor do carrinho, você verá que temos a propriedade items.
Este é um objeto que estou
recuperando agora; portanto, os itens do carrinho são um objeto, não uma matriz. Na verdade, uma matriz seria melhor para mim aqui e, portanto, usarei o
formulário longo para obter isso e retornarei uma matriz aqui e não um objeto. Assim, podemos obter nossos itens de carrinho transformados aqui,
por exemplo, criando uma nova matriz aqui dentro dessa função seletora e, em seguida, podemos adicionar um loop for / in para passar por
todas as chaves no estado. carrinho. itens, para percorrer todos os
pares de valores-chave neste objeto de itens
de carrinho que temos lá e quero adicionar cada um
deles como um item aos itens de carrinho transformados. Então, pressionarei um objeto Javascript que possui um ID do produto, digamos que é
apenas a minha chave, porque no objeto de itens do carrinho de ID, o ID do produto é armazenado como
uma chave, se
você se lembra, então agora eu o adiciono à propriedade ID do produto neste objeto, adiciono à matriz de itens de carrinho transformados
e, além disso, terei o título do meu produto, que é obviamente o estado. carrinho. itens para a chave
fornecida. productTitle.
Se você der uma olhada no modelo do item do carrinho, verá que, título do produto e preço do produto são
os nomes das propriedades que mantêm o título e o
preço do produto. É assim que
acessamos os dois, então eu farei o mesmo aqui pelo preço do produto e, posteriormente, também preciso da
quantidade que é estado. carrinho. itens para a chave fornecida. quantidade e, claro, também a soma que é estado. carrinho. Itens. chave. soma, novamente, basicamente, exatamente o que tínhamos aqui no item do carrinho.
Então, o que estou fazendo é dizer
que estou criando um novo item de carrinho, mas não com o meu modelo porque
é um item de carrinho com uma propriedade de ID de produto adicional, para que eu tenha isso aqui e agora é essa matriz
de itens de carrinho transformados que retorno depois disso para o loop for, para que esse seletor no final retorne uma
matriz e não um
objeto, de modo que os itens do carrinho sejam agora uma matriz que facilita o uso na lista simples e também
permite verificar aqui no botão fazer pedido agora, se queremos desativá-lo, basta verificar o comprimento dessa matriz que temos
agora nos itens do carrinho.
Então, aqui no botão, podemos
definir o suporte de desativação que ele suporta, felizmente, este é um componente interno que simplesmente possui um suporte desativado e lá
posso verificar se o comprimento dos itens do carrinho é igual a zero, se for, então eu sei que está vazio e, na verdade, quero desativar o botão. Portanto, desativado recebe verdadeiro ou falso, por padrão é falso, mas eu o configurarei como verdadeiro se o comprimento
dos itens do carrinho for 0. E agora você vê se eu vou
para a tela do carrinho, isso está desativado. Se eu
adicionar um produto e for para lá, ele está ativado e, é claro, você também pode usar uma cor diferente para o botão "Encomendar agora", se quiser.
Agora, com isso, estamos um passo mais perto
dos carrinhos acabados e, claro, o próximo objetivo é produzir os itens do carrinho.