1 00:00:02,120 --> 00:00:08,560 Atualmente, no componente de item do produto, aqui na pasta de componentes, os botões fazem parte do componente, assim como 2 00:00:08,580 --> 00:00:10,660 o componente tocável de quebra automática. 3 00:00:12,480 --> 00:00:18,990 Não podemos mudar muito o componente tocável, porque ele pertence ao nosso conteúdo aqui e isso também 4 00:00:18,990 --> 00:00:25,200 não é um grande problema, porque na tela do administrador aqui, também quero que os itens sejam 5 00:00:25,590 --> 00:00:30,210 tocáveis, mas quero ir para a minha tela de edição. caso. 6 00:00:30,360 --> 00:00:33,530 Também quero ter dois botões - um para edição e 7 00:00:33,540 --> 00:00:37,710 outro para exclusão, mas é claro que as legendas e as ações devem ser diferentes. 8 00:00:38,370 --> 00:00:46,150 Agora, podemos passar esse texto de legenda aqui como adereços e renomear os adereços que acionamos quando os botões são pressionados de maneira mais genérica, 9 00:00:46,150 --> 00:00:50,880 para que possamos usá-lo para exibir os detalhes na tela de visão geral dos produtos 10 00:00:50,920 --> 00:00:59,500 e para editar ou excluir os itens. a tela do produto do usuário. Há também uma maneira alternativa de lidar com 11 00:00:59,500 --> 00:01:00,320 isso. 12 00:01:00,370 --> 00:01:07,720 Portanto, quando pressionamos esse componente em geral, vou renomeá-lo para on para selecionar um nome mais genérico que faça sentido 13 00:01:07,720 --> 00:01:12,000 em uma variedade mais ampla de casos de uso e também mudarei 14 00:01:12,770 --> 00:01:15,810 a maneira como recebemos esses botões aqui. 15 00:01:15,890 --> 00:01:22,310 Vou cortá-los daqui e, em vez disso, output props children aqui, que é aquele prop especial que se refere ao que passamos 16 00:01:22,310 --> 00:01:29,560 entre a tag de abertura e fechamento de nosso próprio componente. Agora, com isso, também posso me livrar da importação de cores aqui e 17 00:01:29,560 --> 00:01:32,540 do botão Importar e agora ir para os locais onde 18 00:01:32,830 --> 00:01:35,180 usamos o item do produto, que seria 19 00:01:35,230 --> 00:01:38,010 a tela de visão geral dos produtos, por exemplo. 20 00:01:38,290 --> 00:01:44,100 Agora precisamos importar o componente do botão e certificar-se de importar as cores. 21 00:01:44,110 --> 00:01:46,150 Portanto, importe cores das 22 00:01:48,490 --> 00:01:57,630 cores constantes e agora vá para o item do produto e altere-o de um componente de fechamento automático para um componente 23 00:01:57,630 --> 00:02:00,450 que você feche e abra com 24 00:02:00,450 --> 00:02:06,090 o seu próprias tags de componentes. Entre essas tags, agora você pode adicionar novamente 25 00:02:06,090 --> 00:02:13,680 esses dois botões e, é claro, não usar adereços na exibição de detalhes e adereços no carrinho aqui, mas adicione sua lógica 26 00:02:13,680 --> 00:02:18,690 aqui porque agora estamos passando dinamicamente isso no componente do item do produto, mas, 27 00:02:18,690 --> 00:02:21,950 portanto, podemos passar botões diferentes dependendo de onde usamos 28 00:02:21,960 --> 00:02:26,970 esse componente do item do produto. Então agora aqui vou adicionar um novo 29 00:02:29,840 --> 00:02:39,030 manipulador, selecionar o manipulador de itens, por exemplo, que é apenas uma função armazenada em uma constante como essa e lá quero fazer o que fiz anteriormente 30 00:02:39,140 --> 00:02:42,280 na exibição de detalhes, cortarei e adicionarei aqui e 31 00:02:42,350 --> 00:02:48,440 espero obter o ID e o título aqui como argumento, para que eu possa encaminhar o ID 32 00:02:48,440 --> 00:02:52,350 e o título aqui como este e agora selecione o manipulador 33 00:02:52,610 --> 00:02:59,860 de itens que desejo ativar aqui no select, lembre-se de que renomeei isso no item de produto , isso pode ser 34 00:02:59,870 --> 00:03:03,590 acionado agora apenas ao selecionar, portanto, você precisará renomear isso nos 35 00:03:03,590 --> 00:03:09,770 locais em que usar esse componente, como aqui e aqui, eu executo meu manipulador de item selecionado aqui 36 00:03:09,770 --> 00:03:17,360 e encaminhar itemData. item. id e itemData. item. título aqui 37 00:03:17,360 --> 00:03:23,690 para que esses dados acabem nessa função. Estou fazendo isso porque agora posso usar o 38 00:03:23,690 --> 00:03:31,760 mesmo manipulador de itens aqui neste botão de exibição de detalhes, posso essencialmente copiar esta função anônima e adicioná-la aqui 39 00:03:31,760 --> 00:03:34,560 ao manipulador onPress desse botão, agora 40 00:03:34,610 --> 00:03:37,970 reutilizamos isso e adicionamos a carrinho, lá despachamos isso, 41 00:03:38,060 --> 00:03:39,740 isso agora é removido 42 00:03:39,890 --> 00:03:45,320 aqui do componente do item do produto porque já não temos esse suporte, 43 00:03:45,320 --> 00:03:52,340 em vez disso agora está aqui, esse suporte que recebe essa função anônima que, no final, deveria despachar 44 00:03:52,340 --> 00:03:53,510 essa ação. 45 00:03:53,900 --> 00:04:00,170 Portanto, agora a principal mudança é que eu movo os botões para fora do componente, do componente do item do produto 46 00:04:00,170 --> 00:04:05,930 para o componente da tela de visão geral dos produtos e isso nos permite fazer o mesmo que antes, 47 00:04:05,930 --> 00:04:11,330 se eu salvar, isso ainda funcionará como antes. Podemos tocar em um item, tocar 48 00:04:11,330 --> 00:04:15,420 em ver detalhes, tocar no carrinho e tudo funcionar, mas agora também 49 00:04:15,740 --> 00:04:18,890 podemos personalizar isso na tela do produto do usuário. 50 00:04:19,250 --> 00:04:28,410 Então, também copio esses botões e vou para a tela do produto do usuário e, lá, importo o botão do React Native, importo 51 00:04:28,470 --> 00:04:36,870 nossas cores constantes, porque precisaremos disso para os botões das cores constantes e depois aqui no item do produto , em 52 00:04:37,320 --> 00:04:47,480 vez de configurá-lo, precisamos analisar nosso objeto on select quando o item geralmente é tocado, mas agora também adicionamos tags de abertura e fechamento para 53 00:04:47,480 --> 00:04:49,450 nosso próprio componente personalizado 54 00:04:49,550 --> 00:04:53,240 e, novamente, adicionamos nossos botões aqui, mas em vez 55 00:04:53,240 --> 00:04:55,380 de exibir detalhes agora Eu 56 00:04:55,490 --> 00:05:01,940 digo editar e excluir e, no momento, posso remover todas as outras lógicas porque, no momento, 57 00:05:02,060 --> 00:05:06,380 não temos lógica para editar e excluir, mas isso é 58 00:05:06,380 --> 00:05:08,630 algo que podemos adicionar posteriormente. 59 00:05:08,870 --> 00:05:13,630 E aqui para on select, também é apenas uma função vazia no momento. 60 00:05:13,780 --> 00:05:19,690 Isso tem a vantagem de que agora temos nossos itens como tínhamos antes aqui, mas na seção de administração, agora temos 61 00:05:19,690 --> 00:05:21,430 a edição e a exclusão, e 62 00:05:21,550 --> 00:05:26,290 isso nos permite fazer coisas diferentes, ainda reutilizando o componente do item do produto, o que é 63 00:05:26,290 --> 00:05:27,330 obviamente muito bom.