Agora, com as guias adicionadas, estamos perdendo conteúdo na tela favorita.
Agora, ainda não temos a funcionalidade de adicionar favoritos. Se clicarmos no ícone de estrela, isso não faz nada e,
a propósito,
estou ciente de que também estamos perdendo conteúdo aqui,
adicionaremos isso mais tarde.
Portanto, clicar no ícone de estrela ainda não faz nada e só podemos fazer
isso um pouco mais
tarde. Ainda assim, quero preencher essa tela favorita um pouco mais, pelo menos com algumas refeições fictícias que
estamos carregando lá digamos
e pelo menos com a funcionalidade de também ir para o MealDetailScreen lá porque, no final, a
idéia aqui é que temos uma lista de refeições aqui, assim
como a temos aqui depois que selecionamos uma categoria e que podemos tocar uma refeição para ir para
a página de
detalhes, assim como podemos fazer no navegador de refeições, então no navegador da pilha de refeições devo
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
para
os nossos recursos favoritos nesta aplicação, é disso que precisamos aqui;
a propósito, isso também nos dará um cabeçalho do qual também estamos perdendo.
Obviamente, isso não é muito
difícil de implementar, podemos simplesmente criar outro navegador de pilha acima da nossa tabScreenConfig, talvez, e isso configurará o navegador
de pilha para a nossa pilha favorita.
Portanto, o objeto que passamos aqui tem que definir todas as telas que queremos ter nessa
pilha e essa seria a própria tela de favoritos com a lista de
nossas refeições favoritas. Quero apontar para a tela de favoritos e, em seguida, quero ter um detalhes da
refeição e apontarei para MealDetailScreen e já estamos usando o MealDetailScreen aqui em nosso navegador de refeições, em nosso
outro navegador de pilha,
mas tudo
bem, você pode usar a mesma tela em diferentes navegadores de
pilha, não há nada de errado em este.
Para que possamos usar o MealDetailScreen aqui também no navegador de pilha de favoritos e agora só quero ter certeza
de que também copio minhas opções aqui, minhas opções de navegação padrão, esse segundo argumento, na
verdade, para criar o navegador de pilha, para o navegador de refeições para meus favoritos navegador de
pilha também.
Então, aqui como um segundo argumento para criar o navegador da pilha, copio esse
objeto em que configuro minhas opções de navegação padrão para que, para essa pilha, tenha os mesmos
padrões, o mesmo estilo de cabeçalho e, portanto, é claro, também podemos corte isso daqui e remova-o
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
usar o defaultStackNavOptions aqui na pilha do navegador de refeições e também aqui na nossa
Os favoritos empilham o navegador e também armazenarei isso na constante FavNavigator, é claro que você pode nomear
essa constante o que quiser.
Agora é o FavNavigator, de modo
que, no final, criei o componente stack navigator que eu quero usar no meu tabScreenConfig, para as refeições que já
estávamos usando o stack navigator, para os favoritos eu estava usando a tela favorita e isso
agora precisa mudar,
agora deve ser o FavNavigator, para que aqui também utilizemos uma pilha em vez de uma única tela.
E com isso já, se formos para favoritos, temos nosso título aqui, pelo menos temos um cabeçalho que
já prova que estamos usando um navegador de pilha aqui.
Agora, é claro, uma tela não é realmente tão útil, não é algo que quero dizer
aqui, então quero definir opções de navegação específicas para a tela favorita e podemos usá-la aqui quando criamos o
navegador de pilha de favoritos com a forma mais longa onde configuramos a tela e as opções de navegação
para essa tela aqui ou fazemos diretamente em nosso componente, foi o que
fiz até agora,
é o que farei aqui também.
Lá, podemos configurar a tela Favoritos. navigationOpções como esta, use o objeto
aqui, não precisamos da
função, porque não derivarei o nome dinamicamente aqui e nas opções de navegação aqui, simplesmente
definirei o título do cabeçalho como favorito e, é claro, você pode escolher qualquer texto que você quiser aqui
e,
se agora salvarmos, agora vemos nosso título personalizado, que é um pouco melhor.
Agora, como eu disse, ainda não temos as ferramentas para armazenar as refeições como favoritas, algo
que faremos daqui a pouco.
Então, por enquanto, eu só quero
exibir algumas refeições fictícias aqui, digamos, as refeições com o ID M1 e M2, simplesmente duas refeições fictícias e,
para isso, podemos ir para a tela favorita e, em vez de exibir essa exibição
aqui, no fim Quero exibir o mesmo que na
tela de categoria refeições, certo, quero renderizar uma FlatList que, em seguida, renderize meus itens de refeição aqui.
A única diferença é que refeições eu
faço, essa lógica não será a mesma, porque isso é diferente para a minha tela favorita.
No entanto, isso será o mesmo e, como reutilizarei essa lógica de criação de lista
e a única coisa que difere dos dados que renderizaria, faria sentido terceirizar essa lista em um componente separado,
para que possamos reutilizar o componente no tela de categoria de refeições e na tela de favoritos.
Então, na pasta de componentes, adicionarei uma MealList. js e lá dentro, eu quero ter
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
react-native, é claro e então aqui , podemos criar nosso componente
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
que
possamos adicionar a folha de estilo criada aqui assim e agora quero passar pela lógica da minha lista
da categoria tela de refeição para esse novo componente. Então, cortarei todo esse código jsx, que
retornarei aqui na tela de refeição da categoria, moverei esse aqui e retornarei no componente da
lista de refeições.
Então agora aqui, retornarei essa visualização
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
de tela também pode ser cortado da categoria de refeições e, portanto, aqui, não precisamos mais de uma
folha de estilo,
podemos nos livrar da importação da folha
de estilo também, podemos Livre-se de todas as importações do React Native porque não temos mais nenhum
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
acabei de remover e um nome mais adequado, portanto, provavelmente é listas, então vou renomear isso, tecnicamente
você não precisa renomeá-lo, mas faz sentido, porque agora não é um componente da tela,
é apenas renderizar uma lista que passa a ser a única parte da tela, mas
essa é uma história diferente. Então, vou apenas citar esta lista, colocar meu FlatList lá.
Agora, é claro, as refeições exibidas que eu quero renderizar, que não funcionarão mais, em vez
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, é
claro, e renderizar item de refeição, que também está faltando. Para isso, na categoria refeições, podemos
cortar
esse item de refeição constante aqui, cortá-lo na
tela de categoria refeições e movê-lo para nossa lista de refeições.
Portanto, no componente da lista
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
precisa para funcionar, exceto por uma coisa: a importação do item
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
refeições e esse será o suporte
de navegação porque, como mencionei, o suporte de navegação está disponível apenas em
componentes carregados com a ajuda de um navegador pelo React navigation e somente nesse componente, não
em componentes aninhados.
A questão é que as refeições de categoria são o componente que estamos carregando com a ajuda do navegador
e, se usarmos a lista de refeições lá que faremos
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
esse será um problema fácil de resolver.
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
aqui na categoria refeições e agora a lista de refeições precisa do suporte de dados da lista com o qual estamos trabalhando,
então vamos passar os
dados da lista e isso deve simplesmente apontar para a matriz que queremos renderizar, que neste caso é exibida
refeições e agora,
como mencionei, teremos um problema com o suporte de navegação, mas podemos apenas
encaminhar, podemos usar a navegação, adicionar como um suporte aqui para a lista de refeições e para encaminhar a navegação de
acessórios, é
assim que podemos encaminhar isso facilmente para a lista de refeições.
Portanto, agora na lista de refeições, nesse componente, teremos um suporte de navegação novamente porque
o encaminhamos, estamos adicionando nosso próprio suporte de navegação e apontando os dados que
obtemos no suporte de navegação
fornecido pelo React
navegação, é assim que temos acesso novamente aqui e, com isso, devemos ter uma configuração que funcione, de
modo que seja nossa tela de refeições da categoria. Vamos salvá-lo e ignorar a tela favorita
no momento e apenas ver que nosso navegador de pilha aqui ainda funciona e parece que,
se eu testar, isso definitivamente ainda funciona aqui como antes. Agora vamos ter certeza de que também usamos isso
na tela favorita.
Portanto, aqui na tela favorita, não precisamos importar nada do React Native. Em vez disso, precisamos
apenas importar o componente da lista de refeições que acabamos de criar a partir de componentes e, em seguida, lista de
refeições e simplesmente retornar a lista de refeições e agora a diferença para a categoria A tela de
refeição, onde também retornamos a lista de refeições, é claro, os dados que queremos renderizar, a
lógica
para derivar esses dados, essa é a
diferença e outra diferença entre
os componentes é, obviamente, a configuração de nossas opções de navegação e o título do
cabeçalho que estamos definindo.
Podemos nos livrar da folha de estilo aqui, não precisamos mais disso aqui na tela
favorita e agora
os dados que eu quero renderizar, que
dependem das minhas refeições, por
isso vou importar as refeições, agora a partir dos dados fictícios . arquivo js e, como mencionei, aqui, como
não temos como definir favoritos, usarei alguns favoritos fictícios que surgirem.
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
olhada em cada refeição,
mas só retornarei verdadeiro se a refeição. id é igual a M1 ou se refeição. id é igual a M2 e,
é claro, isso é apenas uma lógica fictícia, para termos
algo aqui. Substituímos isso mais tarde, quando realmente soubermos como gerenciar nosso estado e como
gerenciar os favoritos atualmente definidos.
Agora, para a lista de refeições, para o nosso componente aqui, podemos
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.
Portanto, agora também devemos ter alguns
favoritos, e temos dois favoritos;
no entanto, se eu clicar nele, ficaremos indefinidos não é um objeto em que tentamos chamar adereços de navegação
de navegação e sim, o problema é que a lista de refeições, como mencionei, estamos usando o suporte
de navegação e que está disponível apenas no componente que é carregado diretamente por
meio de um navegador. Nesse caso, é a tela favorita e na categoria refeições, resolvemos isso encaminhando
a navegação suporte, é claro que precisamos fazer a mesma coisa aqui para nossa tela favorita, portanto,
precisamos fornecer esse suporte de navegação aqui na lista de refeições e encaminhar acessórios de navegação para que
o suporte de navegação com o método de navegação esteja disponível no componente lista de refeições também.
Agora, com isso, se formos para os favoritos, poderemos realmente ir para a tela de detalhes.
Então, isso está funcionando, é bastante decente, muito bom. Como você vê, esses dois navegadores de pilha também funcionam independentemente um do outro,
podemos estar na
tela de detalhes em ambas as pilhas separadamente, aqui estou na tela de detalhes do salmão na guia de refeições e
posso ir ao brinde Havaí tela de detalhes na guia Favoritos. Podemos voltar aqui na guia de refeições e ainda
estou na página de detalhes das torradas no Havaí aqui na pilha de favoritos.
Portanto, essas duas pilhas funcionam separadas umas das outras,
totalmente independentes, e é assim que deve ser, e
é assim que podemos reutilizar alguma lógica e como podemos ter pilhas diferentes mescladas no mesmo navegador de guias
e mesmo que alguma lógica
ainda esteja faltando , a lógica para realmente adicionar favoritos, este é um grande
passo à frente e espero que mostre o poder da navegação do React e como configurar esse padrão de navegação
comum em que você tem guias e, em seguida, diferentes pilhas aninhadas. Está faltando um padrão de navegação que eu quero mostrar
e que é uma
gaveta lateral.