1
00:00:02,350 --> 00:00:09,690
Então, com isso, vamos começar com nosso aplicativo aqui e existem várias maneiras de começar, é claro.

2
00:00:09,700 --> 00:00:10,520
Quero

3
00:00:10,690 --> 00:00:19,420
começar largando esse estilo de contêiner aqui na minha tela inicial e, em vez disso, quero me livrar do texto

4
00:00:19,960 --> 00:00:25,060
e tudo aqui e quero começar adicionando meu próprio cabeçalho, portanto, esta

5
00:00:25,060 --> 00:00:27,790
barra na parte superior da tela.

6
00:00:28,150 --> 00:00:34,360
Agora, podemos criar essa barra por conta própria aqui, deixe-me livrar dessa importação da qual não

7
00:00:34,360 --> 00:00:39,880
precisamos e eu a construírei não dentro deste componente do aplicativo, mas em

8
00:00:39,880 --> 00:00:46,630
um arquivo de componente separado, em um componente personalizado separado porque e isso já é uma coisa

9
00:00:46,630 --> 00:00:47,630
super importante,

10
00:00:47,680 --> 00:00:55,360
como no React para aplicativos da web, é uma boa prática dividir seu aplicativo em vários componentes que você compõe,

11
00:00:55,360 --> 00:00:59,540
pois isso leva a um código mais gerenciável e reutilizável.

12
00:00:59,540 --> 00:01:04,660
Então, eu adicionarei uma nova pasta, componentes, o nome é com você, você pode nomear essa pasta como quiser

13
00:01:04,910 --> 00:01:09,360
e lá eu quero ter um cabeçalho. arquivo js para conter o componente do cabeçalho.

14
00:01:09,490 --> 00:01:14,490
Lá, precisamos importar o React do React para que possamos usar o React

15
00:01:14,500 --> 00:01:23,300
lá e escrever o código jsx. Também precisaremos de alguns componentes do React Native, porque você nunca deve esquecer que esses são

16
00:01:23,300 --> 00:01:27,650
os únicos componentes principais que você pode usar no fim.

17
00:01:27,650 --> 00:01:31,310
Você não pode usar nenhum elemento HTML da Web ou algo assim,

18
00:01:31,310 --> 00:01:34,720
você precisa dessas primitivas principais que o React Native fornece.

19
00:01:34,850 --> 00:01:40,290
Definitivamente, precisaremos de uma visualização aqui e também um componente de texto e também um componente da folha de estilo

20
00:01:40,520 --> 00:01:43,420
e, agora, com isso, podemos começar a criar nosso cabeçalho.

21
00:01:43,550 --> 00:01:51,890
Portanto, para isso, adicionarei uma constante de cabeçalho que contém meu componente funcional, porque trabalharei apenas com componentes funcionais neste

22
00:01:51,890 --> 00:01:58,560
curso, usaremos ganchos em locais onde precisamos gerenciar efeitos colaterais ou de estado e, aqui, vamos

23
00:01:58,620 --> 00:02:06,170
é claro que exporte esse componente no final e também configure um objeto de estilos com a folha

24
00:02:06,170 --> 00:02:10,460
de estilos criada para que possamos estilizar isso no final.

25
00:02:10,520 --> 00:02:13,020
Agora vamos criar nosso componente aqui, vamos retornar algo

26
00:02:13,040 --> 00:02:14,580
aqui e o que eu quero

27
00:02:14,750 --> 00:02:19,120
retornar é no final uma visualização com o texto dentro dele e o texto deve ser

28
00:02:19,120 --> 00:02:20,190
o nosso título.

29
00:02:20,300 --> 00:02:26,780
Portanto, portanto, entre a tag de abertura e fechamento aqui, apresentarei o título de adereços para que nosso

30
00:02:26,780 --> 00:02:34,010
próprio componente possa receber o título e propôs-o aqui. E a vista em torno do texto será usada para posicionar

