1
00:00:02,390 --> 00:00:08,060
Então, vamos para a tela de filtros e, agora, eu só tenho o meu conteúdo

2
00:00:08,060 --> 00:00:11,420
fictício, a tela de filtro, e é claro que

3
00:00:11,510 --> 00:00:20,060
não é isso que eu quero lá. Em vez disso, quero ter algum texto na parte superior, na verdade, onde digo filtros disponíveis

4
00:00:20,060 --> 00:00:25,910
/ restrições ou algo parecido com este onde eu quero apontar para um certo objeto de

5
00:00:25,910 --> 00:00:33,560
estilo com estilos, vamos chamá-lo de título, talvez porque será nosso título principal aqui e abaixo disso, quero ter meus filtros

6
00:00:33,560 --> 00:00:34,250
diferentes.

7
00:00:34,250 --> 00:00:41,180
Agora, como é um filtro? Precisamos de alguma opção, alguma caixa de seleção, algo assim,

8
00:00:41,180 --> 00:00:45,210
que permita ativar e desativar um filtro e um rótulo para isso.

9
00:00:45,230 --> 00:00:50,840
Agora, isso significa que provavelmente uma visão faz sentido agrupar rótulo e que alternam

10
00:00:50,840 --> 00:00:52,970
e posicione-as lado a

11
00:00:52,970 --> 00:01:04,560
lado, provavelmente, e eu darei à visão um estilo de contêiner de filtro, algo assim e, como eu disse, quero tenha um texto com um rótulo, por exemplo,

12
00:01:04,560 --> 00:01:09,300
diga glutenFree e, ao lado disso, um switch e, felizmente, o React

13
00:01:10,050 --> 00:01:16,080
Native possui um switch interno, chamado switch. O componente switch transforma um bom

14
00:01:16,080 --> 00:01:19,140
switch que podemos usar, então aqui podemos

15
00:01:19,140 --> 00:01:28,180
apenas usar um switch como esse e renderizar na tela. Precisamos configurar isso, mas para

16
00:01:28,210 --> 00:01:36,520
começar, podemos usá-lo assim. Agora, para um estilo básico, para o título e o contêiner de

17
00:01:36,520 --> 00:01:37,780
filtro aqui, vamos

18
00:01:37,780 --> 00:01:39,490
descer aqui, vamos adicionar o

19
00:01:39,490 --> 00:01:48,040
contêiner de filtro e o título aqui, e o título é bem direto. Lá, quero usar a família de fontes

20
00:01:48,120 --> 00:01:58,410
open sans bold (realce) e tamanho de fonte 22, uma margem em todas as direções de 20 e também

21
00:01:58,550 --> 00:02:08,580
definir alinhamento de texto para centralizar e centralizar isso. A tela geral, a propósito, não deve mais centralizar itens no eixo principal;

22
00:02:08,610 --> 00:02:11,530
portanto, a centralização vertical não deve mais acontecer

23
00:02:11,700 --> 00:02:14,330
e, para isso, podemos simplesmente nos

24
00:02:14,460 --> 00:02:21,610
livrar do centro de conteúdo justificado e do recipiente de filtro, por outro lado, deve posicionar a chave e

25
00:02:21,640 --> 00:02:24,970
o texto próximos um do outro em uma fileira.

26
00:02:24,970 --> 00:02:34,060
Portanto, aqui podemos definir a direção da flexão para alinhar, justificar o conteúdo, talvez adicionando espaço ao redor e alinhando os itens no eixo transversal,

27
00:02:34,060 --> 00:02:40,080
no centro, de modo que seja centralizado verticalmente. Agora vamos dar uma olhada nisso, se salvarmos isso

28
00:02:40,080 --> 00:02:46,290
e formos para a tela de filtro, é isso que obtemos. Aqui temos uma chave e, como você vê agora, está sempre

29
00:02:46,290 --> 00:02:47,460
voltando atrás, isso é

30
00:02:47,460 --> 00:02:53,130
algo que tomaremos para cuidar em um segundo, mas geralmente, vemos e aqui nos filtros para Android, temos uma chave Android

31
00:02:53,130 --> 00:02:58,380
que também salta de volta, mas que já está convenientemente pré-estilizado para o Android, então esse é outro componente

32
00:02:58,380 --> 00:02:58,920
incorporado

33
00:02:58,920 --> 00:03:05,300
ao React Native que possui uma aparência padrão para o Android. Então isso não é

