1
00:00:02,180 --> 00:00:07,440
Na tela de detalhes do produto, já começamos a trabalhar nisso, mas não estamos produzindo

2
00:00:07,850 --> 00:00:10,240
nada útil lá, agora é hora

3
00:00:10,250 --> 00:00:11,600
de mudar isso.

4
00:00:11,690 --> 00:00:17,570
Para isso, substituirei o código jsx que estamos usando atualmente por uma visualização de rolagem, porque, como

5
00:00:17,570 --> 00:00:19,790
mencionei anteriormente, exibiremos nossa imagem lá,

6
00:00:19,790 --> 00:00:23,510
nossa descrição do produto e essa pode ser uma descrição muito

7
00:00:23,510 --> 00:00:25,790
longa ou simplesmente vendo isso em

8
00:00:25,850 --> 00:00:28,410
um dispositivo menor ou no modo paisagem,

9
00:00:28,640 --> 00:00:33,020
então, definitivamente, queremos ter algum conteúdo rolável lá e, a propósito, não precisamos

10
00:00:33,100 --> 00:00:36,420
de uma lista simples aqui porque o conteúdo não será

11
00:00:36,440 --> 00:00:42,020
infinitamente longo, sabemos praticamente que ele não será com tanto tempo de antecedência, para que a

12
00:00:42,020 --> 00:00:50,210
visualização de rolagem seja perfeitamente adequada e, nessa visualização de rolagem, agora você pode adicionar um componente de imagem que produza a imagem do

13
00:00:50,220 --> 00:01:01,560
produto na parte superior, digamos, e abaixo disso, podemos adicionar nosso botão para permitir adicione isso a um carrinho e abaixo disso, podemos ter nosso texto, como exibir o preço e, talvez, o

14
00:01:01,560 --> 00:01:04,260
texto da descrição. Portanto, para a imagem, precisamos

15
00:01:04,270 --> 00:01:08,980
configurar o suporte de origem e esse é um objeto que possui uma propriedade URI e, é claro, temos

16
00:01:09,330 --> 00:01:14,530
nosso produto selecionado aqui, portanto, a fonte é apenas selecionadaProduct. imageUrl porque o produto selecionado é

17
00:01:14,620 --> 00:01:20,680
do tipo que definimos em nosso modelo de produtos. No botão aqui, podemos adicionar um título de

18
00:01:20,680 --> 00:01:26,530
adicionar ao carrinho, porque no final é o que esse botão deve fazer e o onPress não faz

19
00:01:26,620 --> 00:01:32,970
nada por enquanto, mas mais tarde iremos adicioná-lo ao carrinho. Então, aqui eu quero exibir o preço,

20
00:01:33,010 --> 00:01:34,390
não precisamos

21
00:01:34,390 --> 00:01:37,600
exibir o título, porque isso já faz parte

22
00:01:37,600 --> 00:01:43,630
do cabeçalho, então vemos o título lá, mas aqui eu quero exibir o preço em

23
00:01:43,630 --> 00:01:47,810
dólares, referindo-se ao produto selecionado. preço para fixar 2 o

24
00:01:48,100 --> 00:01:50,410
que eu fiz antes e depois lá

25
00:01:50,410 --> 00:01:56,170
embaixo também a descrição, então aqui nós selecionamosProduto. descrição, assim.

26
00:01:56,200 --> 00:01:56,560
Ok,

27
00:01:56,590 --> 00:01:57,670
então está bom, agora

28
00:01:57,670 --> 00:01:59,380
é hora de um estilo, é claro.

29
00:01:59,380 --> 00:02:04,270
Por exemplo, para a imagem, definitivamente teremos que definir uma largura e uma altura, porque é uma

30
00:02:04,270 --> 00:02:09,350
imagem de rede, então aqui adicionarei o estilo da imagem que devo adicionar à minha folha de estilo.

31
00:02:09,460 --> 00:02:15,040
Agora, para os textos aqui, este texto deve ter um estilo de preço,

32
00:02:15,580 --> 00:02:24,490
talvez o que devemos adicionar e, então, aqui, este texto deve ter um estilo de descrição, talvez, pareça um nome adequado.

33
00:02:24,490 --> 00:02:31,690
Agora, na folha de estilo, temos que adicionar todas essas coisas, então vamos começar a imagem.

34
00:02:31,980 --> 00:02:34,580
Aí adicionarei uma largura de 100%, isso deve

35
00:02:34,580 --> 00:02:38,730
levar a largura total disponível e uma altura de 300 talvez, e é claro

36
00:02:38,740 --> 00:02:40,570
que você pode brincar com

37
00:02:40,570 --> 00:02:46,810
isso, também pode usar um valor percentual para isso ou usar a API de dimensões para tipo de calcular isso dinamicamente.

