1
00:00:02,410 --> 00:00:07,070
Portanto, para este módulo, anexado, você encontrará novamente um projeto inicial simples.

2
00:00:07,090 --> 00:00:09,640
Lá você tem o aplicativo. arquivo js com uma visualização

3
00:00:09,790 --> 00:00:11,680
vazia, para que não aconteça muita coisa lá.

4
00:00:11,770 --> 00:00:16,870
Você recebe uma pasta de constantes com uma cor básica que eu configurei para você e é isso.

5
00:00:16,870 --> 00:00:21,010
Fora isso, não há nada interessante aqui, é um aplicativo muito

6
00:00:21,010 --> 00:00:25,320
básico que usaremos agora para criar esse aplicativo que acabei de esboçar.

7
00:00:25,420 --> 00:00:28,930
Agora, é claro, você pode absolutamente seguir em frente e criar o

8
00:00:28,930 --> 00:00:34,870
básico por conta própria, portanto, essas três telas diferentes que precisamos no final ou quatro telas diferentes, uma para todos os

9
00:00:34,870 --> 00:00:40,390
lugares, uma para os detalhes do local, uma para criar um novo local e um para o mapa em

10
00:00:40,390 --> 00:00:45,590
tela cheia que também queremos mostrar, você pode fazer isso absolutamente e criar o esqueleto base para essas

11
00:00:45,590 --> 00:00:51,100
telas por conta própria, também configurar a navegação básica porque essas são, obviamente, todas as coisas que já fizemos

12
00:00:51,370 --> 00:00:52,600
várias vezes nesse curso.

13
00:00:52,750 --> 00:00:57,310
Também é com as coisas que começarei nas próximas palestras, caso você queira seguir por lá

14
00:00:57,310 --> 00:01:01,000
ou comparar sua solução com a minha e, a partir de

15
00:01:01,090 --> 00:01:09,150
então, mergulharemos na essência deste módulo, abordaremos como adicionar recursos nativos de dispositivos . Então, vamos começar com o básico,

16
00:01:09,210 --> 00:01:10,510
portanto.

17
00:01:10,510 --> 00:01:17,080
Vou adicionar uma nova tela de pasta com as quatro telas que eu quero ter e que seriam

18
00:01:17,080 --> 00:01:28,360
o arquivo de tela da lista de locais, o arquivo de tela de detalhes do local, o novo arquivo de tela do local e também a tela do mapa, onde

19
00:01:28,360 --> 00:01:33,770
podemos ver essa tela inteira mapear e preenchê-los-ei com conteúdo em todo este módulo,

20
00:01:33,820 --> 00:01:36,970
mas estas são as quatro telas básicas necessárias.

21
00:01:36,970 --> 00:01:43,460
Também adicionarei uma pasta de navegação para que possamos configurar a navegação lá

22
00:01:43,470 --> 00:01:51,030
e aqui configurarei meu PlacesNavigator. arquivo js. Agora, no projeto inicial que forneci, o

23
00:01:51,450 --> 00:01:52,920
React Navigation e todas

24
00:01:52,920 --> 00:01:56,720
as suas dependências já estão instaladas; portanto, se você estiver usando

25
00:01:58,260 --> 00:02:03,480
isso, não precisará instalá-lo manualmente; caso contrário, se estiver usando seu próprio projeto inicial, verifique se

26
00:02:03,480 --> 00:02:09,660
instalar React Navigation com npm install React Navigation e também certifique-se de instalar essas dependências extras aqui para garantir

27
00:02:09,660 --> 00:02:12,280
que o React Navigation funcione com o expo.

28
00:02:12,330 --> 00:02:19,290
Portanto, com isso instalado, agora é claro que podemos configurar a navegação aqui no navegador de locais e, para isso,

29
00:02:19,380 --> 00:02:24,150
aqui importarei do React Navigation e o que importarei é, obviamente, a função de

30
00:02:26,730 --> 00:02:31,020
criação do navegador de pilha, então crie o navegador de pilha

