Vamos trabalhar na tela de pedidos antes de adicionar a navegação,
não precisamos finalizá-la, mas quero poder visualizá-la.
Então, lá, importo o React do React para poder criar um componente React válido, importo algo do React Native
como sempre e esse algo também é o que estamos acostumados, certo?
Nunca é tão surpreendente.
Precisamos
de uma visualização, provavelmente precisaremos de uma lista simples, pois teremos vários pedidos potencialmente, uma quantidade
infinita e quero poder renderizar isso e com isso aqui, podemos criar nossa tela de pedidos dessa maneira.
Também exportarei isso, é claro, e o estilo não deve ser realmente necessário aqui, na verdade, nem precisamos da visualização aqui, porque
eu só quero exibir minha lista de pedidos. Portanto, é claro que os dados que precisamos aqui
virão do Redux, portanto, devemos importar
o seletor de uso do React Redux, que nos permite acessar a loja do Redux.
Portanto, aqui, podemos obter nossos pedidos com a ajuda do seletor de uso e agora use o seletor no estado. pedidos e, é claro, esse é o identificador que eu
designei aqui nos pedidos combinados de redutores aqui, isso nos dá acesso à fatia de estado
gerenciada pelo redutor de pedidos e lá, temos
outra propriedade de pedidos que contém o conjunto real de pedidos.
Então aqui eu preciso acessar o estado. ordens. pedidos no final,
isso me dá meus pedidos que são armazenados no Redux.
Agora, aqui, basta retornar nossa lista simples e isso recebe pedidos que devem ser
uma matriz e que são dados. Agora, um extrator de chaves não é necessário nas versões mais recentes do React Native,
porque cada pedido, se você der uma olhada no modelo, tem um ID e as versões mais recentes
do React devem estar procurando isso, mas, para ser seguro, adicionarei aqui e processarei o item agora, é claro, deve conter uma função que receba os dados do
item e, no final, retorne o que queremos renderizar por pedido. Agora, um item do pedido será mais complexo no futuro;
por
enquanto, apenas enviarei algum texto, novamente, para que rapidamente tenhamos algo na tela que possamos
ver antes de refinar isso.
O texto aqui para o item especificado pode ser e agora vamos
dar uma olhada no pedido, lá temos o ID, temos os itens que são mais uma
lista,
portanto, a coisa mais fácil de produzir é simplesmente a quantidade. Então, aqui, apenas mostrarei a propriedade da quantidade
total que meu pedido tem aqui.
É isso que eu
mostro na lista simples, agora temos uma tela
de pedidos básicos, é claro que agora precisamos ser capazes de alcançá-lo. Então, vamos ao navegador da loja e importe
a tela de pedidos aqui, a tela de pedidos da pasta telas, da tela de pedidos da loja e agora aqui o importante
é que eu não quero adicioná-lo a este navegador de pilha porque não faz parte disso pilha,
em vez
disso, quero acessá-lo com um menu, com um menu lateral.
Então, precisamos criar um navegador de gavetas.
Claro que você também pode trabalhar com guias, se preferir, mas eu quero trabalhar com uma gaveta
aqui, por isso precisamos desse navegador de gaveta.
Agora a tela de pedidos, mesmo que seja o único item, deve estar em sua própria
pilha, para que também tenhamos um cabeçalho lá.
Portanto, criarei um novo navegador de pedidos aqui, onde crio outro navegador de pilha e, lá, o único mapeamento necessário é de pedidos que apontam para a tela
de pedidos, o segundo argumento aqui ainda deve configurar algumas opções de navegação padrão e eu usarei as mesmas opções que
eu faço aqui, então eu vou realmente pegar esse objeto,
cortá-lo daqui e armazená-lo em uma constante constante, opções de navegação padrão, assim, esse é um padrão
que eu também já usei
no módulo de navegação porque agora podemos usar essa constante aqui no
navegador de produtos para as opções de navegação padrão e também aqui no navegador de pedidos.
Agora, é claro que o objetivo é criar um navegador de gavetas, que eu chamo de navegador de loja em geral, porque
combina diferentes recursos de loja que você
poderia dizer com a ajuda de criar um navegador de gavetas. Agora, quero mesclar essas duas pilhas, o
navegador de produtos e o navegador de pedidos, então
aqui precisamos dos produtos com o navegador de produtos e os pedidos apontando para o navegador de
pedidos, e também para esses navegadores de pilha. Também quero configurar minhas opções de conteúdo na gaveta.
Isso permite, por exemplo, definir a cor da tonalidade dos itens quando eles são selecionados
e lá quero definir a cor da tonalidade ativa como Cores. primário para que sejam coloridos com a cor principal, se estiverem selecionados.
Agora é o navegador da loja que deve ser retornado aqui. Isso por si só não funciona, mas é o primeiro
passo. Agora, antes
de adicionarmos o botão de menu, vamos para a tela de pedidos e, na verdade, adicionamos um título. Por isso, adicionarei opções de
navegação, defino-o como um objeto, No momento, não precisamos
de opções dinâmicas aqui,
porque eu só quero definir o título do cabeçalho para seus pedidos e agora que penso nisso, devemos
adicionar
isso na tela do carrinho,
onde ainda não estou fazendo isso. Lá, eu também
quero definir isso na tela do carrinho, defina-o no seu carrinho.
Portanto, isso agora está nas opções de navegação da
tela do carrinho, na tela de pedidos ou neste navegador está configurado. Com tudo isso configurado, precisamos adicionar este botão de
menu, este ícone de hambúrguer, por exemplo, na tela de visão geral de produtos, na qual desejo abrir
a gaveta e acessar meus pedidos. Agora, para adicioná-lo lá, vamos às opções
de navegação da tela de visão geral do produto, que já é
dinâmica,
o que é bom e, além de adicionar o cabeçalho à direita para o ícone do
carrinho, vamos adicionar headerLeft e headerLeft também devem conter botões do cabeçalho, é claro, mas existem , serão os meus itens de
menu, então nomeei-o assim; quero usar o menu md ou o menu ios, dependendo da plataforma em que estamos rodando, e
quero navegar, é claro, para
lugar nenhum, em vez da navegação suporte aqui, por assim dizer, quero chamar a gaveta de alternância que abrirá
a gaveta lateral. Agora, essa mesma
configuração também é necessária na tela de pedidos, para que possamos sair dessa tela.
Então, na verdade, aqui, precisaremos dessa configuração dinâmica das opções de navegação, onde temos uma função
aqui, na qual retornamos nosso objeto de configuração, para que lá também possamos adicionar headerLeft com os botões de
cabeçalho, com nosso menu que alterna a gaveta que se baseia nos dados de navegação aqui e,
é claro, para isso, precisamos importar botões de cabeçalho, botão de cabeçalho e item. Portanto, na tela de visão geral do
produto, no final, preciso importar essas coisas
aqui, essas duas linhas precisam ser adicionadas para a tela de pedidos também.
Então, deixe-me adicioná-lo, adicionando
os botões de cabeçalho e a importação de itens dos botões de cabeçalho do React Navigation e
o botão de cabeçalho importados de nosso componente personalizado. Agora, com isso, se salvarmos isso, devemos ter um
botão de menu aqui e abrir, abre a gaveta, podemos ir para pedidos e recebo um erro aqui, porque na
tela de pedidos, é claro que
estou usando a plataforma API, então devemos importá-la
para lá, vamos fazer isso, vamos adicionar plataforma e agora, se voltarmos, podemos ir para pedidos e lá também podemos voltar e o mesmo acontece no Android.
Agora, com isso, adicionamos a gaveta.
Há uma coisa que quero adicionar à gaveta,
que ainda não havia feito antes de continuar trabalhando na minha lista de pedidos, ainda não estamos produzindo
nada porque não estamos realmente adicionando pedidos, não conectamos isso botão encomendar agora, no entanto, não estamos vendo
nada que mude se adicionarmos algo ao carrinho, clique em pedir agora uma
vez, ao clicar nele várias vezes, ocorrerá um erro agora e então
veremos esse pedido aqui. Agora precisamos limpar o carrinho,
isso é outra coisa que precisamos fazer, mas antes de fazer isso, na gaveta, também quero ter
ícones ao lado das minhas entradas aqui e adicionar esses ícones é realmente muito simples, não é? Isso
foi feito no módulo de navegação, mas faremos isso agora. Para adicionar ícones, você só precisa ir para as telas
nas quais está navegando na gaveta
e, no nosso caso, esses dois navegadores são, obviamente, esses dois navegadores, portanto, não são telas,
mas esses dois navegadores e nesses navegadores ou se eram telas , nessas telas, você pode definir opções
de navegação e, com isso, não quero dizer as opções de navegação padrão definidas para todas as telas desse
navegador, mas você define esse navegador se ele for usado dentro de outro navegador, como é o caso aqui.
Portanto, podemos adicionar opções
de navegação aqui. Novamente, isso não será aplicado às telas deste navegador.
Em vez disso, isso configurará esse navegador se
for uma tela de outro navegador e aqui o navegador de pedidos será uma tela do navegador da
loja no final e, nessas opções de navegação, podemos adicionar uma entrada no ícone da gaveta, que pode ser uma função que digamos a configuração da gaveta, essa
função é chamada por você pela opção React navigation e fornece a configuração da gaveta
que é mais importante, por exemplo qual é a cor da sua tonalidade, porque agora você pode retornar um
componente, como um componente Ionicons, para renderizar um ícone. Para isso, você só precisa ter certeza de
que está importando Ionicons
do @ expo / vector-icons, para adicionar essa importação
no arquivo do navegador da loja e agora com isso, se descermos aqui, retornarei meu Ionicon, agora
eu
posso configurá-lo como sempre fazia isso e, novamente, podemos usar a API da plataforma
que já estamos importando aqui, caso contrário, certifique-se de fazê-lo. Podemos usá-lo para verificar o sistema operacional e, se for igual
ao Android, aqui processarei o md create como um ícone;
caso contrário, o iOS será criado e esse é apenas um ícone que eu escolhi antecipadamente.
Agora, é claro, também podemos configurar o tamanho aqui e seguirei meu bom e velho 23 anos. Além disso, defina
uma cor, se desejar, e agora, é claro, que não deve ser as cores primárias,
pois esse ícone sempre tenha essa cor; em vez disso, essa cor deve ser atribuída pela
gaveta, o que sabe se o item está selecionado ou não e que alterará a cor adequadamente.
Então aqui, você deve acessar a configuração da gaveta. TintColor e isso
informa qual cor deve ter no momento e essa cor mudará dependendo se essa opção
está selecionada ou não no momento.
Agora, esse é o caso dos meus pedidos, desculpe-me, o
ícone aqui
deve ser a lista md e a lista iOS, não criar. Portanto, essa é a minha configuração de pedidos agora com os ícones da lista e,
é claro, a mesma coisa pode ser feita aqui, copiando-a no navegador de produtos e lá, eu quero usar o md cart ou o
iOS, então esse ícone do carrinho novamente e agora quase pronto para ser usado. No entanto, é necessário importar o React from
React agora neste arquivo do navegador, porque agora você está
usando componentes com essa sintaxe jsx. Como você sabe, o jsx
é compilado ou convertido em React. createElement no final e, portanto, você precisa importar o React para
que esta sintaxe funcione aqui.
Agora, com isso, se você voltar, terá esses ícones legais aqui ao lado dos itens e
eles também serão
coloridos corretamente, também aqui no Android, é claro.
Então, agora que a gaveta lateral terminou, também podemos ir para a tela de pedidos e até ver um
pedido lá.
No entanto, no momento, o carrinho não é limpo e, portanto, se você clicar nisso várias vezes, receberá
um aviso, porque o que você faz é clicar muito rápido e, portanto, criar vários pedidos com o mesmo pseudo
ID único em que no final, use o carimbo de data / hora atual; se você clicar muito rápido várias vezes, será o mesmo
carimbo de data / hora. É por
isso que esse aviso está chegando e eu gostaria de limpar o carrinho depois de fazer um pedido de qualquer maneira.
Então, certifique-se de limpar o carrinho depois de fazer um pedido e, é claro, certifique-se de enviar os
pedidos de uma maneira mais agradável do que atualmente.