1
00:00:02,420 --> 00:00:06,140
Então, vamos nos concentrar na tela de detalhes da refeição

2
00:00:06,170 --> 00:00:06,770
por

3
00:00:09,660 --> 00:00:13,950
enquanto, então a parte aqui onde vemos os detalhes da receita selecionada.

4
00:00:14,070 --> 00:00:19,590
No momento, temos apenas o conteúdo fictício lá, na tela de detalhes da refeição e, claro, esse não é o

5
00:00:19,590 --> 00:00:21,810
conteúdo que eu realmente quero ter lá, em

6
00:00:22,020 --> 00:00:24,190
vez disso, o que deveria estar lá?

7
00:00:24,210 --> 00:00:30,280
Bem, se dermos uma olhada no nosso modelo de refeição, provavelmente faz sentido ter a imagem

8
00:00:30,330 --> 00:00:35,340
lá, lembre-se de que o título já é mostrado em nosso cabeçalho; portanto,

9
00:00:35,340 --> 00:00:43,710
faz sentido ter a imagem aqui no topo, talvez e abaixo disso, talvez apenas repita a duração, a acessibilidade e a complexidade, exatamente

10
00:00:43,710 --> 00:00:47,140
como fazemos aqui abaixo da receita e também

11
00:00:47,370 --> 00:00:56,730
abaixo, listando todos os ingredientes e as etapas necessárias para preparar o prato. Portanto, é no final o que eu quero ter nesta

12
00:00:56,730 --> 00:01:02,170
página aqui no MealDetailScreen e, portanto, acho que faz sentido, em primeiro

13
00:01:02,340 --> 00:01:08,220
lugar, adicionar uma exibição de rolagem, porque certamente teremos muito conteúdo por lá

14
00:01:08,220 --> 00:01:15,340
que provavelmente não cabe em uma tela e certamente não em todos os tamanhos possíveis de dispositivos.

15
00:01:15,390 --> 00:01:22,320
Então, adicionarei uma exibição de rolagem aqui e agruparei isso em torno do meu conteúdo aqui.

16
00:01:22,330 --> 00:01:24,920
Agora, teremos algumas seções diferentes aqui,

17
00:01:25,030 --> 00:01:30,750
por exemplo, na parte superior, quero ter minha imagem e, para isso, também importarei o

18
00:01:30,750 --> 00:01:36,300
componente de imagem do React Native aqui para que possamos renderizar uma imagem aqui,

19
00:01:36,300 --> 00:01:39,030
não uma imagem de plano de fundo,

20
00:01:39,270 --> 00:01:45,260
mas uma imagem normal e eu quero adicionar isso, digamos aqui bem no topo, algo assim.

21
00:01:45,260 --> 00:01:51,390
Agora, depois da imagem, quero ter uma visualização com a duração, acessibilidade e complexidade como mencionei, portanto,

22
00:01:51,400 --> 00:01:57,930
basicamente a mesma configuração que temos no item de refeição, isso aqui você pode dizer e, portanto, vou

23
00:01:57,930 --> 00:02:03,330
copiar a visualização de lá e então podemos ajustá-lo conforme necessário aqui no MealDetailScreen, então

24
00:02:03,360 --> 00:02:06,220
substituirei essa visualização pela visualização de cópia.

25
00:02:06,360 --> 00:02:10,510
É claro que isso exige que importemos o componente

26
00:02:10,710 --> 00:02:11,700
de texto

27
00:02:11,720 --> 00:02:16,370
padrão aqui, então vamos adicionar isso, vamos importar o texto padrão

28
00:02:16,610 --> 00:02:21,450
do texto padrão dos componentes. Portanto, essa é a próxima linha

29
00:02:21,500 --> 00:02:26,580
e, depois disso, quero ter meus ingredientes e as etapas que você precisa executar.

30
00:02:26,890 --> 00:02:39,790
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

31
00:02:39,820 --> 00:02:42,910
quero ter um cabeçalho em negrito

32
00:02:45,630 --> 00:02:52,320
aqui, talvez aumentar o tamanho da fonte. Abaixo disso, tenho minha lista de ingredientes, portanto,

33
00:02:52,320 --> 00:02:58,770
lista de ingredientes e, claro, esse não é o conteúdo final. Em vez disso, apresentaremos uma