31
00:02:31,020 --> 00:02:37,110
e também crie um contêiner de aplicativo, o que também precisamos fazer porque precisamos fazer as duas coisas

32
00:02:37,110 --> 00:02:41,580
- crie um navegador de pilha e configure o contêiner de aplicativos posteriormente.

33
00:02:41,580 --> 00:02:46,830
Agora também precisamos importar as telas com as quais queremos trabalhar e essa seria a tela da lista de locais que eu

34
00:02:47,070 --> 00:02:53,640
importarei da pasta screens e lá, é a tela da lista de locais. Também precisaremos da tela de detalhes do local, é

35
00:02:53,640 --> 00:02:59,910
claro, da tela de detalhes do local que é importada das telas, da tela de detalhes do local

36
00:02:59,910 --> 00:03:02,850
e também, obviamente, das outras duas telas.

37
00:03:02,850 --> 00:03:12,800
Então, obtivemos a nova tela de local a partir de telas, nova tela de local e, por último, mas não menos importante, também precisamos importar nossa

38
00:03:12,830 --> 00:03:18,770
tela de mapa aqui da pasta screens e essa seria a tela do mapa.

39
00:03:18,770 --> 00:03:26,800
Agora podemos configurar nosso navegador de pilha aqui e eu armazenarei esse navegador de locais em uma constante e, como você

40
00:03:26,990 --> 00:03:31,440
também aprendeu, agora estamos mapeando identificadores para nossas telas, portanto, talvez tenhamos

41
00:03:31,550 --> 00:03:38,720
o identificador de locais mapeado na tela da lista de locais , mapeamos o identificador de detalhes do local

42
00:03:38,840 --> 00:03:41,180
para a tela de detalhes

43
00:03:41,180 --> 00:03:49,300
do local, também mapeamos o novo identificador de local para a nova tela do local e, por último, mas não menos importante,

44
00:03:49,330 --> 00:03:57,040
talvez o mapa seja mapeado para a tela do mapa. E com isso, podemos configurar algumas opções de navegação padrão

45
00:03:57,130 --> 00:04:02,680
aqui, então passarei um segundo argumento e, é claro, configurá-lo é totalmente opcional, mas adicionarei opções

46
00:04:02,680 --> 00:04:09,970
de navegação padrão a todas as telas e desejo definir meu estilo de cabeçalho aqui e verifique se estamos usando uma

47
00:04:09,970 --> 00:04:14,010
cor de fundo, dependendo de estarmos rodando no Android ou não.

48
00:04:14,140 --> 00:04:21,880
Portanto, importarei essa coisa de API da plataforma do React Native e também precisarei da minha cor, também importarei cores

49
00:04:21,910 --> 00:04:30,790
de Constantes / cores, o que também é necessário porque, com isso, agora podemos verificar se o sistema operacional da plataforma é Android

50
00:04:30,790 --> 00:04:37,120
e, se for, podemos garantir que a cor do plano de fundo do cabeçalho seja a

51
00:04:37,120 --> 00:04:39,400
nossa cor principal; caso contrário,

52
00:04:39,580 --> 00:04:46,600
não definirei nenhuma cor. Quero usar a aparência transparente padrão usada pelo iOS e também configurar uma cor

53
00:04:46,600 --> 00:04:53,080
de tonalidade do cabeçalho para o texto lá, novamente verificando a plataforma, porque se a plataforma

54
00:04:53,080 --> 00:04:59,560
for Android, já que temos um plano de fundo sólido, definirei a cor da tonalidade para

55
00:04:59,590 --> 00:05:06,520
branco, para iOS, farei o oposto; cor primária. Agora que está aqui, não tenho fontes personalizadas neste projeto,

56
00:05:06,520 --> 00:05:12,790
é claro que você pode adicionar algumas, se quiser. Com essa configuração, podemos exportar nosso contêiner de aplicativos, que,

57
00:05:12,790 --> 00:05:21,230
portanto, precisamos criar com criar contêiner de aplicativos e passar no navegador de locais aqui. Agora essa é a configuração de navegação, é