31
00:02:34,010 --> 00:02:40,790
o texto e para dar algum estilo a ele, portanto, para estilizar nosso cabeçalho, porque os elementos de texto por si

32
00:02:40,880 --> 00:02:47,960
só também têm estilo, mas não na mesma extensão que as visualizações, as visualizações são realmente um pouco mais flexível em relação

33
00:02:47,960 --> 00:02:53,090
aos estilos que você pode atribuir e em como eles se comportam e, portanto, você

34
00:02:53,120 --> 00:02:59,600
sempre deseja usar uma visualização para um contêiner circundante e para esse estilo geral que seu componente possa ter ou

35
00:02:59,600 --> 00:03:02,380
que partes do seu componente possam ter.

36
00:03:02,390 --> 00:03:08,810
Então, aqui, adicionarei o estilo prop e atribuirei um estilo ao meu objeto styles, um estilo que ainda não criamos lá, mas

37
00:03:08,810 --> 00:03:16,810
o nomeio de cabeçalho e também darei ao texto um estilo prop e aponte para denomine o título do cabeçalho ou o nome que você quiser, porque,

38
00:03:16,820 --> 00:03:21,500
como eu disse, você também pode estilizar o texto e aqui quero ter alguns estilos específicos

39
00:03:21,500 --> 00:03:28,360
depois, para garantir que o texto tenha uma boa aparência. Então agora aqui na folha de estilo, podemos começar a

40
00:03:28,450 --> 00:03:35,170
estilizar nosso cabeçalho e começarei com o próprio cabeçalho, adicionando um cabeçalho prop e, em seguida, esse objeto manterá essas

41
00:03:35,170 --> 00:03:40,810
definições de estilo para o cabeçalho, portanto, para este componente de exibição aqui e ali de Claro,

42
00:03:40,810 --> 00:03:46,960
você é livre para experimentar o que quiser. Eu irei com uma largura de 100%, para que

43
00:03:47,080 --> 00:03:53,470
seja preciso a largura total do dispositivo que pudermos obter ou a largura total do componente pai, para ser mais preciso,

44
00:03:53,470 --> 00:03:58,810
mas vou adicioná-lo para que o componente pai tenha a largura total do dispositivo e, portanto, ,

45
00:03:58,840 --> 00:04:05,040
isso também terá a largura total do dispositivo no final. Atribua uma altura e lá, você pode experimentar

46
00:04:05,040 --> 00:04:10,020
com valores diferentes, achei 90 parecendo bastante decente e, portanto, vou com isso.

47
00:04:10,020 --> 00:04:16,500
Nota: por enquanto, otimizarei essas telas que tenho aqui, no próximo módulo do curso, abordaremos

48
00:04:16,500 --> 00:04:23,610
como você pode ajustar suas visualizações e seu código para diferentes dispositivos, tanto em relação ao tamanho

49
00:04:23,610 --> 00:04:30,690
quanto à plataforma seu código está sendo executado. Por enquanto, não teremos nenhuma diferenciação por lá,

50
00:04:30,690 --> 00:04:37,640
ajustaremos também em nosso aplicativo para ficar bem nesses dois emuladores, mas, novamente, abordarei isso mais tarde.

51
00:04:37,830 --> 00:04:45,900
Então, altura de 90, um preenchimento na parte superior de 36 para ter algum espaçamento para o topo e

52
00:04:45,900 --> 00:04:53,130
eu preciso adicioná-lo para lidar basicamente com coisas como a barra de status aqui ou esse

53
00:04:53,160 --> 00:05:00,200
entalhe aqui, portanto, eu adiciono esta parte superior e também quero para adicionar uma cor de

54
00:05:00,360 --> 00:05:04,760
fundo aqui e agora você está totalmente livre para

55
00:05:04,770 --> 00:05:13,350
escolher a cor que quiser, preparei uma cor agradável, um código hexadecimal de uma cor que eu pessoalmente gosto e