34
00:03:05,300 --> 00:03:07,240
tão ruim.

35
00:03:07,250 --> 00:03:13,070
Uma coisa que quero mudar é para o contêiner de filtro, quero atribuir

36
00:03:13,070 --> 00:03:19,430
uma largura fixa de, digamos, 80% e, na verdade, alterá-la aqui para um espaço

37
00:03:19,430 --> 00:03:20,480
entre,

38
00:03:20,480 --> 00:03:32,030
não um espaço ao redor, porque acho que parece um pouco melhor agora, sim, definitivamente, também no Android e agora, podemos garantir que essa opção

39
00:03:32,030 --> 00:03:39,440
realmente funcione e que não volte ao acioná-la. Para isso, é necessário saber que, para os comutadores, você precisa

40
00:03:39,440 --> 00:03:46,130
gerenciar manualmente o estado deles e isso não é realmente novo. No React, geralmente é o caso desses componentes de entrada,

41
00:03:46,670 --> 00:03:53,120
é necessário armazenar o que o usuário digita e enviá-lo de volta ao componente para refletir isso na interface do

42
00:03:53,210 --> 00:03:54,790
usuário atualizada e fazemos

43
00:03:55,130 --> 00:03:57,080
isso com o gerenciamento de estado.

44
00:03:57,100 --> 00:04:03,040
Portanto, importamos para usar o gancho de estado do React, para que possamos gerenciar o

45
00:04:03,290 --> 00:04:13,770
estado aqui neste componente funcional e que aqui, eu terei meu estado de glúten e o nomeio éGlutenFree e defini o estado de uso isGlutenFree, inicialmente falso

46
00:04:14,660 --> 00:04:16,930
e agora em diante essa opção

47
00:04:17,150 --> 00:04:18,800
aqui, você tem

48
00:04:22,330 --> 00:04:29,650
uma propriedade value, que é uma propriedade incorporada à opção interna onde eu alimento isGlutenFree, portanto, é necessário um

49
00:04:29,650 --> 00:04:36,640
booleano que indica se essa opção é renderizada como ativa ou não, por isso, se estiver marcada como

50
00:04:36,640 --> 00:04:42,550
marcada ou não marcado, devo dizer e você tem uma propriedade onValueChange que aceita uma

51
00:04:42,550 --> 00:04:45,160
função que é acionada sempre que

52
00:04:45,160 --> 00:04:49,520
o usuário clica nessa opção. Essa função aqui obtém o novo

53
00:04:49,610 --> 00:04:56,480
valor; portanto, se a opção estava no modo falso, no modo desmarcado, o novo valor será verdadeiro e o

54
00:04:56,480 --> 00:05:02,750
contrário, é claro, e podemos usá-lo para atualizar nosso estado e definir isGlutenFree como o novo valor

55
00:05:03,110 --> 00:05:09,050
e como também alimentamos esse estado novamente, agora nossa opção deve ser alterável e permanecer

56
00:05:09,290 --> 00:05:10,800
nesse modo atualizado.

57
00:05:10,820 --> 00:05:17,430
Então, agora, se dermos uma olhada nisso, agora podemos realmente alternar essa opção e isso é uma melhoria.

58
00:05:17,450 --> 00:05:21,800
O estilo do switch não é o que eu quero, no entanto, ele usa

59
00:05:21,800 --> 00:05:26,010
algumas cores padrão, é claro que eu gostaria de usar minhas cores que

60
00:05:26,180 --> 00:05:30,020
uso no aplicativo o tempo todo e, para isso, podemos importar nossas

61
00:05:30,020 --> 00:05:39,140
cores constantemente, é claro, então importar cores de constantes / Colors e o switch tiver outra propriedade que nos ajude a estilizar aqui, podemos adicionar cores de trilha, o que

62
00:05:39,710 --> 00:05:45,130
nos permite personalizar as cores para esse switch, para que a cor de fundo e assim por

63
00:05:45,140 --> 00:05:52,910
diante e a cor da trilha tomem um objeto como um valor, portanto, temos um objeto que passamos aqui para essa ligação dinâmica, na qual

64
00:05:52,910 --> 00:05:59,030
é possível definir uma cor de plano de fundo para o estado falso; portanto, se ele estiver inativo, se estiver

65
00:05:59,030 --> 00:06:04,490
desmarcado, e eu estou bem com o padrão na verdade, isso é bom para eu, mas você

