Atualmente, no componente de item do produto, aqui na pasta de componentes, os botões fazem parte do componente, assim como
o componente tocável de quebra automática.
Não podemos mudar muito o componente tocável, porque ele pertence ao nosso conteúdo aqui e isso também
não é um grande problema, porque na tela do administrador aqui, também quero que os itens sejam
tocáveis, mas quero ir para a minha tela de edição. caso.
Também quero ter dois botões - um para edição e
outro para exclusão, mas é claro que as legendas e as ações devem ser diferentes.
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,
para que possamos usá-lo para exibir os detalhes na tela de visão geral dos produtos
e para editar ou excluir os itens. a tela do produto do usuário. Há também uma maneira alternativa de lidar com
isso.
Portanto, quando pressionamos esse componente em geral, vou renomeá-lo para on para selecionar um nome mais genérico que faça sentido
em uma variedade mais ampla de casos de uso e também mudarei
a maneira como recebemos esses botões aqui.
Vou cortá-los daqui e, em vez disso, output props children aqui, que é aquele prop especial que se refere ao que passamos
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
do botão Importar e agora ir para os locais onde
usamos o item do produto, que seria
a tela de visão geral dos produtos, por exemplo.
Agora precisamos importar o componente do botão e certificar-se de importar as cores.
Portanto, importe cores das
cores constantes e agora vá para o item do produto e altere-o de um componente de fechamento automático para um componente
que você feche e abra com
o seu próprias tags de componentes. Entre essas tags, agora você pode adicionar novamente
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
aqui porque agora estamos passando dinamicamente isso no componente do item do produto, mas,
portanto, podemos passar botões diferentes dependendo de onde usamos
esse componente do item do produto. Então agora aqui vou adicionar um novo
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
na exibição de detalhes, cortarei e adicionarei aqui e
espero obter o ID e o título aqui como argumento, para que eu possa encaminhar o ID
e o título aqui como este e agora selecione o manipulador
de itens que desejo ativar aqui no select, lembre-se de que renomeei isso no item de produto , isso pode ser
acionado agora apenas ao selecionar, portanto, você precisará renomear isso nos
locais em que usar esse componente, como aqui e aqui, eu executo meu manipulador de item selecionado aqui
e encaminhar itemData. item. id e itemData. item. título aqui
para que esses dados acabem nessa função. Estou fazendo isso porque agora posso usar o
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
ao manipulador onPress desse botão, agora
reutilizamos isso e adicionamos a carrinho, lá despachamos isso,
isso agora é removido
aqui do componente do item do produto porque já não temos esse suporte,
em vez disso agora está aqui, esse suporte que recebe essa função anônima que, no final, deveria despachar
essa ação.
Portanto, agora a principal mudança é que eu movo os botões para fora do componente, do componente do item do produto
para o componente da tela de visão geral dos produtos e isso nos permite fazer o mesmo que antes,
se eu salvar, isso ainda funcionará como antes. Podemos tocar em um item, tocar
em ver detalhes, tocar no carrinho e tudo funcionar, mas agora também
podemos personalizar isso na tela do produto do usuário.
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
nossas cores constantes, porque precisaremos disso para os botões das cores constantes e depois aqui no item do produto , em
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
nosso próprio componente personalizado
e, novamente, adicionamos nossos botões aqui, mas em vez
de exibir detalhes agora Eu
digo editar e excluir e, no momento, posso remover todas as outras lógicas porque, no momento,
não temos lógica para editar e excluir, mas isso é
algo que podemos adicionar posteriormente.
E aqui para on select, também é apenas uma função vazia no momento.
Isso tem a vantagem de que agora temos nossos itens como tínhamos antes aqui, mas na seção de administração, agora temos
a edição e a exclusão, e
isso nos permite fazer coisas diferentes, ainda reutilizando o componente do item do produto, o que é
obviamente muito bom.