56
00:05:13,380 --> 00:05:21,450
que é # f7287b, que é uma cor bastante agradável na minha opinião como você verá em um segundo.

57
00:05:21,460 --> 00:05:27,250
Agora também quero centralizar o título e, portanto, usarei alinhar itens e justifyContent, porque

58
00:05:27,340 --> 00:05:33,280
cada visualização por padrão usa flexbox e, portanto, com alinhar itens e justifyContent, podemos

59
00:05:33,280 --> 00:05:39,610
controlar como os elementos filhos da visualização são posicionados dentro da visualização e com o

60
00:05:39,640 --> 00:05:40,780
centro para

61
00:05:40,780 --> 00:05:48,010
alinhar itens e o justifyContent também definido como central, centralizamos todos os filhos ou elementos filhos dentro da

62
00:05:48,010 --> 00:05:50,680
vista no centro, horizontal e verticalmente.

63
00:05:50,680 --> 00:05:52,480
Agora, para o título

64
00:05:52,480 --> 00:05:55,640
do cabeçalho, também quero configurar alguns estilos para isso.

65
00:05:55,780 --> 00:06:05,230
Então, o título do cabeçalho aqui, que deve ter uma cor preta, porque se encaixa nessa cor aqui e para que possamos ler o

66
00:06:05,260 --> 00:06:11,020
texto e eu quero definir o tamanho da fonte como 18, digamos, para que possamos

67
00:06:11,050 --> 00:06:18,500
corrigir isso um pouco tamanho da fonte maior aqui. Com isso, vamos tentar usar esse cabeçalho

68
00:06:18,620 --> 00:06:26,550
e usá-lo no aplicativo. arquivo js aqui. Lá, temos essa visão

69
00:06:26,560 --> 00:06:31,070
e essa visão não tem estilo anexado.

70
00:06:31,150 --> 00:06:38,050
Vou mudar isso e configurar uma tela aqui e atribuir a este um flex de um atributo.

71
00:06:38,050 --> 00:06:44,090
Agora, podemos atribuir isso aqui e o flex one garantirá que essa visualização ocupe todo o espaço

72
00:06:44,140 --> 00:06:49,780
possível e, como é a visualização raiz do nosso aplicativo, isso significa que ela terá

73
00:06:49,780 --> 00:06:56,770
toda a largura e altura que puder obter, ocupará todo o espaço screen e, portanto, como meu cabeçalho ocupa largura

74
00:06:56,770 --> 00:07:03,730
100%, já que o adicionarei diretamente dentro desta visualização, que agora está configurada para ter largura e altura completas,

75
00:07:03,730 --> 00:07:06,360
esse cabeçalho também terá largura total.

76
00:07:06,370 --> 00:07:08,440
Então agora só precisamos adicionar o cabeçalho aqui,

77
00:07:08,440 --> 00:07:12,480
é claro, então importe o cabeçalho de. / components / header, você pode

78
00:07:12,580 --> 00:07:20,020
omitir a extensão do arquivo e simplesmente adicionar o cabeçalho como uma tag de fechamento automático aqui, mas não se esqueça de definir um suporte

79
00:07:20,020 --> 00:07:25,120
de título porque lembre-se de que estamos produzindo o suporte de título aqui entre as tags de

80
00:07:25,570 --> 00:07:33,120
texto, para que pode adicionar um título aqui, e eu o nomeei, acho que é um número, porque é disso que se trata o nosso jogo.

81
00:07:33,120 --> 00:07:39,210
Agora, se salvarmos isso, ele deverá ser reconstruído automaticamente e você deverá ver um cabeçalho parecido com este no iPhone e assim aqui no

82
00:07:39,240 --> 00:07:45,900
Android, e eu diria que não há problema em ambos os dispositivos. Mais uma vez, exploraremos mais tarde maneiras de

83
00:07:46,290 --> 00:07:52,320
como você pode ajustar a aparência do dispositivo específico em que seu aplicativo está sendo executado.