Então, vamos ter certeza de que podemos ir para a tela de edição do
produto e, é claro, antes de tudo preenchê-lo com alguma vida importando o React do React e depois importando algumas coisas do React
Native e essas coisas no momento incluirá a visualização e o texto e também uma folha de
estilo que precisaremos
mais tarde; e aqui temos a tela de edição do produto, onde vou obter adereços e precisar retornar alguns jsx.
Configurei meu objeto de estilos aqui com a Folha de estilo. crie assim e depois podemos exportar a tela de
edição do produto como padrão.
Agora, aqui no próprio componente, por enquanto, apenas para ver se isso funciona, podemos
exibir uma visualização com um texto onde dizemos que a tela de edição do produto e, mais
tarde, é claro, produziremos coisas mais úteis aqui e agora para ir para
lá, novamente precisamos registrar isso em um navegador, ele faz parte
do navegador de administração, então vamos importar essa tela, importar a tela de edição do
produto das telas usuário editar a tela do produto e adicioná-la aqui ao navegador de administrador, talvez com editar o produto como um identificador, aponte
para a tela de edição do produto.
Agora devemos poder mudar para lá, mas é claro que precisamos acionar uma ação de navegação para
alcançá-la, e isso é algo que eu quero fazer dentro da tela do produto do usuário quando selecionarmos
isso ou quando pressionarmos editar, então eu quero Faça a mesma coisa.
Então, novamente, crio uma função aqui para não duplicar meu
código, selecionar produto ou editar o manipulador do produto, talvez, essa é uma função na qual espero obter o ID que quero editar, para que
o ID
do produto que eu quero para editar e aqui, quero usar a navegação de acessórios, navegar para a tela de edição do produto, para a tela
com esse identificador que é claro que tenho, porque esse é o identificador que acabei
de registrar aqui
e quero encaminhar o ID do produto aqui.
Portanto, o ID que recebo como argumento aqui na função é encaminhado como um parâmetro de roteamento.
Agora, editar o manipulador do produto é a função que deve ser executada aqui
quando clicamos no botão de edição, encaminhando itemData. item. id e eu faço o mesmo aqui neste
manipulador de seleção, é claro.
Se dermos uma olhada nisso, voltamos
aqui, administrador, clique aqui, na tela de edição do produto, também se
eu clicar no botão editar, para que funcione. Agora, para adicionar novos produtos, quero ir para a mesma
tela, mas sem passar um ID, e isso nos permitirá descobrir se estamos no modo de edição ou adição nessa
tela de edição de produto, verificando se temos um ID ou não.
Então, para ir para a tela de adição de produto, podemos adicionar um item de ação, então um item à
barra de cabeçalho aqui na tela do produto do usuário e que deve estar à direita, então adicionarei o cabeçalho aqui.
No final, é exatamente o que configuramos aqui, então copio isso usando os botões de cabeçalho, mas o identificador
aqui pode ser adicionado e o ícone deve ser md create e ios create para ter esse ícone que sinaliza que estamos
prestes a crie algo e também aqui, não alterno a gaveta, mas chamo de navegar e vou
editar o produto e agora, como mencionei importante, sem passar nenhum parâmetro aqui porque estamos adicionando um
novo produto, certamente não iremos passar qualquer ID existente aqui.
E com isso adicionado, por exemplo, no Android, para misturar as coisas na tela do administrador, agora podemos pressionar este ícone
da barra de ação para acessar a tela.
Agora é claro que aqui está faltando o cabeçalho e vamos consertar isso, mas antes
de fazer isso, há outra coisa que eu quero consertar, a caneca de café
é realmente cortada aqui no iOS, você vê que o G é um pouco cortado além disso, você deve
ter percebido anteriormente que, quando eu tinha itens no carrinho e os removia, que antes eu tinha
menos aqui, agora vamos corrigir as duas coisas. Para a caneca de café ou
para o texto sendo cortado, o motivo é simples. No componente de item do produto aqui, atribuímos a altura a nossos diferentes elementos,
como a imagem tinha 60%
de altura, os detalhes tinham 15, vamos dar esses 17 e, portanto, deduzimos dois pontos percentuais das ações para que o título tenha
um pouco mais espaço e isso garante que a caneca de café esteja
lá, isso foi uma solução simples.
Agora, para o carrinho, o problema é simplesmente
que, nos bastidores, ao trabalhar com
números de ponto flutuante, o Javascript não tem a precisão que você talvez deseje,
e é assim
que o Javascript funciona e, portanto,
se você adicionar dois itens e remover ambos, você pode realmente acabar com
um valor que em alguma casa decimal não é 0. Agora, o que você pode fazer para corrigir
isso na tela do carrinho é aqui quando você gera o valor com fixo, na verdade, você pode usar a matemática incorporada ao
Javascript, arredondar e agrupar esse valor fixo aqui e multiplicá-lo por 100 e depois, divida isso por 100.
Isso garantirá que você nunca termine com esse sinal
de menos, novamente isso tem a ver com a maneira como o Javascript lida internamente com esses números de ponto flutuante.
Portanto, agora, se adicionarmos novamente alguns itens aqui e adicioná-los ao carrinho, isso geralmente parecerá bom, então nossa lógica ainda funcionará, mas agora, se removermos
os itens aqui,
sempre devemos terminar com um zero como esse, nunca com um menos na frente
dele.
Portanto, isso é apenas uma pequena melhoria em relação à forma como produzimos isso e, com esses ajustes visuais
fora do caminho, vamos voltar aos produtos do usuário e garantir que agora possamos acessar a tela
de edição e adição, que
é a mesma tela de claro, também mostramos algumas entradas e carregamos alguns dados para um produto que deve ser editado, se apropriado.