Portanto, certifique-se de que os itens de nossos produtos na tela de visão geral do produto pareçam um
pouco mais agradáveis do que atualmente. Agora, é claro, cada item do produto é processado
apenas como um texto, como um componente de texto e não é isso que eu quero aqui. Em vez disso, removerei essa importação e
criarei um novo componente que deve ser responsável pelo item do meu produto.
Agora, uma observação importante sobre o local onde criamos esse componente, podemos criá-lo aqui na
Visão geral de produtos. js também, é claro que podemos
ter mais de um componente por arquivo, então aqui eu poderia adicionar o componente do item do meu produto ou como você
quiser chamá-lo, assim, então podemos usar esse componente nesse arquivo, o que é claro o que eu pretendo fazer.
Esse é um padrão que você pode usar se tiver um componente realmente fortemente vinculado a outro componente e
estiver apenas dividindo-o para que cada componente seja um pouco mais legível.
Depois que esses componentes separados ficarem muito grandes, você ainda deve dividi-los em arquivos separados, para que seus
arquivos fiquem pequenos e se as pessoas quiserem dar uma olhada em um dos dois componentes,
elas não precisarão rolar o outro componente eles podem não estar interessados.
Portanto, é uma coisa a ter em mente. Obviamente, se você também planeja usar um componente em
outro componente, sempre deve armazená-lo em um arquivo separado, não apenas para exportá-lo como padrão, porque também pode exportá-lo se ele
for armazenado junto com outro componente, esse não é o principal motivo,
mas principalmente para deixar bem claro que este é um componente independente que pode e será usado em diferentes
partes do seu aplicativo.
Agora, o item do produto aqui não será apenas super pequeno, o que, por si só, seria um motivo para colocá-lo
em um arquivo separado, mas também o usarei em um componente diferente posteriormente ou em diferentes
locais do aplicativo, além de ser relevante para a tela de visão geral dos produtos e, portanto, eu o
adicionarei na pasta de componentes e nessa pasta de componentes. Para organizar um pouco meus componentes, adicionarei
uma subpasta de loja na qual desejo colocar todos os componentes diretamente relacionado ao recurso de loja ou
aos recursos em geral do meu aplicativo.
Então, na subpasta da loja, adicionarei este ProductItem. js e você verá quais outras pastas
adicionarei aqui mais tarde.
Agora, novamente, todos esses padrões e práticas que estou mostrando a você aqui são apenas maneiras possíveis de fazer isso;
em geral, nos meus cursos e também neste curso, mostro todas as melhores práticas que você pode usar, mas geralmente na
programação, não há apenas uma maneira certa ou
errada; portanto, as práticas e padrões que mostro aqui são práticas e padrões que você também verá em outros
projetos, mas também poderá ver outras estruturas de pastas. No final, você sempre pode trabalhar com a estrutura
que funciona para você, não há uma escolha certa ou errada aqui, só quero explicar meu raciocínio sobre o uso dessa estrutura que,
espero, ajudará você a entender por que eu a uso e por que vale a pena pensar nisso.
Então, aqui, o arquivo do item do produto, o ProductItem. É claro que o arquivo js conterá o componente do item do produto, que
é um componente funcional normal que recebe adereços e, no final, retornará o código jsx e, portanto,
como ele contém o código jsx, precisamos importar o React do React e aqui, também importe coisas do React Native porque
aqui agora vou trabalhar com essas primitivas do React Native para realmente construir meu componente porque a partir daí, precisarei da visualização, precisarei
do texto, também quero usar a imagem, porque ' mostramos a imagem do produto
aqui e também a folha de estilo, porque definitivamente definiremos isso. Portanto, você também pode adicionar uma constante de estilos aqui,
que criamos com a Folha de estilo. criar para o qual passamos um objeto Javascript
e, no final, exportamos esse item do produto aqui como padrão, é claro. Agora, neste componente, quero dizer, podemos começar a criar o
código jsx que compõe o item do produto e este será um componente de apresentação,
o que significa que não haverá lógica aqui, não gerenciaremos nenhum estado interno, esse será
apenas um componente que podemos usar em outros componentes para obter o estilo e o
layout corretos, assim, este componente aqui será responsável por usar determinados componentes do React Native e
colocá-los e estilizá-los de uma certa maneira. Então, aqui, no final, quero retornar uma
visão que envolva tudo, que organize tudo, que também podemos estilizar para obter esse
visual de carrinho com talvez uma sombra, talvez cantos arredondados, o que você quiser e lá dentro, agora
tem partes diferentes, por exemplo, definitivamente vamos ter a imagem lá, a imagem do produto, eu também quero ter
o título e o preço, então vamos
precisar de algum texto aqui, então, para o título aqui e aqui, então pelo preço em dólares e abaixo disso, também quero ter uma visualização
com botões, para que aqui
possamos usar o componente de botão incorporado no momento, onde possamos adicionar um produto ao carrinho
ou também visualizar os detalhes , então onde temos essas duas opções basicamente e, é claro, precisaremos
adicionar manipuladores onPress aqui. Então esse é o esqueleto básico, provavelmente não
o final, teremos que ver como podemos estilizar tudo aqui, mas esse é o
layout que eu quero.
Apresento meus botões aqui à vista, a propósito, porque quero tê-los lado a lado na linha e,
tendo uma vista ao redor deles, podemos estilizar essa vista de modo que use a linha de direção flexível e
assim por diante.
Portanto,
é uma configuração com a
qual podemos trabalhar aqui, agora vamos
adicionar um pouco de estilo e, para isso, quero
usar ou começar aqui na vista circundante, onde configuro estilos de produtos como este;
portanto, aqui na folha de estilos, adiciono produtos assim,
adicione minha chave do produto aqui e,
claro, agora novamente, é totalmente com você como você deseja estilizar isso, quero ter essa aparência de cartão, portanto, adicionarei uma sombra, cor da sombra
que pode ser preta, uma opacidade da sombra que pode ser 0. 26, um deslocamento de sombra em que tenho o deslocamento de largura de zero e
um deslocamento de altura de dois e um raio de sombra de oito,
talvez e, como sempre, brinque com esses valores para encontrar sua configuração.
Agora você deve se lembrar de que a sombra
só funciona no iOS; portanto, para Android, adicionarei a propriedade elevação aqui e definirei isso para cinco, talvez, novamente,
você pode experimentar diferentes valores também e
quero ter um raio de borda de 10, porque Quero cantos arredondados e
de novo, isso é
algo que quero aqui, algo que você não precisa fazer. Também adicionarei uma cor de fundo em branco para garantir
que nosso carrinho aqui, nosso produto sempre tenha essa cor de fundo, mesmo que nosso aplicativo
principal use uma cor de fundo diferente posteriormente. Então esse é o meu produto, meu invólucro aqui em todo o produto. Além disso, também quero configurar minha altura aqui,
cada produto deve ter uma altura de
300 pixels e, claro, esse é um valor que você também pode ajustar aos
seus requisitos.
É claro que você também pode dinamizar isso com a API de dimensões, como aprendeu
no módulo responsivo, e adicionarei uma margem de 20 em todas as direções ao redor de cada item do produto,
para que tenhamos um espaçamento em todas as direções. Com essa configuração, podemos começar a trabalhar na saída de algo,
para que a imagem precise de uma fonte e teremos uma imagem de rede aqui, porque se
você der uma olhada nos dados fictícios, todos esses URLs de imagem aqui são URLs, é também isso que
no modelo, esperamos
um URL aqui, portanto, para uma imagem de rede e isso seria o padrão para qualquer loja
que você construa, porque você nunca incluirá todas as imagens do produto em seu aplicativo, pelo menos se não houver loja de aplicativos para
um jogo, mas se for uma loja onde
as pessoas possam criar produtos, obviamente as pessoas criarão produtos dinamicamente após a distribuição do aplicativo,
portanto, é impossível incluir todas as imagens no aplicativo, em vez disso, elas devem ser armazenadas em um servidor .
Portanto, aqui, precisamos passar um objeto para a origem onde definimos a propriedade URI e que
agora será recebida de fora porque esse componente do item do produto é de apresentação. Portanto,
qualquer dado a ser exibido precisa ser passado por objetos e lá, nós poderia esperar o suporte de
imagem, mas, como todos os acessórios de
seus próprios componentes, você pode escolher qualquer nome que desejar. Para o título, espero obter um suporte de título e pelo preço, espero
obter um suporte de preço, vou manter o cifrão aqui a propósito, porque o preço será apenas um número e,
é claro, quero ter um cifrão na frente disso.
Agora, uma pequena nota aqui, quero ter certeza de que o preço que recebo sempre tenha exatamente duas casas decimais, e
podemos conseguir isso chamando para corrigir isso e passando duas. Fixar é uma função disponível em números
em Javascript, que converte isso em basicamente uma string com uma quantidade fixa de
casas decimais e aqui restrito a sempre
serem duas
casas decimais, isso é Javascript normal, nada específico para React Native. Agora, quando pressionamos o botão de exibição de detalhes, acionarei adereços na exibição de detalhes,
então uso novamente um nome aqui que você pode configurar ou nomear como desejar, mas a idéia aqui é que
os adereços na exibição apontem para uma função que o final é executado quando
esse botão é pressionado e, portanto, aqui, se esse
botão, o botão do carrinho for pressionado, apontarei para uma função que espero obter no suporte ao add no carrinho.
Novamente,
você pode nomear esses adereços como quiser, mas ao usar seu componente,
é necessário garantir que eles estejam disponíveis e que eles obtenham valores que são funções que são acionadas por esses botões.
Agora estamos recebendo todos os dados. Agora, para a imagem, como
essa é uma imagem de rede, precisamos configurar a largura e a altura, porque a imagem não pode ver isso com antecedência, pois
poderia fazer isso para uma imagem local, não pode fazer
isso para uma rede imagem, então aqui eu vou apontar para estilos. image e adicionarei essa chave de imagem à minha folha de estilo por enquanto.
Novamente, geralmente você decide como estilizar isso, mas eu definirei isso para ter uma largura de, digamos, 60%,
lembre-se de
que o produto geral tem uma largura de 100%, mas uma altura de 60%, porque o produto geral o item aqui tem uma
altura de 300 e eu quero ter a imagem lá, que também deve ocupar a maior parte da
altura, mas também tenho o título, o preço e meus botões, e eles também devem caber
lá, então eu '
darei à imagem 60% da altura para
que as outras coisas aqui possam dividir os 40% restantes entre elas. Então, com isso, essa é a imagem, agora é claro
que a imagem não é tudo o que temos aqui, também temos nosso título, temos
nosso preço e também quero estilizá-lo.
Então, para o título, adicionarei o estilo do título aqui e pelo preço, acrescentarei, digamos, um estilo
de preço e, aqui, para esses botões, também adicionarei um estilo à vista circundante e nomearemos isso ações e, claro,
todos esses nomes de estilo, como sempre, são totalmente com você. Aqui, quero adicionar meu título,
o preço e a propriedade actions à minha folha de estilo, aqui e agora para o título, é claro que
você pode estilizar isso da maneira que desejar.
Não temos fontes personalizadas aqui, adicionarei
algumas em breve, mas, no momento, ignorarei isso e começarei
com um tamanho de fonte 18 e quero adicionar uma margem vertical, de modo que a parte superior e inferior
de 3 ou 4, uma margem muito pequena, mas ainda uma margem em torno deste título. Pelo preço, definirei um tamanho de fonte 14
para um pouco menor e também darei uma cor que talvez seja 888, que é
como uma cor cinza acinzentada escura.
Agora, ações são colocadas nessa exibição que contém os botões e, portanto, quero garantir que o botão
fique próximo um do outro, em uma linha.
Então, eu darei a isso uma direção flexível da linha aqui e também justificarei o conteúdo para ter todo o espaço restante entre eles. Além
disso, quero alinhar os itens no centro verticalmente, de modo que ao longo do eixo transversal, que, para uma
direção flexível, da linha é o eixo vertical.
Com isso, temos um estilo básico, agora
vamos usar esse componente antes de refinar a configuração e o estilo. Portanto, o componente do item do produto que
exportamos aqui no arquivo do item do produto agora pode ser usado no arquivo de
visão geral do produto importando o item
do produto a partir daí, vamos apontar para a pasta de componentes, para a subpasta da loja e depois para
o item do produto e agora é isso que eu quero usar aqui quando renderizar meus itens.
O item do produto pode ser um componente de fechamento automático porque todos os dados são recebidos por meio de adereços
e não entre as tags de abertura e fechamento,
agora é claro que precisamos configurar tudo o que esperamos aqui.
Esperamos uma imagem, o título, o preço e nossos dois itens de manipulação de eventos aqui, então
é isso que precisamos fornecer agora.
Portanto, aqui no item do produto,
começarei com a imagem e, claro, é itemData. item. imageUrl e você
sempre deve se lembrar desse itemData. item aponta como um produto, conforme definido em nosso modelo de produto e,
portanto, ele terá uma propriedade imageUrl escrita assim, se você a escrever
de maneira diferente, é claro que precisará acessá-la de forma diferente. Além da imagem, também teremos um
título que é itemData. item. title e, além disso, teremos o preço com
itemData. item. price
e, em seguida, temos nossos dois manipuladores de eventos aqui, porque temos o prop de exibição on detail e
o on add to cart prop que precisamos adicionar. Portanto, ao ver os detalhes, algo será feito mais tarde, por enquanto
é apenas uma função vazia e, ao adicionar ao carrinho, também será
feito mais tarde, por agora também pode ser
uma função vazia, é assim que o item do produto deve ser renderizado. Com isso, se salvarmos isso, é isso
que você deve ver, ainda não é perfeito, mas
estamos chegando lá, na verdade não é tão ruim assim.
Agora, é claro, o que você percebe é que os botões estão coloridos da maneira errada, que esse
espaço não é realmente usado da maneira que deve ser usado lá embaixo, que talvez também
desejemos centralizar esse texto, mas essas são coisas obviamente nós podemos trabalhar. Então, para refinar isso, de volta ao componente de item do produto aqui,
vamos começar com nossos dois textos aqui.
É claro que eles devem estar centralizados e isso pode ser feito de uma maneira muito simples, envolvendo isso
em uma visualização, movendo esses dois textos para lá, dando um estilo a essa visualização e, é claro,
você pode nomear isso
da maneira que quiser, eu irei nomear detalha porque meio que fazemos o layout
dos detalhes do produto lá, então adicionarei meu estilo de detalhes aqui à folha de estilo e lá, definirei apenas o alinhamento dos itens.
Isso usa uma direção flexível da coluna, o padrão e, portanto, centra-se no eixo transversal, sempre faz isso, mas o eixo
transversal da coluna de direção flexível é obviamente da esquerda para
a direita, então centraliza horizontalmente o que é o que eu quero aqui e eu ' Isso também dará uma altura de 15%.
Lembre-se de que a imagem leva 60%, então nós damos isso
a talvez 15%, então quase metade dos 40% restantes, não a metade E
eu adicionarei um pouco de preenchimento aqui de 10 talvez.
E para os botões aqui, estes estão na minha propriedade de ações, lá eu quero
definir a altura para os 25% restantes, isso deve ser
uma seqüência de curso, porque temos 60% aqui de altura,
então temos 15%
aqui, daqui aqui Quero manter os 25% restantes e, se agora salvarmos isso, isso parecerá muito melhor.
Agora, algum preenchimento à esquerda e à direita também seria bom
para os botões; portanto, nesta propriedade de estilo de ações, adicionarei talvez um preenchimento horizontal de 20, para que tenhamos algum espaçamento interno
à esquerda ou à direita. Agora, para alterar a
cor dos botões, podemos simplesmente acessar os componentes dos botões incorporados ao
React Native e definir
o suporte de cores aqui para as cores que, portanto, você precisa importar da pasta
de constantes
e do arquivo de cores e definir isso depois para cores primárias, também aqui para a segunda cor, o botão adicionar ao carrinho, o segundo botão, portanto.
Agora, agora temos nossos
botões aqui, adicione ao carrinho e veja os detalhes e isso não parece muito ruim.
A única coisa que você pode notar é que não temos cantos arredondados aqui no
topo e a razão disso é que nossa imagem é basicamente como uma sobreposição ao fundo e o fundo é
a vista ao
redor, a imagem não tem cantos arredondados e, portanto, se sobrepõe aos cantos
arredondados que temos na vista circundante. Para corrigir isso, podemos agrupar
a imagem em uma visualização separada e, como mencionei anteriormente, é
realmente normal no React Native ter algumas visualizações aninhadas, pois, para essa
visualização, agora podemos anexar um estilo que talvez possamos forneça um identificador de contêiner de imagem que agora podemos adicionar à nossa folha de
estilo e agora darei a esse contêiner minha largura e altura aqui e na imagem; portanto, adicionarei uma largura
e altura de 100% porque agora está dentro de o contêiner,
isso aqui
se refere ao pai, portanto,
a este contêiner,
então uma altura de 60% também será aplicada à
imagem, mas nesse contêiner de imagem, agora podemos adicionar
um raio superior esquerdo da borda de 10 e um limite superior da borda raio
certo de 10 para que
contornemos esses cantos e agora seja importante, adicione um excesso oculto aqui, pois isso garantirá que qualquer criança lá
dentro, que é nossa imagem, é claro, não possa se sobrepor ao que montamos aqui.
Portanto, agora com essa configuração, adicionamos nossos cantos arredondados aqui de volta ao topo e agora
esses são os itens de imagem que eu quero aqui e, claro, essa também é uma lista rolável,
na qual você também vê que essas imagens são carregadas com preguiça automaticamente, e você pode continuar trabalhando com.
Obviamente, o próximo objetivo pode ser que também possamos visualizar a tela de detalhes.