1
00:00:02,270 --> 00:00:05,450
Então, como podemos atribuir ícones aqui?

2
00:00:05,450 --> 00:00:09,580
Como podemos então garantir que usamos a cor que

3
00:00:09,590 --> 00:00:10,990
queremos usar?

4
00:00:11,090 --> 00:00:12,760
Vamos começar com

5
00:00:12,760 --> 00:00:17,920
a cor antes de adicionar os ícones. Assim como a função de navegação de pilha de

6
00:00:18,020 --> 00:00:20,290
criação de pilha, o navegador de aba

7
00:00:20,290 --> 00:00:25,250
criar parte inferior também utiliza um segundo argumento. O primeiro argumento é o seu objeto de configuração,

8
00:00:25,280 --> 00:00:27,370
onde você configura as diferentes guias e as

9
00:00:27,410 --> 00:00:33,600
telas para as quais apontam; o segundo argumento também é um objeto em que você pode configurar o navegador em geral e,

10
00:00:33,610 --> 00:00:35,290
aí, você tem algumas configurações.

11
00:00:35,330 --> 00:00:40,120
Novamente, os documentos oficiais são o local para aprender sobre todas as configurações

12
00:00:40,310 --> 00:00:45,340
aqui, uma das configurações mais importantes aqui são as opções da barra de guias.

13
00:00:45,380 --> 00:00:52,970
Este é outro objeto e, lá, você pode controlar em detalhes como a barra de guias aparece, como é estilizada.

14
00:00:53,090 --> 00:00:59,180
Você pode configurar uma cor de tonalidade inativa, que é a cor da guia que não está ativa no momento.

15
00:00:59,180 --> 00:01:03,160
Você pode configurar uma cor de tonalidade ativa e é disso que realmente precisamos

16
00:01:03,170 --> 00:01:08,600
aqui, você pode configurar uma cor de plano de fundo ativa e uma cor de plano de fundo inativa,

17
00:01:08,600 --> 00:01:11,720
bem como, é claro, também alterar o plano de fundo

18
00:01:11,930 --> 00:01:16,540
das guias aqui, se desejar e, portanto, muitas possibilidades para realmente ajustar isso às suas necessidades.

19
00:01:16,660 --> 00:01:20,000
E aqui, definirei uma cor de tonalidade ativa, porque é

20
00:01:20,000 --> 00:01:25,910
tudo o que preciso aqui, mas é claro, fique à vontade para brincar com isso e alterar as cores

21
00:01:25,910 --> 00:01:32,330
de fundo também e alterar outras configurações. Definirei minha cor de tonalidade ativa como um valor para minhas cores constantes

22
00:01:32,330 --> 00:01:35,390
que eu importo aqui, vou defini-las como cores acentuadas.

23
00:01:35,410 --> 00:01:37,300
Você não o usou antes, mas agora

24
00:01:37,370 --> 00:01:42,290
eu vou usá-lo e essa é a cor laranja que agora temos, e é assim que mudamos

25
00:01:42,290 --> 00:01:45,900
a cor da guia ativa. Agora isso é uma coisa,

26
00:01:46,110 --> 00:01:50,280
observe também que, obviamente, isso não adiciona um ícone e como seria,

27
00:01:50,280 --> 00:01:51,020
não

28
00:01:51,030 --> 00:01:57,300
estamos dizendo nada sobre o ícone que queremos adicionar. Agora, para adicionar o ícone, acho que o padrão

29
00:01:57,480 --> 00:02:01,860
direto é que você vá para a sua configuração de rota aqui, para

30
00:02:01,860 --> 00:02:07,710
a configuração em que você mapeia as telas para suas guias e usa o formulário mais longo em

31
00:02:07,710 --> 00:02:12,000
que você adiciona a propriedade screen e onde também adiciona opções de navegação.

32
00:02:12,000 --> 00:02:17,370
A propósito, você também pode fazer isso diretamente no componente, naturalmente, adicionando opções de

33
00:02:17,400 --> 00:02:19,700
navegação, como fizemos anteriormente, no

34
00:02:19,710 --> 00:02:25,080
entanto, como as refeições aqui na verdade são um navegador, o único local para

35
00:02:25,110 --> 00:02:26,560
adicionar opções de

36
00:02:26,700 --> 00:02:31,330
navegação é claro aqui ou também aqui, em criar navegador de pilha.

37
00:02:31,560 --> 00:02:37,290
Lá, você também pode configurar uma chave de opções de navegação aqui no segundo argumento; nesse objeto, você

38
00:02:37,320 --> 00:02:42,390
passa como um segundo argumento para criar um navegador de pilha, onde você configura o