58
00:05:21,230 --> 00:05:24,620
claro no aplicativo.

59
00:05:24,620 --> 00:05:24,620
arquivo js agora podemos usar isso.

60
00:05:24,620 --> 00:05:32,200
Portanto, aqui devemos importar o navegador de locais da pasta de navegação, navegador de locais, não precisamos mais da visualização de visualização

61
00:05:32,240 --> 00:05:39,920
aqui e, portanto, podemos apenas retornar o navegador de locais. Como não estou carregando nenhuma fonte personalizada, também

62
00:05:39,920 --> 00:05:44,540
não preciso fazer esse aplicativo carregando coisas que fizemos anteriormente

63
00:05:44,540 --> 00:05:49,610
ou em outros módulos. Aqui, basta retornar isso desde o início.

64
00:05:51,500 --> 00:05:58,660
Agora, nessas telas aqui, na tela da lista de locais, importarei o React do React, importarei algumas coisas do React Native, provavelmente

65
00:05:58,700 --> 00:06:01,190
uma visualização, um texto e uma folha

66
00:06:01,220 --> 00:06:02,070
de estilo

67
00:06:02,120 --> 00:06:08,570
e, em seguida, podemos ver se precisamos de outra coisa mais tarde no React Native e, em seguida, configure a

68
00:06:08,600 --> 00:06:15,740
constante aqui, a tela da lista de locais é um componente normal do React que recebe adereços e cujo final retorna algum

69
00:06:15,740 --> 00:06:19,550
conteúdo, aqui retornarei uma exibição com um texto da tela da lista

70
00:06:19,550 --> 00:06:24,330
de locais, portanto, apenas alguns conteúdo fictício por enquanto e também tenha a folha de

71
00:06:24,590 --> 00:06:30,230
estilo configurada aqui com a Folha de estilo. criar e, finalmente, exportar

72
00:06:31,190 --> 00:06:34,800
a tela da lista de locais.

73
00:06:34,800 --> 00:06:37,420
E este será o esqueleto básico que podemos usar para todas

74
00:06:37,430 --> 00:06:40,880
as visualizações, então eu o colocarei em todas as visualizações e apenas ajustarei este nome aqui.

75
00:06:40,880 --> 00:06:48,250
Então, aqui temos a tela de detalhes do local que eu quero usar e, em seguida, copie-a também na nova tela de

76
00:06:48,850 --> 00:06:52,720
local e substitua esse nome aqui nos três locais e,

77
00:06:52,720 --> 00:06:58,300
por último, mas não menos importante, solte-o também na tela do mapa para ter isso aqui como

78
00:06:58,300 --> 00:07:02,650
bem, e é claro que adicionaremos o conteúdo real ao longo deste módulo.

79
00:07:02,800 --> 00:07:05,530
Então, essas são as telas criadas, se

80
00:07:05,530 --> 00:07:12,190
agora salvarmos isso e você o executar com o npm start ou com o expo start e o

81
00:07:12,220 --> 00:07:18,660
executar no seu emulador ou emuladores favoritos, assim que terminar a construção, veremos a tela da lista de

82
00:07:18,990 --> 00:07:21,020
locais no final, como esta.

83
00:07:21,120 --> 00:07:26,790
Agora, é claro, não temos um título de cabeçalho aqui, portanto, certifique-se de definir um, também no

84
00:07:27,180 --> 00:07:34,830
Android, indo para a tela da lista de locais e, aí, podemos adicionar opções de navegação da tela da lista de locais e defini-lo

85
00:07:34,830 --> 00:07:42,690
como um objeto estático aqui, onde podemos adicionar um título de cabeçalho de todos os lugares ou algo assim e com isso, é claro, uma

86
00:07:42,690 --> 00:07:47,840
vez que isso é recarregado, vemos esse título aqui na tela da lista de locais.

87
00:07:48,030 --> 00:07:55,260
Essa é a tela básica configurada que precisamos para este módulo aqui. Com isso antes de nos aprofundarmos no conteúdo das