34
00:02:58,770 --> 00:03:07,260
lista aqui e abaixo disso, repetirei isso aqui, porque quero ter um título onde digo etapas e, em seguida, uma lista

35
00:03:07,980 --> 00:03:14,760
de etapas abaixo disso e agora vou me livrar desse conteúdo antigo e é com isso que

36
00:03:14,760 --> 00:03:15,940
quero trabalhar.

37
00:03:15,960 --> 00:03:20,790
Agora, é claro, todos os estilos estão ausentes e também sustentam a duração e assim por diante,

38
00:03:20,790 --> 00:03:26,080
que não produzem nada. Em vez disso, temos que trabalhar com a refeição selecionada aqui, duração da refeição

39
00:03:26,130 --> 00:03:34,560
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

40
00:03:34,590 --> 00:03:42,210
rede, é um objeto com uma propriedade URI que aponta para selectedMeal. imageUrl para carregar isso e também precisamos aplicar um

41
00:03:42,240 --> 00:03:47,210
estilo lá, para definir uma largura e uma altura, então aqui eu

42
00:03:47,310 --> 00:03:53,190
quero apontar para os estilos image digamos e todos esses estilos estão ausentes como

43
00:03:53,190 --> 00:04:02,470
eu disse, então vamos adicionar isso. Aqui para este estilo, também quero dizer estilos. detalhes, talvez porque estamos exibindo os detalhes desta

44
00:04:02,470 --> 00:04:08,680
receita e vamos para a folha de estilo, portanto, remova a tela da qual não

45
00:04:08,680 --> 00:04:09,340
precisamos

46
00:04:09,520 --> 00:04:16,920
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

47
00:04:16,920 --> 00:04:19,180
devem ser todos os detalhes em uma linha.

48
00:04:19,380 --> 00:04:27,060
Podemos adicionar um pouco de preenchimento em todas as direções, talvez 15, e também adicionar um conteúdo justificado

49
00:04:27,120 --> 00:04:33,550
de espaço para distribuir bem nossos itens de detalhes aqui, o que deve ser bom.

50
00:04:35,210 --> 00:04:42,270
Além disso, na imagem aqui, também precisamos adicionar um estilo, a largura deve ser 100%, digamos, para

51
00:04:42,440 --> 00:04:48,100
tirar toda a largura disponível e para a altura, eu vou com 200,

52
00:04:48,140 --> 00:04:49,580
embora, claro, você

53
00:04:49,580 --> 00:04:54,680
possa calcule isso dinamicamente com a API de dimensões, por exemplo, para

54
00:04:54,740 --> 00:05:00,720
obter sempre uma certa fração da altura disponível ou simplesmente brincar com valores diferentes aqui.

55
00:05:00,890 --> 00:05:03,520
Eu vou com isso e dou uma olhada aqui e isso

56
00:05:03,740 --> 00:05:04,940
não parece muito surrado, isso

57
00:05:04,970 --> 00:05:06,130
não é tão ruim.

58
00:05:07,450 --> 00:05:13,990
Agora você também pode definitivamente tentar alguns trabalhos de bônus aqui, algumas tarefas de bônus e, por exemplo,

59
00:05:13,990 --> 00:05:20,200
colorir esses detalhes - simples, acessíveis e a duração, dependendo se é bastante curta ou depende dos

60
00:05:20,200 --> 00:05:25,810
diferentes valores que você possui para a simplicidade, a complexidade e a acessibilidade .

61
00:05:25,810 --> 00:05:31,150
Não é algo que eu farei aqui, mas você pode dar uma olhada nos dados das refeições, é claro, para ver quais

62
00:05:31,150 --> 00:05:37,090
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

63
00:05:37,090 --> 00:05:41,800
sendo usados para complexidade e assim por diante, você pode adicionar algumas verificações if para aplicar um estilo diferente

64
00:05:41,800 --> 00:05:47,470
aos diferentes valores que estamos produzindo aqui na tela de detalhes da refeição para esses detalhes, para que você possa colorir o texto

65
00:05:47,470 --> 00:05:52,360
de maneira diferente, dependendo se é longo ou não. Não é algo que farei aqui, porque

