1
00:00:02,380 --> 00:00:08,420
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

2
00:00:08,450 --> 00:00:16,490
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

3
00:00:16,490 --> 00:00:22,830
em linha, mas ter um código um pouco mais estruturado onde eu tenho meu manipulador de exclusão.

4
00:00:23,020 --> 00:00:28,600
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

5
00:00:28,600 --> 00:00:35,950
meus emissores de eventos no código jsx, por assim dizer, e aí podemos chamar alerta. alert para mostrar um alerta com o

6
00:00:35,980 --> 00:00:37,690
título de você

7
00:00:37,720 --> 00:00:38,960
tem

8
00:00:39,880 --> 00:00:45,670
certeza de que deseja excluir esse item e, em seguida, uma

9
00:00:45,670 --> 00:00:48,940
matriz com todos os botões que

10
00:00:48,940 --> 00:00:58,020
queremos apresentar, onde o botão número um tem um texto de não e um estilo de padrão.

11
00:00:58,060 --> 00:01:02,800
Há apenas três estilos padrão ou estilos pré-configurados que você pode escolher e nenhum manipulador especial

12
00:01:02,800 --> 00:01:03,930
nesse primeiro botão.

13
00:01:04,030 --> 00:01:07,180
O segundo botão tem sim, aí eu quero

14
00:01:07,190 --> 00:01:10,640
ter um estilo de destrutivo para marcar isso,

15
00:01:10,640 --> 00:01:17,900
pois isso excluirá algo e o manipulador onPress aqui ficará no final segurando uma função que realmente

16
00:01:17,900 --> 00:01:20,540
enviará a ação de exclusão.

17
00:01:20,610 --> 00:01:28,110
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

18
00:01:28,110 --> 00:01:30,080
componente errado que acabei de ver.

19
00:01:30,210 --> 00:01:31,610
Vamos cortar isso, ele

20
00:01:31,800 --> 00:01:33,740
não está dentro da tela de edição

21
00:01:33,750 --> 00:01:35,440
do produto, não precisamos da importação de

22
00:01:35,460 --> 00:01:41,310
alerta, é da tela de produtos do usuário que estou falando. Lá, precisamos importar o alerta, devemos adicionar

23
00:01:41,700 --> 00:01:47,380
esse manipulador e agora o manipulador de exclusão deve ser atribuído a este botão

24
00:01:47,400 --> 00:01:53,730
de exclusão aqui, então aqui podemos apenas apontar para o manipulador de exclusão e essa função anônima

25
00:01:53,980 --> 00:02:00,790
pode ser cortada de lá e pode ser movido aqui e substitua esse manipulador onPress por esse botão

26
00:02:00,790 --> 00:02:07,320
e agora, com isso, devemos obter esse pop-up, esse diálogo de confirmação antes de excluir alguma coisa.

27
00:02:07,330 --> 00:02:09,790
Então, se eu clicar em excluir, agora estou perguntando, se

28
00:02:09,790 --> 00:02:10,210
eu

29
00:02:10,210 --> 00:02:11,640
pressionar não, nada acontece, apenas

30
00:02:11,650 --> 00:02:16,060
se eu clicar em Sim, nós excluiremos isso. Um pequeno erro, é claro, é que

31
00:02:16,060 --> 00:02:17,920
os dados do item que precisamos

32
00:02:20,570 --> 00:02:21,790
precisam estar disponíveis.

33
00:02:21,830 --> 00:02:24,920
Então, aqui encaminhamos o ID que queremos excluir, na verdade, para

34
00:02:24,920 --> 00:02:30,180
o manipulador de exclusão, precisamos do ID do produto ao qual estamos aplicando esse manipulador, para que eu

35
00:02:30,410 --> 00:02:35,360
tenha esse ID disponível e isso significa que, quando o manipulador de exclusão for chamado lá em

36
00:02:35,360 --> 00:02:37,980
baixo, precisamos garantir que ele obtenha o ID.

37
00:02:38,510 --> 00:02:40,150
Portanto, existem duas maneiras de fazer isso: uma função

38
00:02:40,400 --> 00:02:46,100
anônima na qual executamos o manipulador de exclusão manualmente e encaminhamos itemData. item. id ou alternativa

39
00:02:46,100 --> 00:02:55,000
a isso, passando o manipulador de exclusão como este, mas use o bind para pré-configurar todos os argumentos

40
00:02:55,000 --> 00:03:01,150
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