88
00:07:55,260 --> 00:07:58,530
outras telas, vamos garantir que também tenhamos um

89
00:07:58,650 --> 00:08:04,020
botão de adição aqui no cabeçalho, o que nos levará à nova tela

90
00:08:04,020 --> 00:08:10,770
do local, porque é aí que podemos começar a tocar em funcionalidades nativas do dispositivo e com

91
00:08:10,770 --> 00:08:13,010
a adição de locais.

92
00:08:13,090 --> 00:08:20,200
Agora, é claro que você sabe como adicionar um botão ao cabeçalho do seu navegador, tudo o que você precisa fazer

93
00:08:20,200 --> 00:08:27,040
é instalar um novo pacote com o npm install --save, e esse é o pacote react-navigation header-buttons que usamos algumas

94
00:08:27,040 --> 00:08:32,170
vezes ao longo deste curso e vou usá-lo exatamente da mesma maneira que o usei

95
00:08:32,170 --> 00:08:33,790
no restante do curso.

96
00:08:33,880 --> 00:08:39,880
Portanto, criarei uma pasta de componentes na qual posso configurar meu próprio

97
00:08:40,000 --> 00:08:51,020
componente de botão de cabeçalho para ter esse componente de botão reutilizável pré-configurado e, nesse componente, importo o botão de cabeçalho deste pacote

98
00:08:51,080 --> 00:09:02,460
de botões de cabeçalho de navegação React que acabamos de instalar. Importe Ionicons do expo / vector-icons, um pacote que você pode querer

99
00:09:02,510 --> 00:09:07,110
instalar caso esteja recebendo erros aqui com o npm install

100
00:09:07,110 --> 00:09:18,840
--save e também importe as cores constantes da pasta constantes e, arquivo de cores e, em seguida, aqui nós tem um botão de cabeçalho personalizado de

101
00:09:18,840 --> 00:09:24,870
componente regular que recebe adereços que retornam algum jsx e aqui quero retornar

102
00:09:24,880 --> 00:09:31,260
o botão de cabeçalho que estamos importando, mas agora vamos configurá-lo de acordo com

103
00:09:31,260 --> 00:09:32,750
nossos requisitos.

104
00:09:33,000 --> 00:09:39,240
Antes de tudo, encaminhando todos os acessórios para ele e, em seguida, podemos definir o componente de

105
00:09:39,270 --> 00:09:40,480
ícone como

106
00:09:40,590 --> 00:09:47,250
ionicon, para que isso seja usado, defina o tamanho do ícone aqui talvez como 23, porque acho que funcionou

107
00:09:47,250 --> 00:09:48,870
muito bem até agora e

108
00:09:48,870 --> 00:09:57,240
defini a cor para e agora eu vou precisar de uma outra importação, vou precisar importar a plataforma do React Native, porque agora quero

109
00:09:57,600 --> 00:09:59,940
verificar a plataforma aqui e, se

110
00:10:01,560 --> 00:10:07,470
a plataforma for Android, teremos um sólido histórico, então quero usar o branco como um cor

111
00:10:07,800 --> 00:10:10,680
do ícone; caso contrário, uso minha cor principal.

112
00:10:10,740 --> 00:10:16,080
Agora, com isso, a única coisa que resta a fazer é exportar esse botão de cabeçalho personalizado aqui e agora podemos começar

113
00:10:16,080 --> 00:10:20,600
a usá-lo na tela da lista de locais. Também lá, como antes,

114
00:10:20,610 --> 00:10:29,280
importo dois outros pacotes de react-navigation-header-buttons, duas outras coisas deste pacote e que seriam meus botões e itens de

115
00:10:29,280 --> 00:10:36,480
cabeçalho, ambos precisam ser importados e, além disso, também podemos importar nossos próprio botão de cabeçalho

116
00:10:36,480 --> 00:10:42,810
personalizado agora da pasta de componentes e, a partir desse arquivo de botão de