66
00:05:52,360 --> 00:05:58,150
é apenas um trabalho extra que realmente não adiciona muito à navegação, que é o

67
00:05:58,150 --> 00:05:59,740
foco deste módulo.

68
00:05:59,740 --> 00:06:08,110
Então, em vez disso, vou me concentrar nos ingredientes e nas etapas e, aí, a primeira etapa é garantir que o título

69
00:06:08,530 --> 00:06:10,250
aqui seja denominado corretamente.

70
00:06:10,330 --> 00:06:17,660
Então, vamos adicionar um título à folha de estilo e, lá, eu adicionarei a família de fontes e defina para abrir

71
00:06:19,080 --> 00:06:26,790
sans bold, defina o tamanho da fonte para 22 talvez e defina o alinhamento do texto para o centro para centralizar o

72
00:06:26,810 --> 00:06:32,160
texto no meio e com isso se Nós verificamos isso, isso parece muito bom.

73
00:06:32,230 --> 00:06:37,540
Agora eu também quero exibir meus ingredientes em minhas etapas, é claro, e para isso, é importante

74
00:06:37,540 --> 00:06:40,770
entender que nos dados fictícios, essas são matrizes, esses são

75
00:06:40,780 --> 00:06:42,480
meus ingredientes, por exemplo, essas

76
00:06:42,490 --> 00:06:49,540
são minhas etapas e você vê que há apenas texto nessas matrizes. Então, eu só quero exibir meu texto aqui como uma

77
00:06:49,720 --> 00:06:56,410
lista e não usarei um FlatList porque você pode fazer isso, você pode ter contêineres roláveis lá, por assim dizer,

78
00:06:56,410 --> 00:07:01,470
mas eu simplesmente processarei os ingredientes e as etapas em cima de cada de outros.

79
00:07:01,480 --> 00:07:07,690
Portanto, aqui, podemos usar uma boa e antiga abordagem que conhecemos do Vanilla React ou React for

80
00:07:07,690 --> 00:07:14,140
Web, à qual também mostrei anteriormente no curso. Podemos usar nossa refeição selecionada e, lá, os ingredientes, que são

81
00:07:14,140 --> 00:07:17,640
uma série de seqüências de caracteres e mapear isso em uma

82
00:07:17,650 --> 00:07:23,230
variedade de componentes, é assim que você pode gerar uma lista de dados no React e também no React

83
00:07:23,230 --> 00:07:27,660
Native, e frequentemente usa o FlatList, mas aqui estamos. não é necessário, porque não

84
00:07:27,670 --> 00:07:33,300
é uma quantidade infinita; portanto, não precisamos dessas otimizações e temos uma visualização de rolagem em volta da tela

85
00:07:33,400 --> 00:07:38,050
inteira, para que possamos também rolar se estiver produzindo mais do que cabe na tela,

86
00:07:38,050 --> 00:07:39,950
portanto, estamos absolutamente bem usando essa

87
00:07:39,950 --> 00:07:45,220
abordagem e, portanto, aqui, terei meu único ingrediente nessa função map e map é um método incorporado

88
00:07:45,220 --> 00:07:46,900
ao JavaScript, como você sabe,

89
00:07:46,990 --> 00:07:50,030
e aqui precisamos retornar um elemento jsx agora e o

90
00:07:50,170 --> 00:07:55,660
que eu quero retorno é um componente de texto onde eu simplesmente produzo ingrediente porque ingredientes é uma

91
00:07:55,720 --> 00:07:56,880
matriz de

92
00:07:56,890 --> 00:07:59,010
seqüências de caracteres, então ingrediente é apenas

93
00:07:59,020 --> 00:08:03,280
uma sequência e aqui também precisamos fornecer uma chave, isso é um requisito do

94
00:08:03,280 --> 00:08:07,980
React e podemos usar o ingrediente como chave porque sempre tenha cada ingrediente apenas uma vez.

95
00:08:07,990 --> 00:08:10,230
Portanto, é garantido que isso é único. É

96
00:08:10,240 --> 00:08:12,510
assim que nossas refeições são preparadas e, com isso,

97
00:08:12,550 --> 00:08:19,520
se salvarmos isso e darmos uma olhada em uma receita aqui, veremos nossos ingredientes. Agora, para o estilo, certamente podemos fazer alguma

