1
00:00:02,470 --> 00:00:09,580
Vamos substituir o conteúdo da tela fictícia das categorias aqui por uma grade de categorias, porque essa é a ideia por

2
00:00:09,580 --> 00:00:13,090
trás dessa tela, afinal. Agora, podemos usar

3
00:00:13,090 --> 00:00:18,140
um componente que usamos anteriormente e esse é o FlatList.

4
00:00:18,160 --> 00:00:20,980
Até agora, usamos isso para listas normais, na

5
00:00:20,980 --> 00:00:25,490
verdade você também pode renderizar grades e é exatamente isso que faremos aqui.

6
00:00:25,730 --> 00:00:34,960
Agora, para isso nesta tela de categoria, substituirei tudo pelo FlatList aqui e só exibirei minha lista simples aqui nesta tela, que retornarei

7
00:00:34,960 --> 00:00:35,530
no

8
00:00:35,530 --> 00:00:42,520
final e definirei num colunas aqui, que é uma nova propriedade que nunca vimos antes para 2 e

9
00:00:42,520 --> 00:00:47,950
isso define quantas colunas queremos ter. O padrão é 1, que é uma

10
00:00:47,950 --> 00:00:53,610
lista normal, mas você pode ter mais de uma coluna e isso fornece uma grade efetivamente.

11
00:00:53,620 --> 00:00:55,080
Agora, com isso, poderíamos renderizar uma

12
00:00:55,090 --> 00:00:57,070
grade, mas é claro que precisamos de alguns

13
00:00:57,070 --> 00:00:59,340
dados para isso, caso contrário, é difícil renderizar uma grade,

14
00:00:59,350 --> 00:00:59,640
certo?

15
00:01:00,590 --> 00:01:06,290
Para isso, adicionarei uma nova pasta com o nome de dados e, lá, adicionarei um dado fictício. js porque, no final, são

16
00:01:06,290 --> 00:01:10,040
apenas alguns dados fictícios que estou fornecendo aqui,

17
00:01:10,040 --> 00:01:16,740
não estamos carregando isso de um servidor ou algo parecido agora, apenas carregue-o dessa maneira.

18
00:01:16,920 --> 00:01:23,340
Eu quero ter um monte de categorias lá e, para isso, vou adicionar outra pasta que eu nomeio modelos, que no

19
00:01:23,520 --> 00:01:29,550
final é uma pasta na qual eu quero definir como meus dados são modelados neste aplicativo, como eles se

20
00:01:29,550 --> 00:01:30,440
parecem .

21
00:01:30,450 --> 00:01:36,810
Então, podemos adicionar uma categoria. arquivo js, por exemplo, e neste arquivo, tudo

22
00:01:36,840 --> 00:01:43,920
o que eu quero é uma classe que eu nomeei categoria e classes são recursos Javascript padrão no Javascript

23
00:01:44,040 --> 00:01:52,800
moderno que eu exporto e lá vou simplesmente definir como um objeto de categoria no meu aplicativo deve parecer como, para que basicamente tenhamos

24
00:01:52,920 --> 00:01:59,110
uma maneira mais fácil de criar esses objetos sem erros de digitação e assim por diante.

25
00:01:59,130 --> 00:02:05,670
Portanto, aqui, essa classe de categoria terá um construtor e você poderá usá-lo, que é um método padrão que

26
00:02:05,700 --> 00:02:06,610
você pode

27
00:02:06,630 --> 00:02:11,790
adicionar a qualquer classe em Javascript para inicializar um objeto com base nessa classe.

28
00:02:12,000 --> 00:02:16,350
Você faz isso esperando alguns argumentos aqui no construtor e para uma categoria. Quero obter um

29
00:02:16,350 --> 00:02:22,200
ID para a categoria, um título e uma cor que usarei como cor de fundo na grade para este item de grade

30
00:02:22,200 --> 00:02:23,880
para esta categoria. e armazenarei todos

31
00:02:24,060 --> 00:02:29,460
esses dados em propriedades com a ajuda da palavra-chave this. Caso isso seja totalmente novo para

32
00:02:29,460 --> 00:02:35,670
você, mergulhe definitivamente em alguns cursos ou recursos Javascript primeiro, porque isso não tem nada a

