1
00:00:02,400 --> 00:00:06,680
Agora, com as guias adicionadas, estamos perdendo conteúdo na tela favorita.

2
00:00:06,740 --> 00:00:12,960
Agora, ainda não temos a funcionalidade de adicionar favoritos. Se clicarmos no ícone de estrela, isso não faz nada e,

3
00:00:12,960 --> 00:00:13,640
a propósito,

4
00:00:13,650 --> 00:00:16,370
estou ciente de que também estamos perdendo conteúdo aqui,

5
00:00:16,380 --> 00:00:17,680
adicionaremos isso mais tarde.

6
00:00:17,880 --> 00:00:22,140
Portanto, clicar no ícone de estrela ainda não faz nada e só podemos fazer

7
00:00:22,140 --> 00:00:23,370
isso um pouco mais

8
00:00:23,490 --> 00:00:29,040
tarde. Ainda assim, quero preencher essa tela favorita um pouco mais, pelo menos com algumas refeições fictícias que

9
00:00:29,040 --> 00:00:30,340
estamos carregando lá digamos

10
00:00:30,480 --> 00:00:35,640
e pelo menos com a funcionalidade de também ir para o MealDetailScreen lá porque, no final, a

11
00:00:35,640 --> 00:00:39,080
idéia aqui é que temos uma lista de refeições aqui, assim

12
00:00:39,090 --> 00:00:44,460
como a temos aqui depois que selecionamos uma categoria e que podemos tocar uma refeição para ir para

13
00:00:44,460 --> 00:00:45,620
a página de

14
00:00:45,660 --> 00:00:50,940
detalhes, assim como podemos fazer no navegador de refeições, então no navegador da pilha de refeições devo

15
00:00:50,940 --> 00:00:58,620
dizer e, portanto, no final, o que precisamos para os favoritos, pois a guia Favoritos não é uma única tela mas outra pilha, uma pilha

16
00:00:58,620 --> 00:00:59,330
para

17
00:00:59,340 --> 00:01:02,750
os nossos recursos favoritos nesta aplicação, é disso que precisamos aqui;

18
00:01:02,760 --> 00:01:06,960
a propósito, isso também nos dará um cabeçalho do qual também estamos perdendo.

19
00:01:07,470 --> 00:01:10,020
Obviamente, isso não é muito

20
00:01:10,110 --> 00:01:18,500
difícil de implementar, podemos simplesmente criar outro navegador de pilha acima da nossa tabScreenConfig, talvez, e isso configurará o navegador

21
00:01:18,500 --> 00:01:21,390
de pilha para a nossa pilha favorita.

22
00:01:21,530 --> 00:01:26,630
Portanto, o objeto que passamos aqui tem que definir todas as telas que queremos ter nessa

23
00:01:26,630 --> 00:01:30,830
pilha e essa seria a própria tela de favoritos com a lista de

24
00:01:30,830 --> 00:01:36,470
nossas refeições favoritas. Quero apontar para a tela de favoritos e, em seguida, quero ter um detalhes da

25
00:01:36,710 --> 00:01:42,710
refeição e apontarei para MealDetailScreen e já estamos usando o MealDetailScreen aqui em nosso navegador de refeições, em nosso

26
00:01:42,710 --> 00:01:44,000
outro navegador de pilha,

27
00:01:44,030 --> 00:01:45,230
mas tudo

28
00:01:45,230 --> 00:01:49,030
bem, você pode usar a mesma tela em diferentes navegadores de

29
00:01:49,040 --> 00:01:51,540
pilha, não há nada de errado em este.

30
00:01:51,710 --> 00:01:58,340
Para que possamos usar o MealDetailScreen aqui também no navegador de pilha de favoritos e agora só quero ter certeza

31
00:01:58,340 --> 00:02:03,550
de que também copio minhas opções aqui, minhas opções de navegação padrão, esse segundo argumento, na

32
00:02:03,560 --> 00:02:09,170
verdade, para criar o navegador de pilha, para o navegador de refeições para meus favoritos navegador de

33
00:02:09,170 --> 00:02:10,070
pilha também.

34
00:02:10,070 --> 00:02:15,680
Então, aqui como um segundo argumento para criar o navegador da pilha, copio esse

35
00:02:15,680 --> 00:02:22,430
objeto em que configuro minhas opções de navegação padrão para que, para essa pilha, tenha os mesmos

36
00:02:22,430 --> 00:02:29,330
padrões, o mesmo estilo de cabeçalho e, portanto, é claro, também podemos corte isso daqui e remova-o

