1
00:00:02,230 --> 00:00:09,790
Então, eu quero começar com um ajuste fino da fonte em minhas guias aqui, no cabeçalho e também no

2
00:00:09,970 --> 00:00:15,940
texto aqui em todas as minhas receitas. Quero ter certeza de que, em todos os lugares, estou usando a

3
00:00:15,940 --> 00:00:19,930
fonte certa, minhas próprias fontes personalizadas e, especialmente aqui, no cabeçalho, nas guias, ainda não estamos garantindo isso.

4
00:00:20,050 --> 00:00:22,970
Claro, é relativamente fácil garantir

5
00:00:22,990 --> 00:00:31,040
isso e vamos começar com o cabeçalho. O cabeçalho geralmente possui um estilo, como a cor do plano de fundo,

6
00:00:31,040 --> 00:00:34,200
com nossas opções de navegação padrão que sempre configuramos no

7
00:00:34,210 --> 00:00:40,640
navegador da pilha, as opções de navegação padrão aqui permitem estilizar o cabeçalho e, por exemplo, atribuir ao cabeçalho em geral

8
00:00:40,640 --> 00:00:43,390
um estilo e adicione uma cor de fundo.

9
00:00:43,470 --> 00:00:50,750
Agora, é importante reconhecer aqui que o estilo do cabeçalho realmente visa apenas a caixa, o plano de fundo, por

10
00:00:50,750 --> 00:00:59,540
assim dizer, o contêiner no qual os itens de ação, o botão voltar e esse título ficam, o título em si não pode ser

11
00:00:59,660 --> 00:01:02,390
direcionado com o estilo de cabeçalho, mas

12
00:01:02,390 --> 00:01:08,420
é claro que temos uma alternativa para isso. Além do estilo de cabeçalho, no qual podemos estilizar

13
00:01:08,420 --> 00:01:14,300
esse contêiner de cabeçalho, também temos um estilo de título de cabeçalho e, sem surpresa, é direcionado para o componente

14
00:01:14,300 --> 00:01:20,420
de texto no qual nosso título de cabeçalho é apresentado e podemos estilizá-lo como podemos estilizar elementos de texto no React

15
00:01:20,420 --> 00:01:23,960
Native, por exemplo adicionando uma família de fontes open sans, novamente estou

16
00:01:23,960 --> 00:01:27,280
usando a versão sem negrito para que possamos ver rapidamente a diferença.

17
00:01:27,320 --> 00:01:35,560
Isso claramente não está mais em negrito, eu acho, é bem claro de ver, especialmente aqui no iOS e agora,

18
00:01:35,560 --> 00:01:40,240
se eu definir isso em negrito, garanto que eu uso esse

19
00:01:40,240 --> 00:01:46,280
estilo certo no iOS e no Android. Agora, para o texto de retorno aqui, a propósito, também

20
00:01:46,540 --> 00:01:53,380
podemos substituir o padrão, que é a fonte padrão do sistema, definindo o estilo de título de cabeçalho para trás, que é

21
00:01:53,380 --> 00:01:53,930
uma

22
00:01:53,950 --> 00:01:59,110
configuração separada que podemos configurar aqui e ali, também podemos definir a família de fontes como

23
00:01:59,140 --> 00:02:01,350
digamos open sans, não a versão

24
00:02:01,360 --> 00:02:07,600
em negrito, não quero ter isso no estilo bold (realce), mas quero tê-lo em minha própria fonte e agora deve

25
00:02:07,600 --> 00:02:13,470
ser open sans aqui e usar minha própria fonte. No Android, é claro, isso não tem efeito, porque

26
00:02:13,470 --> 00:02:17,170
não temos texto de volta. Então isso é

27
00:02:17,190 --> 00:02:24,660
o cabeçalho, para as guias é bem parecido. Lá, podemos ir para o navegador da guia que estamos criando,

28
00:02:24,660 --> 00:02:25,940
como o navegador da

29
00:02:25,950 --> 00:02:26,700
guia

30
00:02:26,880 --> 00:02:33,390
inferior do material e, é claro, esse é o nosso tabScreenConfig e, em seguida, esse segundo objeto em que configuramos

31
00:02:33,390 --> 00:02:34,440
o próprio navegador

32
00:02:34,440 --> 00:02:38,880
e, como sempre, na opção React navigation, é o segundo objeto em que pode

33
00:02:38,880 --> 00:02:44,270
controlar a aparência geral das coisas específicas do navegador, como no navegador da guia, a cor

34
00:02:44,280 --> 00:02:52,280
do ícone da guia, a cor da barra, a cor da tonalidade ou também o estilo da etiqueta e, de fato, aqui nas opções

35
00:02:52,280 --> 00:02:56,330
da barra de guias para o navegador da guia inferior, podemos adicionar

36
00:02:56,330 --> 00:02:59,000
um estilo de etiqueta e, novamente, isso visa

37
00:02:59,000 --> 00:03:03,010
o componente de texto que contém nossa etiqueta, podemos adicionar uma família

38
00:03:03,140 --> 00:03:09,230
de fontes aqui do OpenSans-Bold para que possamos ver claramente a diferença, se isso for recarregada, agora isso claramente

39
00:03:09,230 --> 00:03:12,800
é algum texto em negrito. Na verdade, isso não parece muito ruim,