66
00:06:04,490 --> 00:06:05,270
também pode

67
00:06:05,660 --> 00:06:09,570
definir um para o caso verdadeiro, que é o caso em que

68
00:06:09,740 --> 00:06:15,680
é verificado e lá eu quero usar cores, cores primárias e, claro, você pode escolher qualquer cor que desejar.

69
00:06:15,680 --> 00:06:22,580
E se fizermos isso e voltarmos aos filtros, agora usamos nossa própria cor aqui, o que obviamente está

70
00:06:22,580 --> 00:06:24,740
mais alinhado com o restante

71
00:06:24,740 --> 00:06:33,340
deste aplicativo e, obviamente, isso também funcionará aqui no Android. Também podemos definir a cor do polegar, que é a cor do

72
00:06:33,340 --> 00:06:41,290
polegar aqui, que é verde aqui no Android e isso leva apenas uma sequência, uma sequência de cores, de modo que um

73
00:06:42,410 --> 00:06:49,530
código hexadecimal, por exemplo, também podemos apontar para as cores cores primárias e se fazemos isso, no iOS, agora tem

74
00:06:49,530 --> 00:06:51,270
essa cor e a mesma

75
00:06:55,710 --> 00:06:56,820
no Android.

76
00:06:59,660 --> 00:07:03,420
Agora, é claro, no iOS, isso não parece muito bom.

77
00:07:03,420 --> 00:07:07,480
Gostaria de manter o padrão e a solução é bastante simples.

78
00:07:07,500 --> 00:07:13,620
Podemos usar novamente a boa e antiga API da plataforma, importar isso e aqui ao atribuir

79
00:07:13,620 --> 00:07:21,000
uma cor de polegar. , Eu verifico a plataforma. os é igual ao Android; nesse caso, quero usar a cor principal do polegar;

80
00:07:21,480 --> 00:07:26,410
caso contrário, definirei isso como uma sequência vazia, o que significa que ele usará o padrão branco no iOS.

81
00:07:26,510 --> 00:07:31,650
E com isso, aqui temos a mesma aparência de que eu gosto no iOS, mas é

82
00:07:31,650 --> 00:07:33,300
claro, você também pode

83
00:07:33,300 --> 00:07:40,140
ajustar isso de acordo com seus requisitos e no Android, ainda teremos a aparência que vimos antes, se eu for para

84
00:07:40,140 --> 00:07:45,650
o filtro tela aqui que parece bom lá também. Então essa é a opção e

85
00:07:45,950 --> 00:07:50,060
como podemos adicioná-la, agora precisamos repetir isso também para todas as

86
00:07:50,120 --> 00:07:55,700
outras opções, para todos os outros filtros. Portanto, posso copiar essa visualização e adicioná-la

87
00:07:55,700 --> 00:07:56,430
novamente

88
00:07:56,990 --> 00:08:01,960
sem lactose ou vegana, mas se você copiar e colar várias vezes enquanto

89
00:08:02,090 --> 00:08:08,900
tentamos fazê-lo aqui, é sempre um bom argumento para criar um componente separado ou um função que

90
00:08:08,900 --> 00:08:10,680
processa esse código reutilizável.

91
00:08:10,730 --> 00:08:15,590
E aqui, novamente, criarei um componente separado no mesmo arquivo, porque eu realmente o uso apenas lá;

92
00:08:15,590 --> 00:08:16,040
novamente,

93
00:08:16,040 --> 00:08:19,150
você também pode optar por um arquivo separado, se quiser.

94
00:08:19,390 --> 00:08:23,720
Vou chamá-lo de switch de filtro e isso obtém alguns props e,

95
00:08:23,720 --> 00:08:30,820
neste componente, no final, retorno esse código, configuramos um para com a view e o texto e assim por diante

96
00:08:30,820 --> 00:08:31,410
e,

97
00:08:31,610 --> 00:08:37,100
é claro, agora o texto precisa ser dinâmico. Lá, podemos definir isso como adereços e é totalmente

98
00:08:37,100 --> 00:08:41,810
com você o que você escolhe aqui, porque você será quem passará os valores de adereços

99
00:08:43,050 --> 00:08:48,930
mais tarde e, é claro, aqui, o que acontece no ValueChange e o que passamos para o valor também difere.