37
00:02:29,330 --> 00:02:39,100
daqui e armazene essa configuração padrão em uma constante aqui, talvez nosso defaultStackNavOptions, esse é o objeto que configura o estilo do cabeçalho e podemos

38
00:02:39,330 --> 00:02:45,670
usar o defaultStackNavOptions aqui na pilha do navegador de refeições e também aqui na nossa

39
00:02:45,840 --> 00:02:52,800
Os favoritos empilham o navegador e também armazenarei isso na constante FavNavigator, é claro que você pode nomear

40
00:02:52,800 --> 00:02:55,330
essa constante o que quiser.

41
00:02:55,410 --> 00:02:57,230
Agora é o FavNavigator, de modo

42
00:02:57,270 --> 00:03:03,890
que, no final, criei o componente stack navigator que eu quero usar no meu tabScreenConfig, para as refeições que já

43
00:03:03,920 --> 00:03:09,420
estávamos usando o stack navigator, para os favoritos eu estava usando a tela favorita e isso

44
00:03:09,420 --> 00:03:10,720
agora precisa mudar,

45
00:03:10,720 --> 00:03:16,620
agora deve ser o FavNavigator, para que aqui também utilizemos uma pilha em vez de uma única tela.

46
00:03:16,680 --> 00:03:23,220
E com isso já, se formos para favoritos, temos nosso título aqui, pelo menos temos um cabeçalho que

47
00:03:23,220 --> 00:03:27,000
já prova que estamos usando um navegador de pilha aqui.

48
00:03:27,080 --> 00:03:31,870
Agora, é claro, uma tela não é realmente tão útil, não é algo que quero dizer

49
00:03:31,920 --> 00:03:37,500
aqui, então quero definir opções de navegação específicas para a tela favorita e podemos usá-la aqui quando criamos o

50
00:03:37,560 --> 00:03:43,290
navegador de pilha de favoritos com a forma mais longa onde configuramos a tela e as opções de navegação

51
00:03:43,290 --> 00:03:47,340
para essa tela aqui ou fazemos diretamente em nosso componente, foi o que

52
00:03:47,370 --> 00:03:48,570
fiz até agora,

53
00:03:48,600 --> 00:03:50,330
é o que farei aqui também.

54
00:03:50,340 --> 00:03:55,560
Lá, podemos configurar a tela Favoritos. navigationOpções como esta, use o objeto

55
00:03:55,740 --> 00:03:57,610
aqui, não precisamos da

56
00:03:57,630 --> 00:04:03,900
função, porque não derivarei o nome dinamicamente aqui e nas opções de navegação aqui, simplesmente

57
00:04:03,900 --> 00:04:11,700
definirei o título do cabeçalho como favorito e, é claro, você pode escolher qualquer texto que você quiser aqui

58
00:04:11,700 --> 00:04:12,210
e,

59
00:04:12,330 --> 00:04:17,880
se agora salvarmos, agora vemos nosso título personalizado, que é um pouco melhor.

60
00:04:17,880 --> 00:04:24,090
Agora, como eu disse, ainda não temos as ferramentas para armazenar as refeições como favoritas, algo

61
00:04:24,090 --> 00:04:26,410
que faremos daqui a pouco.

62
00:04:26,430 --> 00:04:29,160
Então, por enquanto, eu só quero

63
00:04:29,160 --> 00:04:36,000
exibir algumas refeições fictícias aqui, digamos, as refeições com o ID M1 e M2, simplesmente duas refeições fictícias e,

64
00:04:36,000 --> 00:04:41,670
para isso, podemos ir para a tela favorita e, em vez de exibir essa exibição

65
00:04:41,670 --> 00:04:45,000
aqui, no fim Quero exibir o mesmo que na

66
00:04:45,000 --> 00:04:51,480
tela de categoria refeições, certo, quero renderizar uma FlatList que, em seguida, renderize meus itens de refeição aqui.

67
00:04:51,480 --> 00:04:53,620
A única diferença é que refeições eu

68
00:04:53,640 --> 00:04:58,300
faço, essa lógica não será a mesma, porque isso é diferente para a minha tela favorita.

69
00:04:58,320 --> 00:05:03,480
No entanto, isso será o mesmo e, como reutilizarei essa lógica de criação de lista

70
00:05:03,480 --> 00:05:09,570
e a única coisa que difere dos dados que renderizaria, faria sentido terceirizar essa lista em um componente separado,

71
00:05:09,750 --> 00:05:15,140
para que possamos reutilizar o componente no tela de categoria de refeições e na tela de favoritos.