33
00:02:35,670 --> 00:02:38,550
ver com a navegação React ou com

34
00:02:38,580 --> 00:02:42,470
o React Native, esse é o Javascript moderno e moderno.

35
00:02:42,480 --> 00:02:44,470
Agora, por que eu criei isso?

36
00:02:44,490 --> 00:02:52,650
Porque agora eu posso importar minha classe de categoria da pasta de modelos, da categoria. js no arquivo de dados fictícios e

37
00:02:52,650 --> 00:02:56,460
use-o para criar alguns dados fictícios.

38
00:02:56,460 --> 00:03:04,650
Agora você encontra esses dados fictícios anexados, em anexo encontra o arquivo Javascript com essas categorias fictícias que eu armazeno

39
00:03:04,860 --> 00:03:09,070
em uma constante que depois exporto como exportação nomeada aqui.

40
00:03:09,240 --> 00:03:14,200
Estes são alguns dados de categoria fictícios para as categorias deste aplicativo, nessas categorias

41
00:03:14,520 --> 00:03:19,290
que eu quero ter neste aplicativo. Estas são as categorias que irei usar

42
00:03:19,290 --> 00:03:25,590
neste aplicativo e, agora, podemos usar as categorias dentro de nossas telas, na tela de categorias para ser mais preciso.

43
00:03:26,540 --> 00:03:37,110
Então, lá dentro, quero adicionar categorias de importação e importação de dados / dados fictícios, para importar a constante

44
00:03:37,120 --> 00:03:40,640
nomeada que estamos exportando para lá.

45
00:03:40,660 --> 00:03:44,020
Agora, essa é uma matriz de objetos Javascript no final, certo?

46
00:03:44,050 --> 00:03:45,610
É isso que armazenamos lá,

47
00:03:45,640 --> 00:03:51,850
é apenas uma matriz de objetos Javascript que agora podemos usar para renderizar nossa lista ou, para ser mais preciso,

48
00:03:51,850 --> 00:03:53,090
nossa grade aqui.

49
00:03:53,170 --> 00:04:01,240
Portanto, os dados para este FlatList são simplesmente minhas matrizes de categorias, portanto, aponto as categorias e, é claro,

50
00:04:01,240 --> 00:04:08,510
agora também precisamos do item de renderização para definir como um único item de grade deve ser

51
00:04:08,510 --> 00:04:15,380
renderizado, qual componente deve ser renderizado lá. Para isso, adicionarei uma nova função aqui, render item

52
00:04:15,380 --> 00:04:22,580
de grade, que é uma função que receberá alguns dados do item no final aqui e que deve retornar

53
00:04:22,580 --> 00:04:25,460
um elemento jsx, deve retornar algum componente

54
00:04:25,460 --> 00:04:33,950
React aqui e apontarei para a grade de renderização item aqui. Agora, lá dentro, renderizarei uma visualização e para manter as coisas simples, pois agora essa será

55
00:04:33,950 --> 00:04:40,160
uma visualização com um texto e, nesse texto, quero renderizar itemData.

56
00:04:40,160 --> 00:04:42,400
item, é o que temos disponível

57
00:04:42,410 --> 00:04:48,250
em um FlatList se você se lembrar dos módulos anteriores, o objeto de dados do item aqui

58
00:04:48,250 --> 00:04:55,520
tem uma propriedade de item, o React Native FlatList fornece essa propriedade e, lá, teremos uma propriedade de título porque um

59
00:04:55,520 --> 00:05:01,940
item é chegar aqui é apenas uma categoria que recebemos de nossos dados que estamos inserindo no FlatList; portanto,

60
00:05:01,970 --> 00:05:05,490
teremos um objeto Javascript como um item lá e esse

61
00:05:05,630 --> 00:05:12,000
objeto Javascript será baseado em nosso modelo aqui e ali, configuramos um title, uma cor e uma propriedade

62
00:05:12,040 --> 00:05:12,820
de

63
00:05:12,980 --> 00:05:19,160
ID; portanto, temos uma propriedade de título; portanto, podemos extrair o título aqui assim, usaremos a cor posteriormente.

64
00:05:20,250 --> 00:05:22,010
Então essa é