100
00:08:48,930 --> 00:08:57,230
Portanto, aqui, esse deve ser o estado de adereços, por exemplo, ou valor de adereços, ou o que você quiser usar e

101
00:08:57,310 --> 00:09:03,490
aqui para onValueChange, simplesmente apontarei para adereços. onChange, por exemplo, mas, novamente, todos esses nomes de

102
00:09:03,490 --> 00:09:08,140
adereços, é claro, dependem de você, porque você será o único a usar esse

103
00:09:08,140 --> 00:09:16,870
componente e nós o usaremos agora aqui, assim, como um componente de fechamento automático, onde agora podemos definir um rótulo porque eu estou esperando um

104
00:09:16,870 --> 00:09:20,730
suporte de etiqueta aqui, se você o nomeou de maneira diferente,

105
00:09:20,800 --> 00:09:22,990
é necessário nomeá-lo de forma

106
00:09:22,990 --> 00:09:29,230
diferente aqui, é claro, e o rótulo é, obviamente, GlutenFree, porque estou prestes a substituir essa opção aqui.

107
00:09:29,380 --> 00:09:35,830
Em seguida, precisamos passar para um estado, porque eu adicionei um suporte de estado aqui para gerenciar meu valor.

108
00:09:35,830 --> 00:09:39,610
Se você o nomeou de forma diferente, também precisa nomeá-lo lá

109
00:09:39,620 --> 00:09:42,970
embaixo, e aqui vou apontar para isGlutenFree, para minhas

110
00:09:42,970 --> 00:09:45,120
necessidades de estado e onChange

111
00:09:45,130 --> 00:09:49,840
a ser fornecido porque aqui estou usando o suporte onChange para vinculá-lo ao onValueChange.

112
00:09:49,840 --> 00:09:55,990
Portanto, isso deve apontar para uma função e, é claro, aqui, vou simplesmente mantê-la

113
00:09:55,990 --> 00:10:03,550
aqui e, como apenas uso onChange aqui para encaminhá-lo para onValueChange, também obtemos o novo argumento de valor aqui.

114
00:10:04,870 --> 00:10:10,480
Agora podemos nos livrar dessa visão lá em baixo e apenas usar nosso componente de chave de filtro e agora

115
00:10:10,510 --> 00:10:13,270
simplesmente repetir o que é obviamente muito mais fácil.

116
00:10:13,270 --> 00:10:23,450
Então agora aqui também podemos ter lactoseFree, vegan e vegetariano e precisamos adicionar

117
00:10:24,490 --> 00:10:34,740
três novos estados agora, então, deixe-me replicar isso, temos isLactoseFree e set isLactoseFree,

118
00:10:34,740 --> 00:10:39,210
aqui temos isVegan e set isVegan

119
00:10:39,270 --> 00:10:42,720
e aqui temos isVegetarian

120
00:10:48,010 --> 00:10:51,000
e set isVegetarian.

121
00:10:51,020 --> 00:10:57,740
Agora, precisamos apenas garantir que usemos os estados nos lugares certos; portanto, para o segundo comutador de

122
00:10:57,760 --> 00:11:02,220
filtro em que temos o filtro lactoseFree, encaminho o estado isLactoseFree

123
00:11:02,250 --> 00:11:09,100
e atualizo o conjunto isLactoseFree, é claro. Para a troca vegan,

124
00:11:09,160 --> 00:11:17,980
encaminho isVegan e o atualizamos com set isVegan e para vegetarianos, encaminhámos

125
00:11:17,980 --> 00:11:22,060
isVegetarian e atualizamos set isVegetarian, assim.

126
00:11:25,410 --> 00:11:25,880
OK,

127
00:11:25,970 --> 00:11:31,790
deve ser isso, se agora salvarmos isso, teremos uma tela de filtro com nossos diferentes filtros que podemos

128
00:11:31,790 --> 00:11:36,770
definir independentemente, porque estamos tendo estados independentes. Eu acho que seria bom ter

129
00:11:36,770 --> 00:11:43,610
algum espaçamento entre essas linhas, então vamos implementar isso. No nosso contêiner de filtro aqui, podemos simplesmente adicionar

130
00:11:43,610 --> 00:11:50,570
uma margem vertical, digamos 10 ou 50, talvez, um pouco mais e isso deve garantir que haja algum

131
00:11:50,570 --> 00:11:51,970
espaçamento lá,

132
00:11:52,130 --> 00:11:54,550
sim, e isso parece muito bom.