41
00:03:01,150 --> 00:03:04,170
importa, mas o segundo argumento agora é

42
00:03:04,360 --> 00:03:08,290
o primeiro argumento que o manipulador de exclusão obterá, então

43
00:03:08,620 --> 00:03:15,640
aqui passamos itemData. item. Eu iria. Agora, com isso, garantimos

44
00:03:15,640 --> 00:03:22,530
que podemos realmente pressionar sim e funcionará; se agora voltarmos aqui para o administrador, clique em excluir, pressione

45
00:03:22,600 --> 00:03:27,700
sim, isso agora realmente funciona e, se pressionarmos, nada acontece, sim, exclui-o.

46
00:03:27,700 --> 00:03:29,020
Portanto, essa é

47
00:03:29,230 --> 00:03:34,450
a primeira coisa e para garantir que navegemos de volta, se salvarmos isso, agora precisamos ir para

48
00:03:34,750 --> 00:03:41,680
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

49
00:03:41,680 --> 00:03:51,870
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

50
00:03:53,430 --> 00:03:58,920
e, por enquanto, enviar um produto vazio, é claro que recebo um aviso,

51
00:04:01,990 --> 00:04:07,750
mas isso geralmente funciona, isso vai voltar e se eu editar um produto, isso

52
00:04:07,750 --> 00:04:08,890
também funcionará.

53
00:04:08,950 --> 00:04:13,470
Então, agora, com isso terminamos com todo esse gerenciamento de entradas, o que

54
00:04:13,510 --> 00:04:18,920
eu quero fazer antes de terminar tudo isso é agora. Quero otimizar um pouco mais

55
00:04:18,920 --> 00:04:20,850
o item do produto e

56
00:04:21,040 --> 00:04:26,800
a maneira como nós ' reutilizando nosso cartão, olhe aqui com a sombra e assim por diante,

57
00:04:27,040 --> 00:04:28,270
porque estamos

58
00:04:28,270 --> 00:04:33,940
usando isso em vários componentes e, se você estiver usando algo em vários componentes, sempre pense

59
00:04:33,940 --> 00:04:35,920
em se pode otimizar um pouco

60
00:04:35,980 --> 00:04:39,370
mais e de fato aqui , temos potencial de otimização.

61
00:04:39,490 --> 00:04:42,600
Então, como podemos otimizar isso?

62
00:04:42,720 --> 00:04:48,720
Bem, poderíamos criar um componente separado aqui em nossa pasta de interface do usuário da pasta de

63
00:04:49,080 --> 00:04:55,800
componentes que chamamos de carrinho. js, onde apenas armazenamos esse visual do carrinho. Um componente do

64
00:04:55,800 --> 00:05:05,140
carrinho pode ser um componente muito simples no final. Importamos React de React aqui porque precisamos criar um componente e importamos

65
00:05:05,260 --> 00:05:13,990
uma visualização do React Native, exatamente assim e agora aqui, criamos nosso componente de carrinho onde simplesmente obtemos nossos props, retornamos alguns jsx

66
00:05:14,030 --> 00:05:21,000
e exportamos esse componente no diretório No final, apesar de também precisarmos configurar alguns estilos, porque essa é

67
00:05:21,000 --> 00:05:23,390
a ideia principal por trás desse

68
00:05:23,400 --> 00:05:30,370
componente, é tudo sobre nos dar alguns estilos pré-configurados. Então, também adicionarei meus estilos constantes com a Folha de

69
00:05:30,680 --> 00:05:31,750
estilo. criar

70
00:05:31,770 --> 00:05:36,710
lá em baixo e agora, qual é o código jsx que quero retornar aqui?

71
00:05:36,760 --> 00:05:41,920
Bem, essa é uma visão, uma visão que realmente envolverá tudo o que passamos

72
00:05:41,950 --> 00:05:46,870
lá, portanto, entre as tags do meu componente, apenas apóie as crianças, mas

73
00:05:46,930 --> 00:05:53,690
agora essa visão pode ter um estilo padrão aqui, que eu nomearei carrinho e que deveria sejam os

74
00:05:53,690 --> 00:05:56,090
estilos com os quais eu copio.

75
00:05:56,110 --> 00:06:01,780
Então aqui meu estilo de carrinho neste componente de carrinho é exatamente o que eu tenho aqui, o item do produto, é esse

76
00:06:01,780 --> 00:06:02,880
material de sombras aqui,

77
00:06:02,900 --> 00:06:09,540
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

78
00:06:09,540 --> 00:06:10,260
aqui.