39
00:02:42,390 --> 00:02:48,180
navegador geral para fornecer ao próprio navegador algumas opções de navegação, porque as opções de navegação atribuídas a

40
00:02:48,180 --> 00:02:54,060
o navegador de refeições, portanto, para o navegador de pilha, agora são as opções levadas em conta pelo

41
00:02:54,270 --> 00:03:00,810
navegador de guias que usa esse navegador de refeições como um navegador aninhado e as opções de navegação que podemos

42
00:03:01,140 --> 00:03:10,680
definir aqui incluem um ícone da barra de guias. Podemos adicionar o ícone da barra de guias aqui e o ícone da barra de guias é realmente uma função. Não é um único ícone

43
00:03:10,770 --> 00:03:18,900
que você aponta, mas sim uma função. É uma função que recebe algumas informações da guia que você poderia

44
00:03:18,990 --> 00:03:23,300
dizer, deve ir aqui, esse é o argumento que obtemos automaticamente, porque essa

45
00:03:23,330 --> 00:03:28,490
função obviamente será chamada pelo ícone React Navigation e da barra de guias, essa função aqui

46
00:03:28,970 --> 00:03:34,340
tem que retornar o ícone que você deseja renderizar para esta guia, portanto, neste caso, para

47
00:03:34,340 --> 00:03:35,720
a guia refeições.

48
00:03:39,680 --> 00:03:46,360
Isso significa que eu preciso usar ícones aqui e, para isso, podemos importar ionicons ou qualquer outro conjunto

49
00:03:46,370 --> 00:03:50,680
de ícones que você queira usar do @ expo / vector-icons.

50
00:03:50,680 --> 00:03:52,440
Novamente, sinta-se à vontade para

51
00:03:52,450 --> 00:03:57,400
instalar este pacote, normalmente ele deve ser instalado automaticamente ao trabalhar com a Expo, mas você pode

52
00:03:57,400 --> 00:04:03,040
simplesmente executar o npm install --save @ expo / vector-icons para ter certeza de que está instalado e usar qualquer

53
00:04:03,100 --> 00:04:07,980
conjunto de ícones você quer, mas eu sempre uso os ionicons ao longo deste curso, vou cumpri-los.

54
00:04:08,230 --> 00:04:12,340
Com isso, você pode usar os ionicons como um componente, como aprendeu anteriormente no curso.

55
00:04:12,340 --> 00:04:18,580
Então, aqui podemos apenas retornar ionicons como este para renderizar um ícone de ionicon e agora você

56
00:04:18,580 --> 00:04:20,090
pode usar qualquer

57
00:04:20,170 --> 00:04:24,090
nome de ícone que desejar aqui e aqui eu quero usar

58
00:04:24,100 --> 00:04:29,090
o ios-restaurant, que é simplesmente um ícone que encontrei na lista de ícones, nesta

59
00:04:29,320 --> 00:04:32,750
lista aqui que também mostrei anteriormente, é esse ícone

60
00:04:32,870 --> 00:04:37,320
do ios-restaurante que eu escolhi, que agora uso e que aponto aqui.

61
00:04:37,450 --> 00:04:40,120
Este é o ícone que eu quero

62
00:04:40,120 --> 00:04:42,610
renderizar, eu darei um tamanho de

63
00:04:42,610 --> 00:04:43,990
25, você

64
00:04:43,990 --> 00:04:46,890
pode experimentar, mas eu achei 25 bastante

65
00:04:46,900 --> 00:04:50,200
decentes aqui na barra de guias e em uma

66
00:04:50,350 --> 00:04:57,610
cor, e isso agora é importante para o tabInfo. tintColor porque a cor que definimos aqui, obviamente, deve ser a nossa cor de

67
00:04:57,610 --> 00:04:58,810
matiz que configuramos aqui.

68
00:04:58,810 --> 00:05:01,980
Agora, é claro, poderíamos codificar isso para colorir cores de destaque aqui,

69
00:05:01,990 --> 00:05:06,030
mas se a mudarmos lá em baixo, teremos que lembrar que também a mudaremos lá em cima.

70
00:05:06,040 --> 00:05:11,440
A coisa boa é e é por isso que essa é uma função, que a navegação React chama

71
00:05:11,440 --> 00:05:17,830
essa função para nós e nos fornece algumas informações vitais sobre como nossa barra de guias é configurada nesse objeto de informações

72
00:05:17,830 --> 00:05:23,350
da guia e que, por exemplo, inclui a cor da tonalidade que configuramos , para que possamos recuperar dinamicamente