38
00:02:48,000 --> 00:02:52,970
Posteriormente, eu quero meu preço, esse texto de preço deve

39
00:02:53,080 --> 00:03:01,810
ter um tamanho de fonte 20, porque as pessoas devem poder vê-lo, uma cor dessa cor acinzentada, essa

40
00:03:01,870 --> 00:03:09,670
cor acinzentada escura que eu já usei anteriormente e um alinhamento de texto no centro para

41
00:03:09,670 --> 00:03:11,780
que ele esteja sempre

42
00:03:11,850 --> 00:03:20,640
centralizado, também uma margem no eixo vertical de 20, talvez, em torno dele, de 20 e, posteriormente, a descrição.

43
00:03:21,240 --> 00:03:30,660
A descrição realmente pode ter um tamanho de fonte digamos 14, vamos ver se isso funciona e, também, usar

44
00:03:30,680 --> 00:03:38,810
o centro de alinhamento de texto, algo assim. Se salvarmos isso, vamos dar

45
00:03:38,810 --> 00:03:47,420
uma olhada nisso, não parece tão ruim. Agora, para o botão, quero definir uma cor diferente, então adicionarei cores aqui e

46
00:03:47,450 --> 00:03:56,170
as definirei nas cores que precisamos importar, é claro, da nossa pasta de constantes, Colors. primário e agora, se salvarmos isso,

47
00:03:56,200 --> 00:04:03,500
isso parecerá muito bom. No Android, você vê que o botão fica diretamente abaixo da imagem

48
00:04:03,680 --> 00:04:06,300
e que é um botão de largura total.

49
00:04:06,320 --> 00:04:07,900
É o mesmo aqui para iOS, lá

50
00:04:07,910 --> 00:04:08,830
simplesmente não o vemos,

51
00:04:08,840 --> 00:04:13,940
mas se eu tocar aqui, você também verá que esse botão é pressionado e, na verdade, não é o que eu quero aqui.

52
00:04:14,150 --> 00:04:23,310
Então, o que farei é envolver esse botão em uma exibição que darei um estilo de, digamos, ações, mesmo que seja apenas uma

53
00:04:23,310 --> 00:04:28,160
ação aqui, você pode ter vários botões aqui para coisas diferentes.

54
00:04:28,350 --> 00:04:32,890
Então, adicionarei minha chave de ações aqui à folha de estilo

55
00:04:33,030 --> 00:04:40,530
e, aí, podemos definir uma margem no eixo vertical de 10 para cima e para baixo e alinhar

56
00:04:41,930 --> 00:04:43,260
seus itens

57
00:04:43,430 --> 00:04:50,740
no centro que, porque a direção flexível padrão é a coluna, centraliza horizontalmente e agora temos mais espaçamento

58
00:04:50,740 --> 00:04:53,750
aqui e vemos isso ainda melhor no

59
00:04:53,780 --> 00:05:00,100
Android, mais espaçamento e o botão agora não estica como seria, sua configuração de alinhamento

60
00:05:00,100 --> 00:05:05,230
padrão mais, mas ocupa apenas a largura necessária e está alinhada no centro.

61
00:05:05,240 --> 00:05:06,310
Portanto, esta é

62
00:05:06,440 --> 00:05:07,050
a

63
00:05:07,070 --> 00:05:11,480
configuração que eu vou seguir, é claro que você ainda pode ajustar isso de

64
00:05:11,480 --> 00:05:13,150
maneiras diferentes, se desejar, para

65
00:05:13,160 --> 00:05:18,360
mim isso não parece muito ruim, vamos ver também como um item diferente, talvez também este,

66
00:05:18,440 --> 00:05:20,820
sim , isso tudo parece muito bom.

67
00:05:20,870 --> 00:05:25,790
Agora, para um texto mais longo aqui, porém, você vê que não é tão bonito assim, deve haver mais espaçamento.

68
00:05:26,240 --> 00:05:34,700
Na verdade, na descrição, também adicionarei uma pequena margem horizontal, digamos 20, para que tenhamos um espaçamento em torno disso, para

69
00:05:34,700 --> 00:05:42,600
que, se dermos uma outra olhada nisso, você vê agora que isso automaticamente salta para uma nova linha que

70
00:05:42,600 --> 00:05:43,890
deveria .

71
00:05:44,970 --> 00:05:45,290
Ok,

72
00:05:45,360 --> 00:05:46,290
está ótimo, agora

73
00:05:46,290 --> 00:05:48,380
temos a tela de detalhes do produto.

74
00:05:48,480 --> 00:05:53,970
Agora, antes de continuarmos, quero trazer minhas próprias fontes e usá-las porque não estou feliz com as fontes

75
00:05:53,970 --> 00:05:54,420
padrão.