Então, vamos trabalhar na tela de pedidos agora e produzir mais do que apenas esse texto chato.
Agora, assim como na tela do carrinho e na tela de visão geral dos produtos, quero um item de pedido
mais complexo e, portanto, criarei um componente de item de pedido separado na pasta de componentes e na pasta de compras.
Como sempre, você decide se também
faz isso, mas como esse não será um componente super pequeno, prefiro tê-lo em um arquivo separado.
Então, importarei o React do React aqui e, sem surpresa, é claro que importo várias coisas do React
Native e essa seria a exibição, o texto, a folha de estilo, já que certamente definiremos alguns estilos e
também um botão, porque eu também deseja poder expandir um pedido para que nem sempre vejamos todos os itens que fazem
parte do pedido, mas que possamos visualizá-los, se quisermos. Agora, com isso, podemos criar nosso item de pedido constante aqui,
para que seja o próprio componente que recebe adereços e, no final, tenha seu corpo aqui e retorne algum código jsx
e precisamos de um objeto de estilos aqui com a Folha de estilo. crie assim e também
exporte o item do pedido como padrão.
Agora, como deve ser um item de pedido?
Agora, como sempre, depende de você, mas trabalharei com uma visualização aqui, e minha ideia é que eu sempre mostre o valor
total desse pedido e a data e, em seguida, um botão de detalhes do programa que possamos pressionar para exibir os
itens individuais que fazem parte do pedido e, para esses itens, na verdade usarei o componente de
carrinho aqui, pois quero renderizar exatamente os mesmos itens exibidos em um carrinho.
Então, na verdade, vou importar o item do carrinho do componente do item do carrinho e reutilizá-lo aqui.
Agora, voltando ao código jsx, temos
uma visão de agrupamento em torno de todo o objeto do pedido, de toda a entrada do pedido aqui.
Agora, quero ter uma primeira linha e, portanto, usarei outra visualização para
que possamos estilizar isso adequadamente, que deve conter algum texto que mostre nosso total, portanto, a soma dessa ordem, digamos,
e outro texto onde mostro a data e isso devem estar na mesma linha com espaço entre eles.
Abaixo deles, como mencionei, deve haver um botão que podemos pressionar para mostrar os detalhes, que mostram todos os
itens que fazem parte desse pedido. Agora, com essa configuração, é
claro que fica claro que o valor aqui deve ser recebido com a ajuda de adereços.
Portanto, espero obter um valor prop e chamarei o 2 fixo para gerar a quantidade apropriada de
casas decimais. Agora, para a
data, quero exibir a data de adereços aqui para que tenhamos uma data que possamos gerar. Para o estilo, no geral, aqui eu quero ter uma atribuição
de estilo de item do pedido para que possamos estilizar o pedido inteiro e, em seguida, precisamos
digitar o resumo dos estilos para que possamos estilizar esta linha
e o texto aqui, isso deve ter um estilo de, digamos, valor total, como sempre esses identificadores de estilo são com você,
aqui eu
quero ter um estilo de data.
O botão também deve ter a sua própria cor, obtida das constantes de cores; portanto, essa importação precisa
ser adicionada e
lá, usarei minha cor principal. Ok, então é isso, por
enquanto, voltarei
aos detalhes em um segundo,
agora vamos aplicar alguns estilos aqui para que possamos ver alguma coisa. Para o próprio item do pedido, reutilizarei novamente a aparência
do carrinho que já tenho no item do produto; portanto, copio todas essas configurações aqui do item do produto e as
movo para o item do pedido para que uma sombra seja aplicada
, uma cor de plano de fundo, um raio da borda, tudo isso deve ser aplicado.
Além disso, adicionarei uma margem de 20 em todas as direções para que cada item do pedido tenha espaçamento em torno dele.
Dentro do item do pedido, também quero ter um preenchimento de 10 para que o conteúdo não
fique diretamente nas bordas da borda circundante e assim por diante. Agora, para o resumo que é essa visão que contém as
duas partes do texto, o estilo deve ser o
fato de termos uma direção flexível da linha, é claro, porque os itens
devem estar próximos um do outro. Justificar que o conteúdo deva
ter espaço entre e além disso, alinhar itens deve estar centralizado, de modo que no eixo transversal, que aqui é
o eixo vertical, os itens sejam centralizados.
Também quero garantir que tomemos toda a largura disponível aqui para distribuir o texto. Agora, para a quantidade total, que é o
estilo aplicado a esta primeira parte do texto que gera a quantidade, como sempre você pode estilizá-la como quiser, mas eu
definirei uma família de fontes open sans bold para usar essa versão em negrito da
minha fonte e dê a ela um tamanho de fonte 16, digamos, e então para a data que é o meu estilo,
apliquei aqui o texto dessa data. No final, também
quero usar um tamanho de fonte 16, mas a família de fontes será apenas sem sans, sem
a versão
em negrito e, além disso, também podemos reutilizar a cor acinzentada aqui. Agora, com isso, vamos tentar e usar esse item
de pedido na tela de pedidos.
Portanto, primeiro precisamos importar o item do pedido e, é claro, ir para a pasta
de componentes, para a pasta da loja e depois importar o item do pedido desse arquivo
e aqui, em vez
de renderizar o texto, agora renderizamos esse item do pedido aqui como uma etiqueta de fechamento automático e,
é claro, precisamos configurar isso.
Isso exige que repassemos a quantia e a data e, posteriormente, também os itens de detalhes, para que os
itens do pedido, mas
que serão apresentados em uma segunda etapa.
Então, por enquanto aqui, precisamos repassar a quantia e, claro, é simplesmente itemData. item que é um pedido único, não se esqueça de que estamos fazendo
um loop em
todos os pedidos aqui, que são uma variedade de pedidos, portanto esse é
um pedido único e,
nesse caso, a quantidade, se dermos uma olhada no nosso modelo de pedido, será armazenada em um valor total, a data é
então armazenada no campo de data.
Portanto, aqui acessamos o campo de valor total e, para a data prop que também precisamos
passar, podemos acessar itemData. item. encontro. Se agora salvarmos isso
e dermos uma olhada nisso, vamos adicionar algum conteúdo aqui, fazer o pedido e, em seguida, ir para a tela de pedidos e obteremos esse erro.
Agora, isso se refere a objetos que não são válidos como o React deveria e nos mostra
que, no final, é o objeto de estado com o qual está tendo um problema e que faz sentido porque a data em nossa
ordem quando o criamos aqui em nossa loja Redux é uma data Javascript objeto.
Agora não podemos produzir isso como texto assim. Para produzi-lo, podemos ir para
o nosso modelo, embora aqui, que é no final o modelo que usamos para criar
os pedidos e, no modelo de pedidos, podemos fazer algo que não fizemos antes, podemos adicionar um método a
isso modelo ou, para ser mais preciso, um getter que é um recurso Javascript padrão do Javascript moderno.
Portanto, aqui, podemos usar a palavra-chave get e, em seguida, qualquer nome de sua escolha, como data legível,
que é como uma função, mas não uma função que você chama como função, mas que você
acessa como uma propriedade no final, que retorna um valor calculado Eu quero retornar essa data, para que o objeto date
seja armazenado para esse objeto, mas possamos chamar a string de data local, que é um método Javascript interno que podemos usar nos objetos date
para converter esse objeto em uma data legível por humanos. Aí passamos na linguagem para a qual
queremos otimizá-la assim, por exemplo, e agora podemos configurá-la com um segundo
argumento, que é um objeto Javascript. Lá, você pode definir como o
ano deve ser configurado e anexado. Você encontrará os documentos detalhados
desse método, se quiser aprender tudo sobre ele. Por exemplo, podemos definir o ano como numérico, o
mês como longo, o dia como numérico, a hora para dois dígitos e o minuto também para dois dígitos.
Agora, temos a propriedade de data legível que podemos acessar em qualquer item do pedido e, por
enquanto, na tela de pedidos, em vez de passar o objeto de dados como este, eu acesso a
data legível, que agora é essa nova propriedade getter que adicionamos e agora o que você verá que, se eu fizer
novamente esse pedido aqui, clicando em order now e agora eu vou para meus pedidos, agora você verá o valor total e essa data
formatada corretamente e agora se eu fizer o mesmo no Android e fizer um pedido aqui e eu vou para
a minha tela de pedidos, você vê o mesmo lá. Agora, só quero ajustar um pouco esse botão, em geral
também no iOS, não deve ser tão amplo, nem tão amplo aqui. Portanto, no componente de item do pedido em que eu tenho esse botão,
no final, o que podemos fazer é nessa exibição aqui, podemos adicionar itens de alinhamento ao centro para centralizar o conteúdo ao longo do eixo transversal que é da esquerda para a direita e, portanto, agora, se eu tentar isso
de novo e eu faço esse pedido e vou para pedidos, você vê que isso agora não é pressionável lá e é ainda
mais claro no Android se o recarregarmos lá e eu fizer esse pedido rapidamente
aqui, vá para a tela de pedidos, agora temos este botão. Agora, é claro que o objetivo é que,
quando pressionamos esse botão, esse pedido se expanda aqui. A propósito, o que você notará no Android é
que essa data não é exibida
corretamente, então é outra coisa que precisamos corrigir.
Agora, a razão para isso não ser exibido corretamente é como o React Native funciona internamente,
qual mecanismo Javascript ele usa internamente e o que ele usa para Android lá ou nas plataformas Android simplesmente não
suporta esse método de string de data agradável para local que estou usando aqui .
O mecanismo usado no iOS funciona, mas no
Android, esse não é o caso, o que é obviamente inconveniente e não é ótimo.
Então, o que podemos fazer no Android para corrigir isso?
A solução é instalar uma biblioteca separada, chamada momento. js, instalamos com o npm install
--save moment.
Esta é uma biblioteca de terceiros que funcionará
nas duas plataformas, o que torna as datas de formatação também super simples.
Então, vamos aguardar a conclusão dessa instalação.
Agora, com isso instalado, você importa tudo a partir de momentos e da biblioteca que você acabou de
instalar e agora pode usá-lo neste arquivo aqui.
Agora podemos comentar isso aqui e, em vez disso, retornar um momento, executado como uma função e passar por
isso. date,
então o objeto de data que queremos formatar e chamar o formato. Agora, o formato utiliza uma sequência na qual você pode configurar como formatar
isso e anexá-lo. Você também encontra um link para os documentos oficiais, onde
pode aprender tudo sobre as possibilidades existentes.
Agora, aqui, um exemplo, uma maneira de formatar isso, digamos, um mês longo que você
faz com 4 letras maiúsculas e, em seguida, o para ter uma data bem formatada naquele mês,
produção dia a mês, um ano representado por quatro dígitos e então uma hora sempre representada com dois dígitos e os minutos
e agora, se salvarmos
isso e tentarmos, inicie no iOS, adicione-o aqui ao carrinho, vá ao carrinho e faça o pedido e agora vá
a pedidos, isso parece
Boa.
E agora, se fizermos uma tentativa no Android também,
pediremos isso e, aqui, vamos fazer pedidos, agora isso também ficará bom lá.
Agora isso é uma pequena correção, agora vamos trabalhar no
botão e fornecer um pouco de espaçamento, além de diminuir seu tamanho, e isso pode ser feito acessando o resumo aqui,
que é o estilo que se aplica à exibição que contém as duas partes do texto.
podemos simplesmente adicionar uma margem ao final de digamos 15, para que tenhamos algum espaçamento entre a linha de resumo, que é
essa linha de texto na parte superior e o botão abaixo dela. Então, eu adiciono isso ao meu carrinho aqui, encomende isto, depois volte aqui, vá para pedidos,
agora isso parece bom.
Agora, certifique-se de que o
botão mostrar detalhes também faça alguma coisa.