98
00:08:19,520 --> 00:08:21,620
coisa lá e farei

99
00:08:21,650 --> 00:08:26,960
isso em um segundo, mas antes de fazer isso, deixe-me repetir isso para

100
00:08:26,960 --> 00:08:34,250
as etapas aqui, substitua este texto por selectedMeal. passos e, em seguida, imprima cada passo aqui, que também é apenas

101
00:08:34,350 --> 00:08:41,910
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.

102
00:08:42,630 --> 00:08:46,730
Agora, novamente, o estilo pode ser melhorado um pouco e faremos exatamente isso,

103
00:08:47,010 --> 00:08:53,460
e acho que faz sentido criar um componente separado ou função de renderização para isso, e criarei um componente separado, vamos

104
00:08:53,460 --> 00:08:58,830
armazená-lo no mesmo arquivo no entanto, porque nós realmente o usamos apenas nesse arquivo, mas você também pode

105
00:08:58,830 --> 00:08:59,310
criar

106
00:08:59,340 --> 00:09:03,260
um novo arquivo, totalmente com você. Lá eu terei meu

107
00:09:03,270 --> 00:09:11,340
item de lista que recebe adereços de onde eu retorno e agora aqui quero usar uma visualização

108
00:09:11,350 --> 00:09:17,500
que estou importando como invólucro para que eu possa estilizar esse contêiner e,

109
00:09:17,500 --> 00:09:24,690
lá, ter meu texto onde eu produzo adereços filhos e agora essa exibição aqui terá um

110
00:09:24,700 --> 00:09:28,450
estilo de estilos. ListItem, talvez, para que possamos

111
00:09:28,450 --> 00:09:33,490
estilizar isso muito bem e aqui, é claro, não quero usar texto, mas, na verdade,

112
00:09:33,490 --> 00:09:34,630
texto padrão, também

113
00:09:34,780 --> 00:09:38,010
aqui, é claro, para aproveitarmos nosso próprio texto personalizado.

114
00:09:38,170 --> 00:09:47,430
Agora, para o estilo do item de lista aqui, vamos descer para a folha de estilo e adicionar item de lista e

115
00:09:47,460 --> 00:09:55,530
cada item da lista deve ter alguma margem, uma margem vertical digamos 10 e uma margem horizontal digamos 20,

116
00:09:55,530 --> 00:10:05,600
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

117
00:10:05,600 --> 00:10:09,540
largura de borda de 1, veremos como isso se

118
00:10:09,540 --> 00:10:16,730
parece e adicionar um pouco de preenchimento, 10 em todas as direções e verei como isso

119
00:10:17,570 --> 00:10:18,930
se parece.

120
00:10:18,950 --> 00:10:25,910
Agora, apenas precisamos garantir que usamos nosso componente de item de lista e o retornamos que, em vez de texto aqui ao

121
00:10:25,910 --> 00:10:30,590
produzir os ingredientes, ainda passamos o ingrediente entre as tags de abertura e fechamento

122
00:10:30,590 --> 00:10:36,200
de nosso próprio componente personalizado, porque lá estamos usando adereços filhos que usam o conteúdo que transmitimos

123
00:10:36,470 --> 00:10:38,920
entre as tags de abertura e fechamento e

124
00:10:39,110 --> 00:10:43,870
fazemos o mesmo em nossas etapas. Com isso,

125
00:10:44,530 --> 00:10:47,520
vamos dar uma olhada

126
00:10:47,670 --> 00:10:55,870
nisso, sim, não parece tão ruim. Damos nossos passos aqui, obtemos nossos ingredientes, é claro que você pode

127
00:10:55,870 --> 00:11:02,650
refinar esse estilo, ajustar seus requisitos, da maneira que deseja, mas estou muito feliz com isso e com isso, temos um

128
00:11:02,650 --> 00:11:08,050
detalhe básico tela e, é claro, essa tela de detalhes também funciona para nossos favoritos, porque estamos

129
00:11:08,050 --> 00:11:10,610
usando uma e a mesma tela lá.

130
00:11:10,660 --> 00:11:15,500
Então, isso parece muito bom, a tela do filtro é o que está faltando agora.