Então, vamos nos concentrar na tela de detalhes da refeição
por
enquanto, então a parte aqui onde vemos os detalhes da receita selecionada.
No momento, temos apenas o conteúdo fictício lá, na tela de detalhes da refeição e, claro, esse não é o
conteúdo que eu realmente quero ter lá, em
vez disso, o que deveria estar lá?
Bem, se dermos uma olhada no nosso modelo de refeição, provavelmente faz sentido ter a imagem
lá, lembre-se de que o título já é mostrado em nosso cabeçalho; portanto,
faz sentido ter a imagem aqui no topo, talvez e abaixo disso, talvez apenas repita a duração, a acessibilidade e a complexidade, exatamente
como fazemos aqui abaixo da receita e também
abaixo, listando todos os ingredientes e as etapas necessárias para preparar o prato. Portanto, é no final o que eu quero ter nesta
página aqui no MealDetailScreen e, portanto, acho que faz sentido, em primeiro
lugar, adicionar uma exibição de rolagem, porque certamente teremos muito conteúdo por lá
que provavelmente não cabe em uma tela e certamente não em todos os tamanhos possíveis de dispositivos.
Então, adicionarei uma exibição de rolagem aqui e agruparei isso em torno do meu conteúdo aqui.
Agora, teremos algumas seções diferentes aqui,
por exemplo, na parte superior, quero ter minha imagem e, para isso, também importarei o
componente de imagem do React Native aqui para que possamos renderizar uma imagem aqui,
não uma imagem de plano de fundo,
mas uma imagem normal e eu quero adicionar isso, digamos aqui bem no topo, algo assim.
Agora, depois da imagem, quero ter uma visualização com a duração, acessibilidade e complexidade como mencionei, portanto,
basicamente a mesma configuração que temos no item de refeição, isso aqui você pode dizer e, portanto, vou
copiar a visualização de lá e então podemos ajustá-lo conforme necessário aqui no MealDetailScreen, então
substituirei essa visualização pela visualização de cópia.
É claro que isso exige que importemos o componente
de texto
padrão aqui, então vamos adicionar isso, vamos importar o texto padrão
do texto padrão dos componentes. Portanto, essa é a próxima linha
e, depois disso, quero ter meus ingredientes e as etapas que você precisa executar.
Então, podemos adicionar um texto aqui onde dizemos ingredientes e lá, também quero aplicar um estilo, como estilos texto, título, algo assim ou apenas um título, porque
quero ter um cabeçalho em negrito
aqui, talvez aumentar o tamanho da fonte. Abaixo disso, tenho minha lista de ingredientes, portanto,
lista de ingredientes e, claro, esse não é o conteúdo final. Em vez disso, apresentaremos uma
lista aqui e abaixo disso, repetirei isso aqui, porque quero ter um título onde digo etapas e, em seguida, uma lista
de etapas abaixo disso e agora vou me livrar desse conteúdo antigo e é com isso que
quero trabalhar.
Agora, é claro, todos os estilos estão ausentes e também sustentam a duração e assim por diante,
que não produzem nada. Em vez disso, temos que trabalhar com a refeição selecionada aqui, duração da refeição
selecionada, duração da refeição, complexidade da refeição selecionada, acessibilidade da refeição selecionada e para a imagem por exemplo, quero adicionar uma fonte aqui, uma vez que é uma imagem de
rede, é um objeto com uma propriedade URI que aponta para selectedMeal. imageUrl para carregar isso e também precisamos aplicar um
estilo lá, para definir uma largura e uma altura, então aqui eu
quero apontar para os estilos image digamos e todos esses estilos estão ausentes como
eu disse, então vamos adicionar isso. Aqui para este estilo, também quero dizer estilos. detalhes, talvez porque estamos exibindo os detalhes desta
receita e vamos para a folha de estilo, portanto, remova a tela da qual não
precisamos
mais; em vez disso, vamos adicionar imagem e detalhes. Agora, para obter detalhes, precisamos definir a direção da flexão para a linha, pois esses
devem ser todos os detalhes em uma linha.
Podemos adicionar um pouco de preenchimento em todas as direções, talvez 15, e também adicionar um conteúdo justificado
de espaço para distribuir bem nossos itens de detalhes aqui, o que deve ser bom.
Além disso, na imagem aqui, também precisamos adicionar um estilo, a largura deve ser 100%, digamos, para
tirar toda a largura disponível e para a altura, eu vou com 200,
embora, claro, você
possa calcule isso dinamicamente com a API de dimensões, por exemplo, para
obter sempre uma certa fração da altura disponível ou simplesmente brincar com valores diferentes aqui.
Eu vou com isso e dou uma olhada aqui e isso
não parece muito surrado, isso
não é tão ruim.
Agora você também pode definitivamente tentar alguns trabalhos de bônus aqui, algumas tarefas de bônus e, por exemplo,
colorir esses detalhes - simples, acessíveis e a duração, dependendo se é bastante curta ou depende dos
diferentes valores que você possui para a simplicidade, a complexidade e a acessibilidade .
Não é algo que eu farei aqui, mas você pode dar uma olhada nos dados das refeições, é claro, para ver quais
valores temos lá para derivar o que é curto, qual é a duração média, o que é uma duração longa e quais valores estão
sendo usados para complexidade e assim por diante, você pode adicionar algumas verificações if para aplicar um estilo diferente
aos diferentes valores que estamos produzindo aqui na tela de detalhes da refeição para esses detalhes, para que você possa colorir o texto
de maneira diferente, dependendo se é longo ou não. Não é algo que farei aqui, porque
é apenas um trabalho extra que realmente não adiciona muito à navegação, que é o
foco deste módulo.
Então, em vez disso, vou me concentrar nos ingredientes e nas etapas e, aí, a primeira etapa é garantir que o título
aqui seja denominado corretamente.
Então, vamos adicionar um título à folha de estilo e, lá, eu adicionarei a família de fontes e defina para abrir
sans bold, defina o tamanho da fonte para 22 talvez e defina o alinhamento do texto para o centro para centralizar o
texto no meio e com isso se Nós verificamos isso, isso parece muito bom.
Agora eu também quero exibir meus ingredientes em minhas etapas, é claro, e para isso, é importante
entender que nos dados fictícios, essas são matrizes, esses são
meus ingredientes, por exemplo, essas
são minhas etapas e você vê que há apenas texto nessas matrizes. Então, eu só quero exibir meu texto aqui como uma
lista e não usarei um FlatList porque você pode fazer isso, você pode ter contêineres roláveis lá, por assim dizer,
mas eu simplesmente processarei os ingredientes e as etapas em cima de cada de outros.
Portanto, aqui, podemos usar uma boa e antiga abordagem que conhecemos do Vanilla React ou React for
Web, à qual também mostrei anteriormente no curso. Podemos usar nossa refeição selecionada e, lá, os ingredientes, que são
uma série de seqüências de caracteres e mapear isso em uma
variedade de componentes, é assim que você pode gerar uma lista de dados no React e também no React
Native, e frequentemente usa o FlatList, mas aqui estamos. não é necessário, porque não
é uma quantidade infinita; portanto, não precisamos dessas otimizações e temos uma visualização de rolagem em volta da tela
inteira, para que possamos também rolar se estiver produzindo mais do que cabe na tela,
portanto, estamos absolutamente bem usando essa
abordagem e, portanto, aqui, terei meu único ingrediente nessa função map e map é um método incorporado
ao JavaScript, como você sabe,
e aqui precisamos retornar um elemento jsx agora e o
que eu quero retorno é um componente de texto onde eu simplesmente produzo ingrediente porque ingredientes é uma
matriz de
seqüências de caracteres, então ingrediente é apenas
uma sequência e aqui também precisamos fornecer uma chave, isso é um requisito do
React e podemos usar o ingrediente como chave porque sempre tenha cada ingrediente apenas uma vez.
Portanto, é garantido que isso é único. É
assim que nossas refeições são preparadas e, com isso,
se salvarmos isso e darmos uma olhada em uma receita aqui, veremos nossos ingredientes. Agora, para o estilo, certamente podemos fazer alguma
coisa lá e farei
isso em um segundo, mas antes de fazer isso, deixe-me repetir isso para
as etapas aqui, substitua este texto por selectedMeal. passos e, em seguida, imprima cada passo aqui, que também é apenas
uma string e também é único em um texto e, com isso adicionado, também devemos ver os passos para a nossa refeição, de fato fazemos.
Agora, novamente, o estilo pode ser melhorado um pouco e faremos exatamente isso,
e acho que faz sentido criar um componente separado ou função de renderização para isso, e criarei um componente separado, vamos
armazená-lo no mesmo arquivo no entanto, porque nós realmente o usamos apenas nesse arquivo, mas você também pode
criar
um novo arquivo, totalmente com você. Lá eu terei meu
item de lista que recebe adereços de onde eu retorno e agora aqui quero usar uma visualização
que estou importando como invólucro para que eu possa estilizar esse contêiner e,
lá, ter meu texto onde eu produzo adereços filhos e agora essa exibição aqui terá um
estilo de estilos. ListItem, talvez, para que possamos
estilizar isso muito bem e aqui, é claro, não quero usar texto, mas, na verdade,
texto padrão, também
aqui, é claro, para aproveitarmos nosso próprio texto personalizado.
Agora, para o estilo do item de lista aqui, vamos descer para a folha de estilo e adicionar item de lista e
cada item da lista deve ter alguma margem, uma margem vertical digamos 10 e uma margem horizontal digamos 20,
mais espaçamento para esquerda e direita e também vamos adicionar uma cor de borda de uma cor cinza claro aqui com #ccc e uma
largura de borda de 1, veremos como isso se
parece e adicionar um pouco de preenchimento, 10 em todas as direções e verei como isso
se parece.
Agora, apenas precisamos garantir que usamos nosso componente de item de lista e o retornamos que, em vez de texto aqui ao
produzir os ingredientes, ainda passamos o ingrediente entre as tags de abertura e fechamento
de nosso próprio componente personalizado, porque lá estamos usando adereços filhos que usam o conteúdo que transmitimos
entre as tags de abertura e fechamento e
fazemos o mesmo em nossas etapas. Com isso,
vamos dar uma olhada
nisso, sim, não parece tão ruim. Damos nossos passos aqui, obtemos nossos ingredientes, é claro que você pode
refinar esse estilo, ajustar seus requisitos, da maneira que deseja, mas estou muito feliz com isso e com isso, temos um
detalhe básico tela e, é claro, essa tela de detalhes também funciona para nossos favoritos, porque estamos
usando uma e a mesma tela lá.
Então, isso parece muito bom, a tela do filtro é o que está faltando agora.