117
00:10:42,810 --> 00:10:48,060
cabeçalho, no qual acabamos de trabalhar. Porém, com isso importado, podemos alterar nossas

118
00:10:48,060 --> 00:10:53,880
opções de navegação aqui para serem dinâmicas, onde temos essa função que nos fornece os dados de navegação

119
00:10:54,270 --> 00:11:00,750
e que, em seguida, retornam esse objeto de configuração, pois isso nos permitirá também vincular o botão a alguma função

120
00:11:00,750 --> 00:11:07,380
que recebemos via parâmetros de rota porque aqui, quero adicionar o cabeçalho à direita para adicionar meus botões de cabeçalho e,

121
00:11:07,380 --> 00:11:12,540
é claro, agora isso também é um padrão que fizemos muitas vezes ao longo deste curso,

122
00:11:12,540 --> 00:11:19,560
adicionamos os botões de cabeçalho assim e temos o item lá. No componente de botões de cabeçalho, podemos definir o

123
00:11:19,590 --> 00:11:27,330
componente de botão de cabeçalho e apontar para nosso componente de botão de cabeçalho personalizado aqui e no item, agora

124
00:11:27,330 --> 00:11:31,930
definimos um título, como adicionar local, e definimos um nome de ícone

125
00:11:32,010 --> 00:11:39,870
aqui, que depende da plataforma, portanto portanto, importarei realmente esta API da plataforma aqui do React Native e agora podemos verificar

126
00:11:39,960 --> 00:11:48,090
se o sistema operacional da plataforma é Android, se for esse o caso, desejo defini-lo como md add, caso contrário, para o

127
00:11:48,240 --> 00:11:52,560
ios add que adiciona um botão de adição para o plataforma

128
00:11:52,560 --> 00:11:58,290
específica, seguindo a aparência específica dessa plataforma. Também precisamos adicionar a função onPress e,

129
00:11:58,290 --> 00:12:05,160
se tocarmos nela, eu simplesmente quero navegar com o método de navegação aqui e é por isso que precisamos

130
00:12:05,160 --> 00:12:11,310
ter essa função dinâmica aqui, para que possamos acessar os dados de navegação e, em seguida, a

131
00:12:11,430 --> 00:12:19,990
navegação, navegar para novo local e novo local aqui, é claro, é o meu identificador no navegador de locais dessa nova tela de local.

132
00:12:20,040 --> 00:12:24,780
Então, com isso, temos uma maneira de ir para a tela e, portanto, se salvarmos isso,

133
00:12:24,780 --> 00:12:25,960
poderemos fazer isso.

134
00:12:26,100 --> 00:12:32,800
Obviamente, estou recebendo um erro porque no componente do botão do cabeçalho, já que tenho um componente React lá, importar

135
00:12:32,920 --> 00:12:38,680
o React do React não parece a pior ideia, então vamos corrigir rapidamente isso aqui no

136
00:12:38,680 --> 00:12:45,290
componente do botão do cabeçalho, mas agora com isso , enquanto isso é recarregado, temos esse botão de adição e

137
00:12:45,290 --> 00:12:51,760
podemos ir para a nova tela de locais, para a nova tela de locais, também aqui no Android, é claro.

138
00:12:51,980 --> 00:12:57,680
Agora, nessa nova tela de local, também podemos adicionar opções de navegação para definir um título, novas

139
00:12:58,070 --> 00:13:04,010
opções de navegação na tela de local, configurá-lo para um objeto estático no momento, porque neste momento não precisamos

140
00:13:04,010 --> 00:13:11,210
que isso seja uma função, precisamos acessar os dados de navegação, precisamos apenas definir o título do cabeçalho para adicionar um local

141
00:13:11,930 --> 00:13:17,340
e, com isso, se o salvarmos, obviamente, se formos para lá, veremos esse título no cabeçalho.

142
00:13:17,540 --> 00:13:20,440
Portanto, essa é a configuração básica aqui, agora

143
00:13:20,570 --> 00:13:25,430
podemos trabalhar na tela de adicionar local para garantir que possamos adicionar um local.