40
00:03:12,800 --> 00:03:14,510
então acho que podemos manter isso, mas

41
00:03:14,720 --> 00:03:18,920
é claro que você também pode configurá-lo para abrir sans se você quiser uma versão mais fina, mas

42
00:03:19,010 --> 00:03:22,320
agora eu usaria nossa própria fonte. Agora para Android,

43
00:03:22,320 --> 00:03:29,600
aqui o navegador da guia inferior do material também possui algumas opções de configuração, mas, na verdade, ele

44
00:03:29,720 --> 00:03:31,910
não possui um estilo de etiqueta.

45
00:03:31,910 --> 00:03:38,690
Em vez disso, o que você pode fazer é nas guias separadas que você está carregando, assim nas opções de navegação das

46
00:03:38,690 --> 00:03:47,170
guias que você está carregando, onde você também está configurando o ícone da barra de guias e assim por diante, para adicionar o rótulo da barra de guias

47
00:03:47,170 --> 00:03:54,160
aqui, onde poderíamos definir um rótulo como refeições, várias marcas de explicação para substituir o que usamos como rótulo agora no iOS e

48
00:03:54,160 --> 00:03:54,540
também

49
00:03:54,550 --> 00:04:00,490
no Android e que pode realmente ser uma string como essa, mas você também pode definir isso como um

50
00:04:00,490 --> 00:04:07,450
componente React, para um componente de texto, ou seja, e aí dentro, você pode configurar seu rótulo, refeições, mas é claro que agora

51
00:04:07,720 --> 00:04:11,490
aqui, você pode adicionar estilo e adicionar os estilos que desejar.

52
00:04:11,500 --> 00:04:16,120
Uma solução alternativa, já que não há outra maneira integrada de estilizar isso para o navegador

53
00:04:16,120 --> 00:04:19,060
das guias inferiores do material, mas melhor do que nada.

54
00:04:19,060 --> 00:04:25,060
Então, aqui, agora podemos definir a família de fontes como OpenSans-Bold e, se fizermos isso, é claro que também precisamos

55
00:04:25,060 --> 00:04:30,240
garantir que agora importemos o componente de texto do React Native porque, caso contrário, não podemos usá-lo

56
00:04:35,760 --> 00:04:40,980
lá e agora com isso , também temos isso no iOS, porque estamos compartilhando a configuração, vamos corrigir

57
00:04:40,980 --> 00:04:45,780
isso em um segundo, mas agora, é assim que podemos definir nosso próprio estilo lá,

58
00:04:45,810 --> 00:04:52,820
mas é claro que agora perdemos a cor que é a desvantagem de definir isso manualmente aqui e, como precisamos dessa solução alternativa aqui,

59
00:04:52,820 --> 00:04:59,930
para Android, para as guias inferiores do material, a correção mais fácil é usar a API da plataforma e definir esse rótulo da barra

60
00:04:59,930 --> 00:05:04,760
de guias apenas para esse componente de texto se ' re no Android, porque só então,

61
00:05:04,760 --> 00:05:11,330
precisamos dessa solução alternativa para definir a família de fontes. Então, vou verificar se estamos no Android e, se for

62
00:05:11,330 --> 00:05:18,650
o caso, retornarei um componente de texto aqui, caso contrário, retornarei as refeições de texto e a vantagem de retornar um texto aqui

63
00:05:18,650 --> 00:05:24,710
simplesmente é que nosso outro as configurações que definem a cor da tonalidade, o estilo da etiqueta e assim

64
00:05:24,710 --> 00:05:30,920
por diante serão ativadas e não serão substituídas. Se definirmos nosso próprio componente de texto, desabilitaremos todo esse

65
00:05:30,920 --> 00:05:34,700
recurso padrão, todos esses recursos padrão que estão embutidos no navegador da guia inferior.

66
00:05:34,700 --> 00:05:39,200
O problema com o navegador da guia inferior do material é que ele simplesmente não

67
00:05:39,200 --> 00:05:39,800
possui todos

68
00:05:39,860 --> 00:05:44,690
esses recursos padrão incorporados; portanto, precisamos substituir isso, mas precisamos fazer isso apenas para Android, por outro lado.

69
00:05:44,780 --> 00:05:48,290
Agora podemos copiar isso e fazer exatamente a mesma coisa, é

70
00:05:48,290 --> 00:05:57,530
claro, aqui para favoritos, renderizar favoritos como um texto no iOS e, é claro, também no componente de texto para Android e, com isso, agora devemos ter um

71
00:05:57,590 --> 00:06:03,860
estilo que funcione e que pareça bom . No iOS, basicamente não mudamos

72
00:06:03,920 --> 00:06:09,740
nada e no Android, agora também temos nossas próprias fontes personalizadas.

73
00:06:09,740 --> 00:06:12,520
Portanto, é um pouco de solução alternativa que

74
00:06:12,520 --> 00:06:19,130
é necessária aqui, infelizmente, ao trabalhar com o navegador das guias inferiores, mas também não é muito difícil de implementar e,

75
00:06:19,130 --> 00:06:24,290
com isso, garantimos que estamos usando nossa própria fonte personalizada em qualquer lugar da navegação relacionada recursos

76
00:06:24,800 --> 00:06:25,850
do nosso aplicativo.