Vamos começar com a caixa de diálogo de confirmação aqui na tela de edição do produto. Podemos simplesmente importar a API de alerta do
React Native, o que nos permite mostrar um alerta interessante e, em seguida, adicionar um novo método aqui, talvez, todos nós pudéssemos fazê-lo
em linha, mas ter um código um pouco mais estruturado onde eu tenho meu manipulador de exclusão.
A propósito, como você nomeia suas funções depende totalmente de você, eu apenas gosto deste manipulador nomeando aqui se eu atribuir isso aos
meus emissores de eventos no código jsx, por assim dizer, e aí podemos chamar alerta. alert para mostrar um alerta com o
título de você
tem
certeza de que deseja excluir esse item e, em seguida, uma
matriz com todos os botões que
queremos apresentar, onde o botão número um tem um texto de não e um estilo de padrão.
Há apenas três estilos padrão ou estilos pré-configurados que você pode escolher e nenhum manipulador especial
nesse primeiro botão.
O segundo botão tem sim, aí eu quero
ter um estilo de destrutivo para marcar isso,
pois isso excluirá algo e o manipulador onPress aqui ficará no final segurando uma função que realmente
enviará a ação de exclusão.
Então agora é o manipulador de exclusão que eu quero executar quando clicamos nesse botão de exclusão e, portanto, é claro que estou no
componente errado que acabei de ver.
Vamos cortar isso, ele
não está dentro da tela de edição
do produto, não precisamos da importação de
alerta, é da tela de produtos do usuário que estou falando. Lá, precisamos importar o alerta, devemos adicionar
esse manipulador e agora o manipulador de exclusão deve ser atribuído a este botão
de exclusão aqui, então aqui podemos apenas apontar para o manipulador de exclusão e essa função anônima
pode ser cortada de lá e pode ser movido aqui e substitua esse manipulador onPress por esse botão
e agora, com isso, devemos obter esse pop-up, esse diálogo de confirmação antes de excluir alguma coisa.
Então, se eu clicar em excluir, agora estou perguntando, se
eu
pressionar não, nada acontece, apenas
se eu clicar em Sim, nós excluiremos isso. Um pequeno erro, é claro, é que
os dados do item que precisamos
precisam estar disponíveis.
Então, aqui encaminhamos o ID que queremos excluir, na verdade, para
o manipulador de exclusão, precisamos do ID do produto ao qual estamos aplicando esse manipulador, para que eu
tenha esse ID disponível e isso significa que, quando o manipulador de exclusão for chamado lá em
baixo, precisamos garantir que ele obtenha o ID.
Portanto, existem duas maneiras de fazer isso: uma função
anônima na qual executamos o manipulador de exclusão manualmente e encaminhamos itemData. item. id ou alternativa
a isso, passando o manipulador de exclusão como este, mas use o bind para pré-configurar todos os argumentos
que essa função obterá. A ligação sempre precisa de valor para a palavra-chave this dentro da função que será executada. Aí podemos passar isso, não
importa, mas o segundo argumento agora é
o primeiro argumento que o manipulador de exclusão obterá, então
aqui passamos itemData. item. Eu iria. Agora, com isso, garantimos
que podemos realmente pressionar sim e funcionará; se agora voltarmos aqui para o administrador, clique em excluir, pressione
sim, isso agora realmente funciona e, se pressionarmos, nada acontece, sim, exclui-o.
Portanto, essa é
a primeira coisa e para garantir que navegemos de volta, se salvarmos isso, agora precisamos ir para
a tela de edição do produto e para lá no manipulador de envio, independentemente de despacharmos a atualização ou criarmos uma ação do
produto, no fim Desejo também chamar a navegação de adereços voltar para voltar à tela anterior. E se agora salvarmos isso e formos para a tela do administrador
e, por enquanto, enviar um produto vazio, é claro que recebo um aviso,
mas isso geralmente funciona, isso vai voltar e se eu editar um produto, isso
também funcionará.
Então, agora, com isso terminamos com todo esse gerenciamento de entradas, o que
eu quero fazer antes de terminar tudo isso é agora. Quero otimizar um pouco mais
o item do produto e
a maneira como nós ' reutilizando nosso cartão, olhe aqui com a sombra e assim por diante,
porque estamos
usando isso em vários componentes e, se você estiver usando algo em vários componentes, sempre pense
em se pode otimizar um pouco
mais e de fato aqui , temos potencial de otimização.
Então, como podemos otimizar isso?
Bem, poderíamos criar um componente separado aqui em nossa pasta de interface do usuário da pasta de
componentes que chamamos de carrinho. js, onde apenas armazenamos esse visual do carrinho. Um componente do
carrinho pode ser um componente muito simples no final. Importamos React de React aqui porque precisamos criar um componente e importamos
uma visualização do React Native, exatamente assim e agora aqui, criamos nosso componente de carrinho onde simplesmente obtemos nossos props, retornamos alguns jsx
e exportamos esse componente no diretório No final, apesar de também precisarmos configurar alguns estilos, porque essa é
a ideia principal por trás desse
componente, é tudo sobre nos dar alguns estilos pré-configurados. Então, também adicionarei meus estilos constantes com a Folha de
estilo. criar
lá em baixo e agora, qual é o código jsx que quero retornar aqui?
Bem, essa é uma visão, uma visão que realmente envolverá tudo o que passamos
lá, portanto, entre as tags do meu componente, apenas apóie as crianças, mas
agora essa visão pode ter um estilo padrão aqui, que eu nomearei carrinho e que deveria sejam os
estilos com os quais eu copio.
Então aqui meu estilo de carrinho neste componente de carrinho é exatamente o que eu tenho aqui, o item do produto, é esse
material de sombras aqui,
a elevação, o raio da borda e a cor do plano de fundo. Você pode cortar tudo isso e movê-lo para o carrinho
aqui.
Agora, para ainda poder configurar isso um pouco, na verdade aprimorarei isso
e definirei o estilo como um objeto no qual mesclo meus valores de carrinho de estilos e quaisquer valores que recebo no suporte de estilo aqui, assim.
Portanto, agora podemos até definir um suporte de estilo quando usarmos nosso carrinho e
passar em nossos próprios estilos que serão mesclados com esses estilos de cartão padrão, porque isso agora
me permite usar o carrinho aqui no item do produto, por exemplo, importando carrinho de , e agora suba um nível na pasta da interface do usuário, no arquivo do carrinho
e substitua essa
visualização aqui, essa visualização externa por
cartão e, é claro, também substitua a tag de fechamento e ainda passe aqui as especificações do
meu produto, portanto, essa altura e a margem .
Isso será mesclado com a outra aparência do cartão e tudo entre as tags
de abertura e fechamento do cartão funcionará. Eu passo isso para o meu cartão aqui
com a ajuda de adereços para crianças. Agora o mesmo para o
item do pedido, só precisamos importar o cartão de e agora entrar na pasta da interface do usuário, para o cartão aqui
e depois usar o cartão em vez dessa vista, a vista
externa aqui, substituí-lo por um cartão e livrar-se de esses estilos de cartão aqui, o material
de sombra, a elevação, o raio da borda e a cor do plano de fundo e
mantêm apenas os estilos especiais em que você deseja mesclar. E agora a última coisa, o último lugar onde podemos usar essa
tela é o carrinho, lá também tenho meu resumo que usa esses estilos de cartão.
Bem, novamente, podemos importar o componente do cartão da pasta de componentes, a pasta da interface do
usuário, de um lado para o outro, do carrinho. arquivo js e agora use o componente do cartão em vez de
ver no local em que
queremos esses estilos de cartão, então aqui seria a vista que tinha
os estilos de resumo, substituirei por cartão. E nos estilos de resumo, mantemos tudo o
que é específico para essa tela ou para este componente, mas podemos nos livrar da cor da sombra,
raio da sombra, elevação, cor do plano de fundo do raio da borda, que podem ser removidos.
Agora vamos salvar isso e você verá que, é claro, o aplicativo ainda funciona
e parece da
mesma maneira que antes, se eu adicionar isso ao carrinho, por exemplo, e eu pedir isso e dar
uma olhada nos meus pedidos, tudo isso parece o como antes, mas agora com um código um pouco mais otimizado, onde
na verdade reutilizamos nossos estilos e temos um componente de apresentação separado para
eles, para que nossos outros componentes possam ser um pouco mais enxutos e não nos
repetimos como frequentemente ao configurar a aparência do carrinho. Outra vantagem é que não podemos digitar errado, se definirmos o
raio da sombra para 8 em um componente e 10 em outro, nosso aplicativo poderá parecer um pouco inconsistente.
Evitamos isso, tendo alguns componentes focados no estilo central, que configuram esses estilos principais que depois usamos
em outros componentes, como fazemos aqui.