65
00:05:22,080 --> 00:05:26,850
a primeira coisa, isso deve funcionar. Agora, nas novas versões do React

66
00:05:26,850 --> 00:05:35,340
Native, você também não precisa informar ao React Native que seu ID não é nomeado como chave, mas na verdade é chamado de ID,

67
00:05:35,400 --> 00:05:42,270
porque as versões mais recentes do React Native também aceitam o ID como um ID nos dados da lista.

68
00:05:42,270 --> 00:05:48,300
Se você seguisse adiante em uma versão mais antiga, seria necessário adicionar aqui um extrator de chaves, que é uma função

69
00:05:48,630 --> 00:05:54,660
que obtém o item e o índice e precisa retornar o valor que deve ser usado como chave, portanto, neste

70
00:05:54,720 --> 00:05:56,980
caso, ser item. id, novamente

71
00:05:57,030 --> 00:06:03,030
as versões mais recentes do React Native não precisam disso, mas apenas para referência e para versões

72
00:06:03,030 --> 00:06:05,150
mais antigas, ainda adicionarei isso aqui.

73
00:06:05,160 --> 00:06:08,610
Então agora retornamos nosso FlatList aqui com nossos dados.

74
00:06:08,610 --> 00:06:11,930
Se agora salvarmos isso, já deveríamos ver nossos dados

75
00:06:11,940 --> 00:06:15,320
aqui, é claro que não é tão bonito, mas sim

76
00:06:15,330 --> 00:06:16,960
uma grade, temos italiano,

77
00:06:17,040 --> 00:06:20,000
ao lado de hambúrgueres rápidos e fáceis, próximo

78
00:06:20,130 --> 00:06:23,690
a alemão, apenas não parece uma grade mas tecnicamente é.

79
00:06:24,030 --> 00:06:32,250
Agora, para torná-lo um pouco mais parecido com uma grade, é claro que precisamos adicionar mais estilo. Agora, para mudar um pouco esse estilo, podemos ir para nossos itens

80
00:06:32,250 --> 00:06:33,080
de grade

81
00:06:33,090 --> 00:06:40,830
aqui, para um item de grade único e adicionar o suporte de estilo aqui e adicionar o estilo de item de grade ou

82
00:06:40,830 --> 00:06:42,620
o que você quiser nomeá-lo

83
00:06:43,430 --> 00:06:50,700
e depois lá embaixo, adicionarei item de grade para minha folha de estilo e forneça essa propriedade de flex, queremos ocupar o

84
00:06:50,700 --> 00:06:52,250
máximo de espaço possível,

85
00:06:53,390 --> 00:06:57,530
salve isso, agora isso já parece um pouco mais com uma grade.

86
00:06:57,530 --> 00:07:00,640
Agora, alguma margem ao redor de cada item também

87
00:07:00,650 --> 00:07:08,450
seria boa, então podemos adicionar margem e talvez adicionar 15 como margem ao redor de cada item, para que tenhamos mais espaçamento em

88
00:07:08,450 --> 00:07:10,070
todas as direções e,

89
00:07:10,070 --> 00:07:12,500
com isso, não é tão ruim, é

90
00:07:12,500 --> 00:07:18,080
claro agora também podemos mudar a aparência geral e, por exemplo, dar a cada item uma

91
00:07:18,080 --> 00:07:24,230
altura de, digamos 150, e depende totalmente de você os valores que você escolhe, mas eu diria que

92
00:07:24,230 --> 00:07:25,610
é uma grade bastante

93
00:07:25,610 --> 00:07:26,400
agradável,

94
00:07:26,450 --> 00:07:31,310
certamente não ganha um prêmio de estilo ainda, mas estamos indo na direção certa.

95
00:07:32,920 --> 00:07:38,830
Agora, antes de terminarmos o estilo disso e ainda temos algum trabalho a fazer, vamos nos certificar

96
00:07:38,830 --> 00:07:44,950
de que podemos tocar nesses itens e, em seguida, voltar à tela de detalhes desse item específico, vamos

97
00:07:45,090 --> 00:07:50,770
ver também como podemos na verdade, defina um título no cabeçalho para ter uma ideia

98
00:07:50,770 --> 00:07:52,780
melhor de onde estamos atualmente.