1
00:00:02,120 --> 00:00:07,100
Então, irei para a tela de visão geral do produto porque, antes de

2
00:00:07,100 --> 00:00:09,590
adicionar um navegador, quero poder

3
00:00:09,590 --> 00:00:18,380
ver pelo menos algo nessa tela e, portanto, aqui, agora precisamos importar o seletor de uso do React Redux, porque isso nos permitirá

4
00:00:18,380 --> 00:00:22,630
toque na loja Redux e obtenha nossos produtos a partir daí.

5
00:00:22,640 --> 00:00:28,790
Então, aqui, no final, o que podemos fazer é obter nossos produtos e armazená-los em produtos constantes, chamando o

6
00:00:28,790 --> 00:00:30,800
seletor de uso e, como você

7
00:00:30,800 --> 00:00:36,950
aprendeu no módulo anterior sobre gerenciamento de estado no Redux, o seletor de uso assume uma função que

8
00:00:36,950 --> 00:00:44,060
recebe automaticamente o estado , o estado Redux como uma entrada e, em seguida, retorna todos os dados que você deseja obter

9
00:00:44,060 --> 00:00:45,470
de lá e

10
00:00:45,770 --> 00:00:47,360
de lá no estado Redux.

11
00:00:47,360 --> 00:00:53,780
Quero aproveitar a fatia de meus produtos e você deve usar o nome que usa aqui nos redutores combinados para

12
00:00:53,990 --> 00:00:57,990
obter isso. estado, os dados gerenciados com os produtos para o usuário.

13
00:00:58,010 --> 00:01:05,180
Então, aqui vou dizer produtos estatais e agora nessa parte do nosso estado, quero obter produtos

14
00:01:06,220 --> 00:01:10,270
disponíveis, então vamos lá. produtos disponíveis aqui e esta é

15
00:01:10,270 --> 00:01:15,460
esta sintaxe da função de seta curta, na qual a peça no lado direito da

16
00:01:15,460 --> 00:01:17,020
seta é retornada automaticamente.

17
00:01:17,020 --> 00:01:21,870
Então é isso que está agora armazenado nos produtos e, portanto, aqui na lista simples,

18
00:01:21,880 --> 00:01:28,870
é claro que podemos definir o suporte de dados igual aos nossos produtos aqui, que selecionamos porque isso será uma matriz

19
00:01:28,870 --> 00:01:31,790
e é exatamente isso que os dados precisam.

20
00:01:31,810 --> 00:01:36,730
Também adicionarei o extrator de chaves aqui, dependendo da versão do React Native que você estiver usando, você não

21
00:01:36,790 --> 00:01:43,450
precisará disso porque cada produto em nosso aplicativo possui um ID e as versões mais recentes da lista simples também procuram por ID e não apenas

22
00:01:43,450 --> 00:01:49,900
por uma chave, mas no caso de você estar trabalhando com uma versão mais antiga, é necessário configurar esta função extratora de chaves, e

23
00:01:49,900 --> 00:01:51,940
isso aceita uma função que fornece o item

24
00:01:51,940 --> 00:01:56,230
que está sendo visualizado e é preciso informar qual deve ser sua chave exclusiva nessa item

25
00:01:56,230 --> 00:02:00,100
e, claro, esse é o item. id, novamente, as versões

26
00:02:00,160 --> 00:02:07,410
mais recentes do React Native não precisam disso. Agora, com isso, também precisamos fornecer o suporte

27
00:02:07,410 --> 00:02:14,720
do item de renderização que aponta para uma função que renderiza nossos diferentes itens de lista e aqui, começarei

28
00:02:14,720 --> 00:02:21,650
simples e refinaremos isso mais tarde e, por enquanto, importarei o componente de texto de React Native e

29
00:02:21,650 --> 00:02:25,590
produz o título do produto em um componente de texto.

30
00:02:25,610 --> 00:02:31,580
Então, aqui, obtemos os dados do item e o valor de retorno dessa função que precisamos fornecer

31
00:02:31,580 --> 00:02:33,580
para renderizar o item deve retornar

32
00:02:33,900 --> 00:02:35,780
um elemento jsx no final.

