1 00:00:02,360 --> 00:00:08,330 Então, vamos ter certeza de que podemos ir para a tela de edição do 2 00:00:08,330 --> 00:00:17,550 produto e, é claro, antes de tudo preenchê-lo com alguma vida importando o React do React e depois importando algumas coisas do React 3 00:00:17,850 --> 00:00:24,960 Native e essas coisas no momento incluirá a visualização e o texto e também uma folha de 4 00:00:24,960 --> 00:00:26,610 estilo que precisaremos 5 00:00:26,670 --> 00:00:34,980 mais tarde; e aqui temos a tela de edição do produto, onde vou obter adereços e precisar retornar alguns jsx. 6 00:00:34,980 --> 00:00:45,420 Configurei meu objeto de estilos aqui com a Folha de estilo. crie assim e depois podemos exportar a tela de 7 00:00:45,450 --> 00:00:49,310 edição do produto como padrão. 8 00:00:49,390 --> 00:00:55,030 Agora, aqui no próprio componente, por enquanto, apenas para ver se isso funciona, podemos 9 00:00:55,030 --> 00:01:01,990 exibir uma visualização com um texto onde dizemos que a tela de edição do produto e, mais 10 00:01:01,990 --> 00:01:07,210 tarde, é claro, produziremos coisas mais úteis aqui e agora para ir para 11 00:01:07,270 --> 00:01:12,120 lá, novamente precisamos registrar isso em um navegador, ele faz parte 12 00:01:13,150 --> 00:01:18,940 do navegador de administração, então vamos importar essa tela, importar a tela de edição do 13 00:01:18,940 --> 00:01:29,060 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 14 00:01:29,060 --> 00:01:32,330 para a tela de edição do produto. 15 00:01:32,330 --> 00:01:37,250 Agora devemos poder mudar para lá, mas é claro que precisamos acionar uma ação de navegação para 16 00:01:37,250 --> 00:01:42,320 alcançá-la, e isso é algo que eu quero fazer dentro da tela do produto do usuário quando selecionarmos 17 00:01:42,560 --> 00:01:46,060 isso ou quando pressionarmos editar, então eu quero Faça a mesma coisa. 18 00:01:46,220 --> 00:01:50,040 Então, novamente, crio uma função aqui para não duplicar meu 19 00:01:50,240 --> 00:02:00,170 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 20 00:02:00,200 --> 00:02:01,420 o ID 21 00:02:01,460 --> 00:02:11,630 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 22 00:02:11,780 --> 00:02:17,900 com esse identificador que é claro que tenho, porque esse é o identificador que acabei 23 00:02:17,930 --> 00:02:19,330 de registrar aqui 24 00:02:21,370 --> 00:02:24,580 e quero encaminhar o ID do produto aqui. 25 00:02:25,730 --> 00:02:30,150 Portanto, o ID que recebo como argumento aqui na função é encaminhado como um parâmetro de roteamento. 26 00:02:30,200 --> 00:02:33,960 Agora, editar o manipulador do produto é a função que deve ser executada aqui 27 00:02:33,980 --> 00:02:40,850 quando clicamos no botão de edição, encaminhando itemData. item. id e eu faço o mesmo aqui neste 28 00:02:40,850 --> 00:02:42,790 manipulador de seleção, é claro. 29 00:02:45,360 --> 00:02:48,400 Se dermos uma olhada nisso, voltamos 30 00:02:48,510 --> 00:02:53,630 aqui, administrador, clique aqui, na tela de edição do produto, também se 31 00:02:53,640 --> 00:03:00,030 eu clicar no botão editar, para que funcione. Agora, para adicionar novos produtos, quero ir para a mesma 32 00:03:00,080 --> 00:03:05,730 tela, mas sem passar um ID, e isso nos permitirá descobrir se estamos no modo de edição ou adição nessa 33 00:03:05,730 --> 00:03:08,940 tela de edição de produto, verificando se temos um ID ou não. 34 00:03:08,940 --> 00:03:16,560 Então, para ir para a tela de adição de produto, podemos adicionar um item de ação, então um item à 35 00:03:16,560 --> 00:03:24,280 barra de cabeçalho aqui na tela do produto do usuário e que deve estar à direita, então adicionarei o cabeçalho aqui. 36 00:03:25,290 --> 00:03:32,530 No final, é exatamente o que configuramos aqui, então copio isso usando os botões de cabeçalho, mas o identificador 37 00:03:32,530 --> 00:03:40,840 aqui pode ser adicionado e o ícone deve ser md create e ios create para ter esse ícone que sinaliza que estamos 38 00:03:40,840 --> 00:03:47,260 prestes a crie algo e também aqui, não alterno a gaveta, mas chamo de navegar e vou 39 00:03:47,260 --> 00:03:53,650 editar o produto e agora, como mencionei importante, sem passar nenhum parâmetro aqui porque estamos adicionando um 40 00:03:53,650 --> 00:03:57,910 novo produto, certamente não iremos passar qualquer ID existente aqui. 41 00:03:58,970 --> 00:04:06,070 E com isso adicionado, por exemplo, no Android, para misturar as coisas na tela do administrador, agora podemos pressionar este ícone 42 00:04:06,430 --> 00:04:09,540 da barra de ação para acessar a tela. 43 00:04:09,710 --> 00:04:14,540 Agora é claro que aqui está faltando o cabeçalho e vamos consertar isso, mas antes 44 00:04:14,540 --> 00:04:19,120 de fazer isso, há outra coisa que eu quero consertar, a caneca de café 45 00:04:19,130 --> 00:04:25,220 é realmente cortada aqui no iOS, você vê que o G é um pouco cortado além disso, você deve 46 00:04:25,220 --> 00:04:30,680 ter percebido anteriormente que, quando eu tinha itens no carrinho e os removia, que antes eu tinha 47 00:04:31,380 --> 00:04:37,490 menos aqui, agora vamos corrigir as duas coisas. Para a caneca de café ou 48 00:04:37,490 --> 00:04:46,400 para o texto sendo cortado, o motivo é simples. No componente de item do produto aqui, atribuímos a altura a nossos diferentes elementos, 49 00:04:46,400 --> 00:04:48,420 como a imagem tinha 60% 50 00:04:48,550 --> 00:04:56,090 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 51 00:04:56,080 --> 00:05:00,440 um pouco mais espaço e isso garante que a caneca de café esteja 52 00:05:00,440 --> 00:05:02,540 lá, isso foi uma solução simples. 53 00:05:02,540 --> 00:05:05,560 Agora, para o carrinho, o problema é simplesmente 54 00:05:05,570 --> 00:05:07,910 que, nos bastidores, ao trabalhar com 55 00:05:07,910 --> 00:05:12,950 números de ponto flutuante, o Javascript não tem a precisão que você talvez deseje, 56 00:05:12,950 --> 00:05:14,630 e é assim 57 00:05:14,630 --> 00:05:16,800 que o Javascript funciona e, portanto, 58 00:05:17,000 --> 00:05:21,910 se você adicionar dois itens e remover ambos, você pode realmente acabar com 59 00:05:21,920 --> 00:05:29,580 um valor que em alguma casa decimal não é 0. Agora, o que você pode fazer para corrigir 60 00:05:29,580 --> 00:05:39,550 isso na tela do carrinho é aqui quando você gera o valor com fixo, na verdade, você pode usar a matemática incorporada ao 61 00:05:39,610 --> 00:05:47,830 Javascript, arredondar e agrupar esse valor fixo aqui e multiplicá-lo por 100 e depois, divida isso por 100. 62 00:05:47,850 --> 00:05:50,580 Isso garantirá que você nunca termine com esse sinal 63 00:05:50,610 --> 00:05:56,420 de menos, novamente isso tem a ver com a maneira como o Javascript lida internamente com esses números de ponto flutuante. 64 00:05:56,440 --> 00:06:06,210 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 65 00:06:06,210 --> 00:06:07,700 os itens aqui, 66 00:06:07,710 --> 00:06:13,170 sempre devemos terminar com um zero como esse, nunca com um menos na frente 67 00:06:13,170 --> 00:06:13,740 dele. 68 00:06:13,800 --> 00:06:20,070 Portanto, isso é apenas uma pequena melhoria em relação à forma como produzimos isso e, com esses ajustes visuais 69 00:06:20,070 --> 00:06:25,470 fora do caminho, vamos voltar aos produtos do usuário e garantir que agora possamos acessar a tela 70 00:06:25,470 --> 00:06:27,480 de edição e adição, que 71 00:06:27,480 --> 00:06:34,940 é a mesma tela de claro, também mostramos algumas entradas e carregamos alguns dados para um produto que deve ser editado, se apropriado.