Para os itens do carrinho.
Agora, novamente, criarei um componente separado para cada item do carrinho
que desejo gerar aqui.
Eu poderia fazê-lo aqui, mas, novamente, será um componente um pouco mais longo e não quero inchar esse arquivo com ele
e, na verdade, também o utilizarei em outro lugar mais tarde, o que pode parecer
estranho, pois temos apenas uma tela de carrinho, mas você verá onde mais podemos usar
um item de carrinho mais tarde.
Então, para isso, vamos voltar na pasta de componentes e lá na pasta de compras, talvez,
e adicionar um CartItem. arquivo js ao lado do item do produto.
Agora é claro que temos um componente React normal, então você conhece o jogo,
como eles são criados.
Importamos o React do React e, em seguida, aqui, como esse é o componente que deve gerar algo,
importaremos vários componentes do React Native, os principais primitivos com os quais criamos a interface do usuário.
Vou precisar de uma visualização, preciso de um texto, preciso de uma folha de estilo aqui, com certeza, e depois adicionarei minha constante aqui, item
de carrinho que recebe adereços e, no final, aqui retornamos algum código jsx. Vou adicionar meu objeto de estilos aqui
com a criação da
folha de estilo e exportá-lo como um item de carrinho padrão.
Agora, o código jsx que deve ser retornado aqui, é claro, depende sempre de você, mas terei
uma visão aqui e, nessa visão, desejo exibir a quantidade e o título do curso, além do valor total desse item
do carrinho, caso adicionamos mais de um, então esse não é apenas o preço de um único item,
mas é claro que o preço é a quantidade e, na verdade, também quero ter um botão que
permita excluir esse item do carrinho,
um ícone da lixeira.
Então, no final, eu vou ter uma linha aqui com um texto e esse texto terá a quantidade e o título, então
lá eu terei a quantidade e o título e, na verdade, isso deve ser estilizado de maneira diferente, então eu vou envolver o
quantidade aqui em um nó de texto separado e faça o mesmo para o título, para
que eu tenha dois nós de texto separados aqui no final e, depois desse bloco de texto aqui, deve haver uma visão para agrupar outros dois elementos,
outro pedaço de texto que é a quantia total desse item aqui; portanto, quantia e
ao lado disso, um botão ou na verdade não um botão, mas na verdade um ícone pressionável.
Então, eu vou construir minha própria coisa tocável com opacidade palpável e, é claro,
você pode novamente fazer a diferenciação dessa plataforma para o efeito cascata, mas eu irei com
opacidade nas duas plataformas aqui e importarei Ionicons de @ expo / vector-icons que já adicionamos anteriormente porque eu
quero ter
apenas um ícone aqui que possamos pressionar, então aqui eu quero ter uma opacidade
palpável e envolvê-lo em torno de um ícone que possamos adicionar com Ionicons, como você adicionou anteriormente neste
curso, com isso como um componente aqui e, em seguida, basta usar um nome que deve diferir
de acordo com a plataforma, porque o nome é o identificador do ícone e lá podemos
verificar o SO da plataforma e, se for o Android, o ícone que deve ser usado terá o nome de md trash caso contrário, será a lixeira do iOS
que renderiza um bom ícone de lixeira e também podemos dar a esse ícone um tamanho de, digamos, 23, que novamente
deve ficar bem bonito e colorido e aqui, eu vou usar o vermelho porque está removendo isso item
por isso deve ter como um warni ng cor eu diria. A opacidade tocável quando pressionada deve fazer alguma coisa e deve encaminhar o
evento press para o componente
que usa o componente do item do carrinho, por isso espero obter um objeto de remoção, esse nome,
como sempre, depende de você, que possui uma função que está no fim executado então e também podemos adicionar um estilo aqui, estilo muito simples, onde aponto o botão excluir, por exemplo, e
essa é uma declaração de estilo que podemos adicionar posteriormente.
Falando em estilos, é claro que há
mais estilos a serem adicionados, por exemplo, na vista superior aqui, darei a
ele um estilo de item de carrinho, esse
texto aqui receberá
um estilo de dados de item. Este texto com a quantidade pode receber um estilo que podemos nomear estilos. quantidade, novamente todos esses identificadores
de estilo, como sempre, dependem totalmente de você.
Aqui no título, eu tenho um
estilo de título e, em seguida, aqui nesta exibição, adicionarei um estilo de dados do item novamente, então reutilizarei esse estilo porque quero ter
o mesmo configurado aqui e esse valor aqui será também obter um estilo de quantidade. Então, um monte de estilos para adicionar, vamos para a folha de estilo
e,
aí, adicionar o item do carrinho,
que é nosso estilo raiz, dados e quantidade de
itens, quantidade de dados do item
e, em seguida,
quantidade de
dados do item, o título aqui e a quantidade e por último, mas não a quantidade. pelo menos, o botão excluir.
Então isso também é algo que precisamos adicionar aqui. Agora, no botão excluir, é simples, vou
adicionar
uma margem à esquerda de 20 para ter algum espaçamento entre o ícone e o texto que fica ao lado dele e,
com isso, vamos ao item do carrinho.
Lá, eu quero ter um preenchimento de 10, uma cor de fundo branca, não vou usar
meu cartão aqui, não vou adicionar sombra aqui, você pode fazer isso, mas prefiro um visual
diferente.
Importante é a linha de direção flexível, para que todos os itens dessa visualização, portanto, este
texto e essa visualização estejam próximos um do outro na mesma linha. Justificar o conteúdo deve ter espaço entre todos
os espaços vazios entre esses dois blocos de conteúdo e também adicionarei uma margem na direção horizontal de 20 para
que haja algum espaçamento
à esquerda e à direita em torno dos itens do carrinho.
Agora, os dados do item, é o estilo que estamos repetindo em torno da quantidade, título e
quantidade e o botão excluir, os dados do item devem ter uma linha de direção flexível para garantir que os itens estejam posicionados em uma linha e
definirei alinhar itens aqui para centralize para centralizar todo o conteúdo verticalmente. Agora, para a quantidade aqui, quero definir uma família de fontes
open-sans, a propósito, também podemos usar uma visualização aqui em vez de um texto em torno desses dois nós de texto, porque não estou definindo
nenhum estilo específico de texto aqui , então vamos ver, mas com
isso, voltar para a quantidade. Podemos atribuir a isso uma
família de fontes open-sans, uma cor talvez dessa cor cinza acinzentada que usamos anteriormente para
preços, agora para a quantidade e tamanho da fonte 16 e talvez
aqui e aqui para o título, definirei um família de fontes open sans bold para torná-lo em
negrito, forneça um tamanho de fonte de 16 também e, no valor aqui, farei exatamente a mesma coisa.
Portanto, é claro que também poderíamos mesclar isso em um e no mesmo estilo, talvez nomear esse texto principal ou
algo assim,
livrar-se da quantidade, pois temos as mesmas definições de estilo e agora usar o texto principal aqui em
vez de título e aqui de quantidade.
OK.
Este é um
item do carrinho, agora vamos usá-lo
na tela do carrinho com a ajuda
de uma lista simples, porque no momento não estamos produzindo nenhum item na tela do carrinho.
Portanto, essa visualização aqui pode ser substituída por uma lista
simples agora e os dados em que estamos inseridos devem ter uma matriz de itens do carrinho e é exatamente isso que
temos aqui na constante dos
itens do carrinho, então vamos usá-lo aqui.
Agora,
aqui também adicionarei um extrator de chaves e aqui você definitivamente precisará adicioná-lo para que o React Native
saiba onde sua chave pode ser encontrada, pois cada item aqui no final é desse formato e não possui
chave nem ID, mas sabemos que o ID do produto pode ser usado como uma chave, pois será
exclusivo para cada item.
Então, aqui, aponto para o item. productId no final e agora
para renderizar item, quero usar esse carrinho que acabamos de adicionar.
Portanto, aqui, precisamos importar o item do carrinho da pasta de componentes, a pasta da loja e, o item do carrinho e, em seguida, usar
esse componente do item do carrinho em nossa função de renderização, onde obtemos os dados do item
no final e depois retornamos nossa item do carrinho como este e agora no item do carrinho, precisamos passar alguns
dados, certo? No item
do carrinho, no momento eu tenho espaços reservados fictícios, é claro que aqui espero obter minha quantidade, digamos,
em um suporte denominado quantidade, espero obter meu título em talvez um suporte denominado title e o valor em um suporte nomeado lá,
chamarei de fixo para 2 para garantir que sempre tenhamos duas casas decimais lá e também tenhamos
o prop on remove que esperamos certo.
Então, temos quantidade, título, quantidade e remoção, então, de volta à tela do carrinho, é
isso que precisamos adicionar, a quantidade é, obviamente, itemData. item. quantidade porque um único
item aqui é, naturalmente, esse item e, portanto, teremos
uma quantidade mantida e, além da quantidade, temos que passar o título, a quantidade e
a remoção.
Portanto, o título é obviamente itemData. item. produtos. title, esse é o nome
que escolhi lá, pelo valor que podemos passar em itemData. item. se dermos uma olhada em
como definimos nossos dados, isso seria a soma, esse é o valor de um item, independentemente da quantidade
que temos lá ou respeitando a quantidade que realmente temos.
E, por último, mas não menos importante, ao remover, devemos apontar para uma função e, no momento, não temos lógica para isso, então vou apontar para
uma função
vazia e agora esse é um item do carrinho que desejo renderizar isto.
Vamos tentar. Vamos adicionar duas camisas vermelhas e um tapete azul, ir ao carrinho e agora eu
tenho as seqüências de texto devem ser renderizadas dentro de um componente de texto e ele está apontando para o item do
carrinho, linha 14, então vamos dar uma
olhada nisso, sim, é aqui que meu IDE adicionou automaticamente, esse espaço em branco que quero ter aqui depois
da minha quantidade. Eu realmente quero ter isso
aqui, então adicionarei um espaço em branco extra aqui antes de fechar meu texto. Agora com isso, vamos tentar novamente, duas
camisas vermelhas, um tapete azul.
Veja a quantia
aqui, veja o título aqui,
veja a soma e, claro, isso também soma essa soma total.
Agora é hora de fazer esse botão de exclusão funcionar.