79
00:06:11,580 --> 00:06:16,890
Agora, para ainda poder configurar isso um pouco, na verdade aprimorarei isso

80
00:06:16,890 --> 00:06:27,540
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.

81
00:06:27,540 --> 00:06:32,970
Portanto, agora podemos até definir um suporte de estilo quando usarmos nosso carrinho e

82
00:06:32,970 --> 00:06:39,240
passar em nossos próprios estilos que serão mesclados com esses estilos de cartão padrão, porque isso agora

83
00:06:39,300 --> 00:06:50,780
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

84
00:06:51,000 --> 00:06:52,460
e substitua essa

85
00:06:52,500 --> 00:06:54,830
visualização aqui, essa visualização externa por

86
00:06:54,860 --> 00:07:01,410
cartão e, é claro, também substitua a tag de fechamento e ainda passe aqui as especificações do

87
00:07:01,410 --> 00:07:08,360
meu produto, portanto, essa altura e a margem .

88
00:07:08,360 --> 00:07:11,570
Isso será mesclado com a outra aparência do cartão e tudo entre as tags

89
00:07:11,570 --> 00:07:15,030
de abertura e fechamento do cartão funcionará. Eu passo isso para o meu cartão aqui

90
00:07:15,020 --> 00:07:18,820
com a ajuda de adereços para crianças. Agora o mesmo para o

91
00:07:18,830 --> 00:07:25,280
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

92
00:07:26,240 --> 00:07:29,690
e depois usar o cartão em vez dessa vista, a vista

93
00:07:29,700 --> 00:07:34,570
externa aqui, substituí-lo por um cartão e livrar-se de esses estilos de cartão aqui, o material

94
00:07:34,590 --> 00:07:39,330
de sombra, a elevação, o raio da borda e a cor do plano de fundo e

95
00:07:39,330 --> 00:07:45,640
mantêm apenas os estilos especiais em que você deseja mesclar. E agora a última coisa, o último lugar onde podemos usar essa

96
00:07:45,660 --> 00:07:49,440
tela é o carrinho, lá também tenho meu resumo que usa esses estilos de cartão.

97
00:07:49,770 --> 00:07:56,870
Bem, novamente, podemos importar o componente do cartão da pasta de componentes, a pasta da interface do

98
00:07:56,920 --> 00:08:04,930
usuário, de um lado para o outro, do carrinho. arquivo js e agora use o componente do cartão em vez de

99
00:08:05,320 --> 00:08:07,290
ver no local em que

100
00:08:07,300 --> 00:08:11,380
queremos esses estilos de cartão, então aqui seria a vista que tinha

101
00:08:11,380 --> 00:08:16,590
os estilos de resumo, substituirei por cartão. E nos estilos de resumo, mantemos tudo o

102
00:08:16,650 --> 00:08:22,170
que é específico para essa tela ou para este componente, mas podemos nos livrar da cor da sombra,

103
00:08:22,170 --> 00:08:27,260
raio da sombra, elevação, cor do plano de fundo do raio da borda, que podem ser removidos.

104
00:08:27,290 --> 00:08:32,480
Agora vamos salvar isso e você verá que, é claro, o aplicativo ainda funciona

105
00:08:32,480 --> 00:08:33,800
e parece da

106
00:08:34,630 --> 00:08:41,320
mesma maneira que antes, se eu adicionar isso ao carrinho, por exemplo, e eu pedir isso e dar

107
00:08:41,320 --> 00:08:48,760
uma olhada nos meus pedidos, tudo isso parece o como antes, mas agora com um código um pouco mais otimizado, onde

108
00:08:48,760 --> 00:08:53,610
na verdade reutilizamos nossos estilos e temos um componente de apresentação separado para

109
00:08:53,650 --> 00:08:59,170
eles, para que nossos outros componentes possam ser um pouco mais enxutos e não nos

110
00:08:59,170 --> 00:09:05,710
repetimos como frequentemente ao configurar a aparência do carrinho. Outra vantagem é que não podemos digitar errado, se definirmos o

111
00:09:05,710 --> 00:09:11,220
raio da sombra para 8 em um componente e 10 em outro, nosso aplicativo poderá parecer um pouco inconsistente.

112
00:09:11,260 --> 00:09:17,830
Evitamos isso, tendo alguns componentes focados no estilo central, que configuram esses estilos principais que depois usamos

113
00:09:17,830 --> 00:09:20,410
em outros componentes, como fazemos aqui.