33
00:02:35,810 --> 00:02:42,890
Então, aqui vou retornar um elemento de texto e, aí, output itemData. item. title e eu posso fazer isso porque os

34
00:02:42,890 --> 00:02:48,680
dados do item são recebidos pelo React Native, isso tem um suporte de item, isso também é algo que o

35
00:02:48,680 --> 00:02:53,000
React Native fornece e cada item aqui, é claro, é apenas um item em nossos

36
00:02:53,000 --> 00:02:58,640
produtos, portanto, é desse tipo de dados e, portanto, ele tem um suporte de título, é claro, porque é

37
00:02:58,640 --> 00:02:59,830
isso que estou

38
00:02:59,960 --> 00:03:05,300
atribuindo aqui; portanto, teremos um suporte de título aqui que eu possa gerar e, é claro, essa não

39
00:03:05,300 --> 00:03:10,100
é a forma final de como um produto deve ser a lista, mas é o que

40
00:03:10,100 --> 00:03:16,900
eu uso para começar, para que possamos ver algo na tela. Com isso, falando da tela, é claro que é hora de

41
00:03:16,900 --> 00:03:20,920
configurar o navegador para que possamos realmente ver algo na tela e que tenhamos telas.

42
00:03:21,160 --> 00:03:28,240
Portanto, aqui na pasta de navegação, adicionarei meu ShopNavigator. js e, lá, adicionaremos um monte de navegação ao

43
00:03:28,240 --> 00:03:36,020
longo deste módulo, portanto, definitivamente precisaremos importar da navegação do React e, é claro, começarei com um navegador de pilha normal,

44
00:03:36,050 --> 00:03:42,470
que podemos criar com a ajuda do crie a função de navegador de pilha e, em seguida,

45
00:03:42,470 --> 00:03:48,740
vamos simplesmente criá-la aqui e chamarei de navegador de produtos, é o que eu armazeno aqui, o

46
00:03:48,860 --> 00:03:50,280
resultado de criar navegador

47
00:03:50,420 --> 00:03:51,700
de pilha

48
00:03:51,710 --> 00:03:57,320
e o resultado é um componente React, se você se lembra e se lembra também

49
00:03:57,320 --> 00:04:03,800
, o create create navigator usa um objeto Javascript como o primeiro argumento em que mapeamos os

50
00:04:03,860 --> 00:04:08,710
identificadores de tela para componentes React que devem ser carregados como telas.

51
00:04:08,810 --> 00:04:16,040
Então, aqui, é claro, vou começar com a tela de visão geral dos produtos e importá-la da pasta de

52
00:04:16,040 --> 00:04:23,930
telas e da parte da loja e do arquivo de tela de visão geral de produtos e, portanto, a primeira coisa

53
00:04:24,020 --> 00:04:26,120
que quero mapear nesse navegador de

54
00:04:26,120 --> 00:04:33,630
pilha é produtos visão geral ou como você deseja nomear isso, que é mapeado para a tela de visão geral

55
00:04:33,640 --> 00:04:34,800
dos produtos.

56
00:04:34,790 --> 00:04:41,510
Agora, é claro, para este navegador de pilha que eventualmente terá várias telas, também passarei um segundo argumento para criar

57
00:04:41,510 --> 00:04:46,790
o navegador de pilha, que é um objeto que nos permite configurar o navegador inteiro e,

58
00:04:47,180 --> 00:04:52,550
por exemplo, podemos configurar opções de navegação padrão para em todas as telas e lá, quero

59
00:04:52,550 --> 00:04:56,660
configurar a cor de fundo do cabeçalho e assim por diante.

60
00:04:57,350 --> 00:05:05,060
Então, aqui vou configurar um objeto Javascript onde posso definir o estilo do cabeçalho para outro objeto Javascript, onde podemos definir a cor do

61
00:05:05,060 --> 00:05:09,620
plano de fundo para qualquer cor de sua escolha e é agora que a pasta

62
00:05:09,620 --> 00:05:16,000
de constantes entra em ação, onde adicionarei uma cores. arquivo js, onde eu simplesmente quero exportar um