72
00:05:15,180 --> 00:05:20,970
Então, na pasta de componentes, adicionarei uma MealList. js e lá dentro, eu quero ter

73
00:05:21,000 --> 00:05:30,210
um componente React, então importe React de React e também precisaremos importar o FlatList de react-native e também precisaremos importar a folha de estilo de

74
00:05:30,210 --> 00:05:34,470
react-native, é claro e então aqui , podemos criar nosso componente

75
00:05:34,470 --> 00:05:42,500
de lista de refeições onde obtemos adereços e exportarmos como padrão a partir de então, também precisaremos de alguns estilos, para

76
00:05:42,500 --> 00:05:43,180
que

77
00:05:43,190 --> 00:05:49,940
possamos adicionar a folha de estilo criada aqui assim e agora quero passar pela lógica da minha lista

78
00:05:49,940 --> 00:05:56,690
da categoria tela de refeição para esse novo componente. Então, cortarei todo esse código jsx, que

79
00:05:56,930 --> 00:06:04,640
retornarei aqui na tela de refeição da categoria, moverei esse aqui e retornarei no componente da

80
00:06:04,910 --> 00:06:06,380
lista de refeições.

81
00:06:06,380 --> 00:06:08,720
Então agora aqui, retornarei essa visualização

82
00:06:08,720 --> 00:06:16,000
e, portanto, também precisamos importar a visualização aqui, é claro. Isso também significa que precisamos mudar o visual, então aqui esse estilo

83
00:06:16,000 --> 00:06:21,340
de tela também pode ser cortado da categoria de refeições e, portanto, aqui, não precisamos mais de uma

84
00:06:21,340 --> 00:06:22,370
folha de estilo,

85
00:06:22,480 --> 00:06:24,700
podemos nos livrar da importação da folha

86
00:06:24,700 --> 00:06:29,650
de estilo também, podemos Livre-se de todas as importações do React Native porque não temos mais nenhum

87
00:06:29,680 --> 00:06:37,000
componente específico do React Native aqui e mova-o para a lista de refeições. Portanto, na folha de estilo, posso adicionar esta tela que

88
00:06:37,000 --> 00:06:42,540
acabei de remover e um nome mais adequado, portanto, provavelmente é listas, então vou renomear isso, tecnicamente

89
00:06:42,610 --> 00:06:47,590
você não precisa renomeá-lo, mas faz sentido, porque agora não é um componente da tela,

90
00:06:47,590 --> 00:06:52,570
é apenas renderizar uma lista que passa a ser a única parte da tela, mas

91
00:06:52,570 --> 00:06:56,590
essa é uma história diferente. Então, vou apenas citar esta lista, colocar meu FlatList lá.

92
00:06:57,960 --> 00:07:02,240
Agora, é claro, as refeições exibidas que eu quero renderizar, que não funcionarão mais, em vez

93
00:07:02,240 --> 00:07:09,170
disso, eu simplesmente espero obter alguns dados dos meus acessórios aqui, talvez nomeie os dados da lista, você pode escolher qualquer nome que desejar aqui, é

94
00:07:09,170 --> 00:07:15,380
claro, e renderizar item de refeição, que também está faltando. Para isso, na categoria refeições, podemos

95
00:07:16,190 --> 00:07:17,030
cortar

96
00:07:17,040 --> 00:07:20,570
esse item de refeição constante aqui, cortá-lo na

97
00:07:20,570 --> 00:07:25,250
tela de categoria refeições e movê-lo para nossa lista de refeições.

98
00:07:25,250 --> 00:07:27,240
Portanto, no componente da lista

99
00:07:27,290 --> 00:07:33,890
de refeições, adicionarei esta constante que mantém essa função de item de refeição de renderização que tem tudo o que

100
00:07:34,160 --> 00:07:37,650
precisa para funcionar, exceto por uma coisa: a importação do item

101
00:07:37,760 --> 00:07:49,160
de refeição está ausente, portanto, precisamos importar o item de refeição de. / MealItem, portanto, do componente do item de refeição. Outra coisa estará faltando aqui no componente da lista de

102
00:07:49,160 --> 00:07:51,470
refeições e esse será o suporte

103
00:07:51,470 --> 00:07:56,300
de navegação porque, como mencionei, o suporte de navegação está disponível apenas em

104
00:07:56,300 --> 00:08:02,390
componentes carregados com a ajuda de um navegador pelo React navigation e somente nesse componente, não