73
00:05:23,350 --> 00:05:29,440
isso aqui para colorir o ícone, para que, se mudarmos a cor da barra de guias para baixo, ela seja refletida

74
00:05:29,470 --> 00:05:30,910
automaticamente em nossos ícones

75
00:05:30,940 --> 00:05:35,810
lá em cima, por isso é uma pequena conveniência que temos aqui que podemos usar aqui .

76
00:05:35,810 --> 00:05:42,740
Então, com isso, estou renderizando esses ícones para as refeições e para os favoritos, agora podemos usar uma abordagem semelhante, usar essa forma mais longa onde

77
00:05:42,770 --> 00:05:48,200
configuramos a tela aqui e, em seguida, adicionar opções de navegação aqui que serão mescladas com qualquer navegação opções que configuramos

78
00:05:52,430 --> 00:05:57,400
na tela de favoritos mas lembre-se de que é claro que você também pode configurar as opções de navegação

79
00:05:57,400 --> 00:06:00,920
aqui no componente da tela de favoritos. Portanto, para manter tudo em um

80
00:06:00,980 --> 00:06:03,620
só lugar, eu o farei na minha navegação aqui.

81
00:06:03,620 --> 00:06:06,150
Portanto, essas são as minhas opções

82
00:06:06,170 --> 00:06:11,420
de navegação para essa tela, assim como para este navegador, o navegador de refeições, é claro

83
00:06:11,480 --> 00:06:14,280
que podemos configurar opções de navegação para uma

84
00:06:14,330 --> 00:06:19,880
tela, foi o que fizemos durante todo o módulo, afinal, quero fazer essencialmente o mesmo, então copiarei

85
00:06:19,940 --> 00:06:25,790
isso, adicione-o aqui a este objeto de opções de navegação e a única coisa que difere aqui é

86
00:06:25,790 --> 00:06:30,130
o ícone que eu quero usar, aqui é ios-star em vez de ios-restaurant.

87
00:06:30,290 --> 00:06:36,170
E com isso, se salvarmos isso, eu realmente recebo um erro porque, agora que uso o

88
00:06:36,170 --> 00:06:42,230
jsx aqui, precisamos importar o React, é claro, é assim que o React funciona porque o jsx

89
00:06:42,260 --> 00:06:48,510
nos bastidores é transformado em React criar elemento como você conhece e, portanto, agora depois de adicionar a

90
00:06:48,530 --> 00:06:54,680
importação React aqui no MealsNavigator. arquivo js. Isso funciona e agora temos ícones que recebem

91
00:06:54,680 --> 00:06:58,180
automaticamente a cor da tonalidade e é assim que você pode adicionar ícones com facilidade.

92
00:06:58,270 --> 00:07:03,740
Agora, além de definir o ícone, você também pode definir o rótulo e verá que, por

93
00:07:03,860 --> 00:07:10,580
padrão, o rótulo, as refeições e os favoritos são simplesmente o identificador que atribuímos aqui quando configuramos nossas guias de

94
00:07:10,610 --> 00:07:12,050
navegação e favoritos.

95
00:07:12,050 --> 00:07:17,540
Agora, muitas vezes, isso faz sentido, mas caso você queira ter um rótulo diferente, nas opções de

96
00:07:17,630 --> 00:07:20,780
navegação da tela carregadas aqui nesta guia, você pode configurar

97
00:07:20,780 --> 00:07:28,910
uma propriedade de rótulo da barra de guias e, lá, isso é apenas uma string onde você pode ter favoritos com um ponto de exclamação

98
00:07:28,910 --> 00:07:34,310
e, se você definir isso, verá que agora você tem favoritos com um ponto de exclamação aqui,

99
00:07:34,310 --> 00:07:37,040
em vez de apenas favoritos como antes.

100
00:07:37,040 --> 00:07:42,500
Assim, você pode substituir esse rótulo padrão, que normalmente é o seu identificador, se você quiser

101
00:07:42,500 --> 00:07:47,510
um diferente, pode substituí-lo e, é claro, existem mais opções que você pode definir e

102
00:07:47,510 --> 00:07:52,700
anexar, e encontra um link para os documentos oficiais de neste navegador, onde você pode

103
00:07:52,700 --> 00:08:00,740
aprender tudo sobre as opções que podem ser configuradas no próprio navegador, mas também nas opções de navegação de telas filho, de telas aninhadas

104
00:08:00,740 --> 00:08:04,850
ou navegadores aninhados dentro desse navegador de guias, então o que estamos

105
00:08:04,850 --> 00:08:05,870
configurando aqui.