63
00:05:16,010 --> 00:05:23,330
objeto Javascript padrão com uma cor primária e uma cor de destaque e você pode nomear essas chaves como quiser

64
00:05:23,330 --> 00:05:25,760
e agora selecionei algumas cores agradáveis

65
00:05:25,760 --> 00:05:30,730
que quero usar aqui, mas você pode usar a cor que desejar quer.

66
00:05:30,920 --> 00:05:42,890
Minha cor principal será o código hexadecimal de # c2185b e a cor de destaque terá um

67
00:05:42,890 --> 00:05:46,940
código hexadecimal de # ffc107.

68
00:05:47,130 --> 00:05:52,920
Agora, portanto, de volta ao navegador da loja, podemos importar dessa pasta constantes, ainda das cores que

69
00:05:54,020 --> 00:06:00,230
encontramos na pasta constantes assim e aqui, a cor do plano de fundo que configurarei para um estilo

70
00:06:00,230 --> 00:06:04,240
de cabeçalho aqui é cores. primário.

71
00:06:04,250 --> 00:06:07,470
Agora, com isso adicionado, também adicionarei

72
00:06:07,530 --> 00:06:15,630
uma cor de tonalidade de cabeçalho que colore o texto do título, por exemplo, e definirei isso para

73
00:06:16,470 --> 00:06:24,900
branco, porque essa cor principal que configurei é como uma cor rosa-avermelhada bastante forte e, portanto, branco é a

74
00:06:24,900 --> 00:06:33,080
cor que devemos usar para que fique claramente legível e eu realmente quero diferir quanto à aparência do

75
00:06:33,080 --> 00:06:37,110
cabeçalho com base na plataforma em que estamos rodando.

76
00:06:37,160 --> 00:06:44,450
Portanto, é hora de importar a plataforma do React Native e uma observação lateral: neste aplicativo de prática, na verdade, não

77
00:06:44,450 --> 00:06:49,700
vou me concentrar muito nas diferenças de plataforma e no design responsivo; farei isso até

78
00:06:49,700 --> 00:06:55,160
certo ponto para que haja alguma diferença básica entre as diferentes plataformas e que o aplicativo

79
00:06:55,190 --> 00:06:58,580
fica bem em diferentes tamanhos de dispositivo, mas

80
00:06:58,790 --> 00:07:02,630
não o testarei em uma ampla variedade de tamanhos de dispositivo.

81
00:07:02,660 --> 00:07:06,910
Você aprendeu tudo o que precisa para torná-lo o mais responsivo possível,

82
00:07:06,980 --> 00:07:12,230
portanto, fique à vontade para sempre ajustar isso mais do que eu faço aqui neste módulo.

83
00:07:12,230 --> 00:07:16,710
No final, eu só quero ter certeza de que este módulo não leve centenas de

84
00:07:16,730 --> 00:07:19,250
horas, portanto, vou manter isso no mínimo.

85
00:07:19,250 --> 00:07:24,080
Com esse conjunto, a plataforma aqui parece ser importante para mim, porque eu realmente quero ter uma

86
00:07:24,440 --> 00:07:28,790
aparência diferente no cabeçalho, com base no fato de estarmos rodando no iOS ou Android.

87
00:07:28,790 --> 00:07:34,940
Portanto, a cor do plano de fundo nem sempre é a cor principal, mas em vez disso, eu o definirei

88
00:07:34,940 --> 00:07:38,320
apenas se o sistema operacional em que estamos rodando for o

89
00:07:38,360 --> 00:07:43,820
Android, caso contrário, definirei a cor do plano de fundo como uma sequência vazia, o que significa

90
00:07:43,820 --> 00:07:45,540
que o padrão será

91
00:07:45,570 --> 00:07:47,420
adotado e, portanto, para a cor

92
00:07:47,450 --> 00:07:54,780
da tonalidade do cabeçalho, isso também deve ser branco se estiver no Android; caso contrário, não a definirei como uma sequência vazia, mas, em

93
00:07:54,780 --> 00:07:57,720
vez disso, desejo usar a cor principal como cor

94
00:07:57,720 --> 00:08:04,150
de texto no iOS, portanto, se não estamos no Android. Com isso, o navegador de produtos é configurado.