105
00:08:02,420 --> 00:08:04,100
em componentes aninhados.

106
00:08:04,100 --> 00:08:09,620
A questão é que as refeições de categoria são o componente que estamos carregando com a ajuda do navegador

107
00:08:09,620 --> 00:08:12,630
e, se usarmos a lista de refeições lá que faremos

108
00:08:12,690 --> 00:08:18,920
em um segundo, a lista de refeições não terá acesso à navegação de adereços, apenas o componente carregado diretamente tem acesso, mas

109
00:08:19,400 --> 00:08:21,790
esse será um problema fácil de resolver.

110
00:08:21,890 --> 00:08:30,530
Antes de tudo, no entanto, vamos importar a lista de refeições aqui do componente da lista de refeições e retornar a lista de refeições

111
00:08:30,650 --> 00:08:38,690
aqui na categoria refeições e agora a lista de refeições precisa do suporte de dados da lista com o qual estamos trabalhando,

112
00:08:38,690 --> 00:08:39,920
então vamos passar os

113
00:08:39,920 --> 00:08:46,900
dados da lista e isso deve simplesmente apontar para a matriz que queremos renderizar, que neste caso é exibida

114
00:08:46,900 --> 00:08:48,130
refeições e agora,

115
00:08:48,140 --> 00:08:53,110
como mencionei, teremos um problema com o suporte de navegação, mas podemos apenas

116
00:08:53,260 --> 00:09:00,760
encaminhar, podemos usar a navegação, adicionar como um suporte aqui para a lista de refeições e para encaminhar a navegação de

117
00:09:00,790 --> 00:09:01,960
acessórios, é

118
00:09:01,960 --> 00:09:06,170
assim que podemos encaminhar isso facilmente para a lista de refeições.

119
00:09:06,200 --> 00:09:11,660
Portanto, agora na lista de refeições, nesse componente, teremos um suporte de navegação novamente porque

120
00:09:11,660 --> 00:09:16,940
o encaminhamos, estamos adicionando nosso próprio suporte de navegação e apontando os dados que

121
00:09:16,940 --> 00:09:18,810
obtemos no suporte de navegação

122
00:09:18,890 --> 00:09:20,480
fornecido pelo React

123
00:09:20,540 --> 00:09:26,850
navegação, é assim que temos acesso novamente aqui e, com isso, devemos ter uma configuração que funcione, de

124
00:09:27,240 --> 00:09:33,570
modo que seja nossa tela de refeições da categoria. Vamos salvá-lo e ignorar a tela favorita

125
00:09:33,570 --> 00:09:40,110
no momento e apenas ver que nosso navegador de pilha aqui ainda funciona e parece que,

126
00:09:40,160 --> 00:09:48,820
se eu testar, isso definitivamente ainda funciona aqui como antes. Agora vamos ter certeza de que também usamos isso

127
00:09:48,820 --> 00:09:50,620
na tela favorita.

128
00:09:50,620 --> 00:09:55,320
Portanto, aqui na tela favorita, não precisamos importar nada do React Native. Em vez disso, precisamos

129
00:09:55,330 --> 00:10:01,270
apenas importar o componente da lista de refeições que acabamos de criar a partir de componentes e, em seguida, lista de

130
00:10:01,600 --> 00:10:06,670
refeições e simplesmente retornar a lista de refeições e agora a diferença para a categoria A tela de

131
00:10:06,730 --> 00:10:11,500
refeição, onde também retornamos a lista de refeições, é claro, os dados que queremos renderizar, a

132
00:10:11,510 --> 00:10:12,150
lógica

133
00:10:12,190 --> 00:10:14,410
para derivar esses dados, essa é a

134
00:10:14,410 --> 00:10:15,880
diferença e outra diferença entre

135
00:10:15,880 --> 00:10:20,250
os componentes é, obviamente, a configuração de nossas opções de navegação e o título do

136
00:10:20,260 --> 00:10:21,450
cabeçalho que estamos definindo.

137
00:10:22,030 --> 00:10:26,680
Podemos nos livrar da folha de estilo aqui, não precisamos mais disso aqui na tela

138
00:10:26,680 --> 00:10:27,820
favorita e agora

139
00:10:27,970 --> 00:10:30,010
os dados que eu quero renderizar, que

140
00:10:30,100 --> 00:10:31,960
dependem das minhas refeições, por

141
00:10:34,440 --> 00:10:42,060
isso vou importar as refeições, agora a partir dos dados fictícios . arquivo js e, como mencionei, aqui, como