95
00:08:04,200 --> 00:08:09,240
Agora, como você aprendeu no módulo de navegação, não exporta esse navegador; em vez

96
00:08:09,240 --> 00:08:14,940
disso, envolve-o em um contêiner de aplicativo criado com a função de criação de contêiner de

97
00:08:14,940 --> 00:08:16,970
aplicativo obtida na navegação React.

98
00:08:16,980 --> 00:08:24,510
Portanto, agora podemos exportar o contêiner de aplicativo de criação padrão e passar o navegador de produtos, assim.

99
00:08:24,510 --> 00:08:27,510
Agora é a navegação de exportação configurada e é isso que agora

100
00:08:27,630 --> 00:08:30,240
podemos usar no aplicativo. js.

101
00:08:30,510 --> 00:08:37,260
Então, no aplicativo. js, agora podemos importar nosso navegador da loja da

102
00:08:39,770 --> 00:08:46,700
navegação, navegador da loja e agora é isso que eu uso dentro das tags do meu provedor aqui,

103
00:08:46,700 --> 00:08:52,670
para o navegador da loja como este. Isso também significa que podemos nos livrar dessas importações do

104
00:08:52,700 --> 00:09:00,020
React Native porque não usamos mais nenhum desses componentes do React Native nesse componente. Com todo esse trabalho, agora poderemos

105
00:09:00,020 --> 00:09:07,130
realmente executar nosso aplicativo e, esperançosamente, chegar à tela de visão geral de produtos, onde

106
00:09:07,130 --> 00:09:12,390
vemos uma lista básica e não estilizada de títulos de produtos.

107
00:09:12,470 --> 00:09:17,840
Portanto, se eu salvar isso agora, salve todas essas alterações e verifique se o npm começa a

108
00:09:17,840 --> 00:09:20,520
ser executado e se você tem emuladores onde

109
00:09:20,870 --> 00:09:26,980
você carregou isso, recebo um erro que o objeto não é um construtor, avaliando o novo padrão do produto.

110
00:09:26,980 --> 00:09:35,270
O problema deve ser que na pasta do meu modelo aqui, esqueci de exportar minha classe de produto como padrão.

111
00:09:35,300 --> 00:09:36,970
É claro que isso precisa ser

112
00:09:36,980 --> 00:09:39,250
adicionado aqui; caso contrário, você não pode importar

113
00:09:39,290 --> 00:09:40,640
deste arquivo, faz sentido.

114
00:09:40,640 --> 00:09:42,670
Então agora isso funciona e agora

115
00:09:42,740 --> 00:09:44,780
aqui, vejo os títulos dos meus produtos.

116
00:09:44,780 --> 00:09:46,420
Também vemos os diferentes cabeçalhos, o que

117
00:09:46,430 --> 00:09:51,500
não vemos é um título de cabeçalho, porque ainda não adicionei nenhum. Portanto, na tela de visão geral

118
00:09:51,500 --> 00:09:57,770
de produtos, é claro que podemos adicionar nossa tela especial apenas às opções de navegação que serão

119
00:09:57,770 --> 00:10:04,490
mescladas às opções de navegação padrão que configuramos diretamente no navegador usando a tela de visão geral de

120
00:10:04,490 --> 00:10:10,050
produtos, nossa constante aqui que mantém nosso componente e adiciona o propriedade de opções de

121
00:10:10,070 --> 00:10:17,870
navegação e aqui podemos usar opções de navegação estática no momento, adicionar um título de cabeçalho e definir isso para todos

122
00:10:17,870 --> 00:10:19,630
os produtos, por exemplo,

123
00:10:19,810 --> 00:10:24,470
e se agora salvarmos isso, veremos todos os produtos aqui no cabeçalho.

124
00:10:24,680 --> 00:10:28,870
Portanto, agora isso está realmente decente, podemos ver nossos produtos.

125
00:10:28,970 --> 00:10:32,720
É claro que esses produtos realmente não têm a aparência

126
00:10:32,720 --> 00:10:38,810
que deveriam, então o próximo passo será garantir que aqui realmente tenhamos a aparência que precisamos nesta aplicação.