142
00:10:42,080 --> 00:10:47,120
não temos como definir favoritos, usarei alguns favoritos fictícios que surgirem.

143
00:10:47,160 --> 00:10:55,710
Portanto, aqui, minhas refeições favoritas, que podem ser minha matriz de refeições, e aqui eu quero filtrar por duas refeições específicas; portanto, darei uma

144
00:10:55,860 --> 00:10:57,500
olhada em cada refeição,

145
00:10:57,540 --> 00:11:05,510
mas só retornarei verdadeiro se a refeição. id é igual a M1 ou se refeição. id é igual a M2 e,

146
00:11:05,520 --> 00:11:09,480
é claro, isso é apenas uma lógica fictícia, para termos

147
00:11:09,600 --> 00:11:15,330
algo aqui. Substituímos isso mais tarde, quando realmente soubermos como gerenciar nosso estado e como

148
00:11:15,330 --> 00:11:17,580
gerenciar os favoritos atualmente definidos.

149
00:11:17,610 --> 00:11:23,730
Agora, para a lista de refeições, para o nosso componente aqui, podemos

150
00:11:23,820 --> 00:11:36,840
encaminhar o suporte de dados da lista novamente, o que precisamos lá, para que possamos encaminhar os dados da lista e definir isso igual a refeições favoritas, assim.

151
00:11:36,850 --> 00:11:38,980
Portanto, agora também devemos ter alguns

152
00:11:39,010 --> 00:11:40,990
favoritos, e temos dois favoritos;

153
00:11:40,990 --> 00:11:47,440
no entanto, se eu clicar nele, ficaremos indefinidos não é um objeto em que tentamos chamar adereços de navegação

154
00:11:48,670 --> 00:11:54,520
de navegação e sim, o problema é que a lista de refeições, como mencionei, estamos usando o suporte

155
00:11:54,550 --> 00:11:59,560
de navegação e que está disponível apenas no componente que é carregado diretamente por

156
00:11:59,590 --> 00:12:05,440
meio de um navegador. Nesse caso, é a tela favorita e na categoria refeições, resolvemos isso encaminhando

157
00:12:05,440 --> 00:12:11,080
a navegação suporte, é claro que precisamos fazer a mesma coisa aqui para nossa tela favorita, portanto,

158
00:12:11,080 --> 00:12:17,170
precisamos fornecer esse suporte de navegação aqui na lista de refeições e encaminhar acessórios de navegação para que

159
00:12:17,170 --> 00:12:22,800
o suporte de navegação com o método de navegação esteja disponível no componente lista de refeições também.

160
00:12:22,870 --> 00:12:29,940
Agora, com isso, se formos para os favoritos, poderemos realmente ir para a tela de detalhes.

161
00:12:30,130 --> 00:12:37,690
Então, isso está funcionando, é bastante decente, muito bom. Como você vê, esses dois navegadores de pilha também funcionam independentemente um do outro,

162
00:12:37,720 --> 00:12:38,700
podemos estar na

163
00:12:38,700 --> 00:12:44,200
tela de detalhes em ambas as pilhas separadamente, aqui estou na tela de detalhes do salmão na guia de refeições e

164
00:12:44,470 --> 00:12:50,410
posso ir ao brinde Havaí tela de detalhes na guia Favoritos. Podemos voltar aqui na guia de refeições e ainda

165
00:12:50,530 --> 00:12:54,840
estou na página de detalhes das torradas no Havaí aqui na pilha de favoritos.

166
00:12:54,940 --> 00:12:57,670
Portanto, essas duas pilhas funcionam separadas umas das outras,

167
00:12:57,700 --> 00:13:00,350
totalmente independentes, e é assim que deve ser, e

168
00:13:00,610 --> 00:13:06,130
é assim que podemos reutilizar alguma lógica e como podemos ter pilhas diferentes mescladas no mesmo navegador de guias

169
00:13:06,130 --> 00:13:07,760
e mesmo que alguma lógica

170
00:13:07,810 --> 00:13:11,900
ainda esteja faltando , a lógica para realmente adicionar favoritos, este é um grande

171
00:13:11,950 --> 00:13:17,620
passo à frente e espero que mostre o poder da navegação do React e como configurar esse padrão de navegação

172
00:13:17,620 --> 00:13:24,490
comum em que você tem guias e, em seguida, diferentes pilhas aninhadas. Está faltando um padrão de navegação que eu quero mostrar

173
00:13:24,490 --> 00:13:25,920
e que é uma

174
00:13:26,080 --> 00:13:27,210
gaveta lateral.