1
00:00:02,230 --> 00:00:12,550
Então, eu quero ter um botão Salvar no meu cabeçalho e, é claro, precisamos adicionar opções de navegação na tela do mapa e usar

2
00:00:12,550 --> 00:00:19,620
o formulário da função lá, para que tenhamos acesso a essa nav, aquele objeto com o

3
00:00:20,070 --> 00:00:25,500
objeto de navegação e lá , Quero retornar meu objeto de configuração.

4
00:00:25,500 --> 00:00:28,070
Você pode adicionar um título de cabeçalho, mas na verdade

5
00:00:28,200 --> 00:00:32,040
estou feliz sem um, mas quero defini-lo aqui e agora importante, aqui você pode usar os

6
00:00:32,190 --> 00:00:39,960
botões de cabeçalho, é claro, e renderizar um ícone legal, mas, na verdade, renderizarei algum texto aqui. Portanto, importarei o componente de texto

7
00:00:40,350 --> 00:00:46,080
ou certifique-se de importá-lo. Vou renderizar um texto aqui, onde digo

8
00:00:46,330 --> 00:00:51,720
apenas salvar e, é claro, você também pode adicionar uma verificação de plataforma

9
00:00:51,720 --> 00:00:53,050
para tornar

10
00:00:53,130 --> 00:01:02,510
esta maiúscula no Android, se quiser, vou dizer salvar dessa maneira e adicionar um estilo aqui onde Eu adiciono o estilo do texto

11
00:01:02,510 --> 00:01:09,050
do botão do cabeçalho e, em torno disso, quero ter uma visualização palpável, então usarei a

12
00:01:09,050 --> 00:01:15,770
opacidade palpável aqui que, portanto, você também precisa importar, não a partir daí, mas realmente a partir

13
00:01:15,770 --> 00:01:24,050
do React Native, portanto, a opacidade palpável deve ser importada do React Native e com o importado, podemos envolver isso

14
00:01:24,050 --> 00:01:31,770
em torno deste texto para criar nossos próprios botões, por assim dizer, e também quero adicionar um estilo e

15
00:01:31,770 --> 00:01:40,270
esse estilo terá um identificador de botão de cabeçalho, digamos. Agora, pressionando isso, quero salvar o que adicionamos ou salvar nosso local que escolhemos, mas isso

16
00:01:40,270 --> 00:01:46,780
é algo que farei em um segundo, por enquanto, vamos estilizar isso. Então, lá embaixo na folha de estilo, para o botão do

17
00:01:46,780 --> 00:01:53,440
cabeçalho que é essa opacidade palpável, adicionarei uma margem horizontal de 20 para ter algum espaçamento ao redor do botão à esquerda e à direita

18
00:01:53,440 --> 00:01:58,060
e no texto do botão do cabeçalho aqui, é claro para você o que você deseja adicionar

19
00:01:58,060 --> 00:02:05,920
lá, mas eu adicionarei um tamanho de fonte 16, digamos e importante, a cor. Para isso, preciso da API da plataforma, pois a cor

20
00:02:05,920 --> 00:02:11,440
precisa diferir, pois está no cabeçalho que possui um sólido background no Android, mas não no

21
00:02:11,500 --> 00:02:19,960
iOS, posso definir minha cor aqui, minha cor de texto como Platform. O sistema operacional é igual ao Android; portanto, para verificar isso, no Android,

22
00:02:19,960 --> 00:02:26,550
eu o defini como branco; caso contrário, defini-lo como Cores. primário e, como sempre,

23
00:02:26,620 --> 00:02:32,610
verifique se você está importando suas cores constantemente.

24
00:02:32,690 --> 00:02:38,180
Agora, agora temos o botão Salvar. Quando pressionamos o botão Salvar, quero acionar uma função que deve ser definida

25
00:02:38,180 --> 00:02:43,370
no componente. Isso também é algo que fizemos várias vezes no curso. Mostrei como você pode se

26
00:02:43,370 --> 00:02:50,360
comunicar entre seu componente. e também suas opções de navegação aqui. Portanto, podemos adicionar essencialmente uma nova função aqui,

27
00:02:50,390 --> 00:03:00,090
salvar o manipulador de local escolhido, o que você quiser nomear e essa função ou uma referência a essa função deve ser passada para as opções

28
00:03:00,110 --> 00:03:05,100
de navegação e, para isso, podemos usar o bom e velho gancho de

29
00:03:05,100 --> 00:03:12,150
efeitos de uso e use o retorno de chamada para evitar esse loop infinito, se você se lembrar

30
00:03:12,150 --> 00:03:21,520
e, portanto, podemos envolvê-lo com o retorno de chamada e, em seguida, usar o efeito aqui para informar nossas opções de navegação sobre isso, usando

31
00:03:21,520 --> 00:03:32,600
parâmetros de conjunto de navegação props e, em seguida, desejo definir meu parâmetro de local de salvamento aqui para o manipulador de local escolhido para salvar, então passe uma

32
00:03:32,610 --> 00:03:39,390
referência a esta função, para este parâmetro ou com esse parâmetro para meus cabeçalhos e o efeito de

33
00:03:39,390 --> 00:03:46,590
uso depende, obviamente, da função do manipulador de local escolhido para salvar, portanto, eu o adicionarei como uma dependência

34
00:03:46,590 --> 00:03:55,040
aqui e importante agora, o uso de retorno de chamada aqui também tem uma série de dependências, porque aqui, quero basicamente sair

35
00:03:55,160 --> 00:04:00,130
desta página e voltar, então aqui posso usar a navegação de adereços

36
00:04:00,230 --> 00:04:05,630
e voltaremos a isso em um segundo, mas, por enquanto, nós posso fazer isso.

37
00:04:06,940 --> 00:04:13,420
E, portanto, normalmente, é claro, essa função de retorno seria minha dependência, mas para evitar um loop infinito, com

38
00:04:13,450 --> 00:04:18,180
essa abordagem, temos que usar params para atualizar o componente em que já

39
00:04:18,370 --> 00:04:24,280
estamos, na verdade adicionarei uma matriz vazia aqui como uma dependência, para que essa função efetivamente não seja

40
00:04:24,310 --> 00:04:25,420
reconstruída no momento.

41
00:04:25,480 --> 00:04:30,790
Portanto, com isso, podemos extrair esse parâmetro do local de salvamento em nosso cabeçalho.

42
00:04:30,790 --> 00:04:41,190
Então, aqui, quero apontar para a minha função de salvamento que recebo com o navData. navegação. getParam apontando para o identificador do local de

43
00:04:41,190 --> 00:04:48,480
salvamento e, em seguida, a função de salvamento é a função que eu conecto ao manipulador onPress

44
00:04:48,480 --> 00:04:50,050
na opacidade tocável.

45
00:04:50,070 --> 00:04:59,030
Portanto, isso deve acionar esta função de salvar, salvar aqui a função de manipulador de local escolhido. Com isso salvo, se voltarmos, vamos tentar, vamos

46
00:04:59,060 --> 00:05:00,710
escolher no

47
00:05:00,740 --> 00:05:08,210
mapa e se agora clicar em salvar, ele deve simplesmente voltar e voltar.

48
00:05:08,240 --> 00:05:13,280
Portanto, isso funciona, mas é claro que agora, não estou salvando nenhum local, não estou usando nenhum local, esse é

49
00:05:13,280 --> 00:05:15,080
o próximo passo e, para isso,

50
00:05:15,080 --> 00:05:21,110
precisamos passar o local escolhido pelo usuário de volta à tela anterior. Com voltar, isso é relativamente difícil, mas,

51
00:05:21,110 --> 00:05:25,970
em vez disso, podemos usar um padrão que eu realmente não havia usado

52
00:05:26,540 --> 00:05:34,010
antes neste curso, também posso navegar aqui e depois voltar. Posso navegar para minha nova tela de local com o novo identificador

53
00:05:34,070 --> 00:05:41,810
de local, configurado aqui no navegador de locais e, como já estou em uma tela à frente dessa nova tela de local, não se esqueça

54
00:05:41,810 --> 00:05:42,990
de que é

55
00:05:43,070 --> 00:05:48,260
uma pilha de telas e eu estou em uma tela em cima da nova tela de local,

56
00:05:48,290 --> 00:05:53,040
na verdade, isso não empurrará essa nova tela de local em cima da tela existente, poderíamos

57
00:05:53,270 --> 00:05:56,020
forçá-lo com push, mas eu não quero, em

58
00:05:56,030 --> 00:06:03,890
vez disso, ele voltará, mas agora usando navegar, posso acrescentar alguns parâmetros aqui. Posso adicionar meu local escolhido e apontar para

59
00:06:04,040 --> 00:06:12,980
o suporte de local selecionado que, espera-se, reter meu local escolhido. Agora, como uso o local selecionado aqui e, uma vez que isso

60
00:06:12,980 --> 00:06:18,320
muda, adicionarei isso como uma dependência para usar o retorno de chamada, para que essa função

61
00:06:18,650 --> 00:06:23,900
seja recriada quando tivermos um novo local escolhido e eu quero ter certeza de que

62
00:06:23,900 --> 00:06:30,800
temos um local aqui , para verificar se o local selecionado ou para ser preciso, se não tivermos um, por

63
00:06:30,830 --> 00:06:32,300
isso, se não

64
00:06:32,330 --> 00:06:37,580
estiver definido, o que significa que o usuário ainda não escolheu um, retornarei e não

65
00:06:37,820 --> 00:06:44,750
continuarei, além de podermos mostrar um alerta aqui, se quisermos. Agora não vou fazer isso aqui, mas você pode

66
00:06:44,780 --> 00:06:46,780
mostrar um alerta, se quiser.

67
00:06:46,950 --> 00:06:52,110
Portanto, agora só poderemos clicar em salvar se tivermos um local escolhido, mas, se o fizermos,

68
00:06:52,110 --> 00:06:54,740
o definiremos de fato nos parâmetros de nossa

69
00:06:54,750 --> 00:06:57,250
ação de retorno. Vamos tentar,

70
00:06:57,250 --> 00:07:03,250
vamos lá, clique em picK no mapa e agora observe que ainda não escolhi nenhum local, ainda

71
00:07:03,280 --> 00:07:04,630
não cliquei em nenhum

72
00:07:04,630 --> 00:07:09,160
lugar. Se clicar em salvar, nada acontece. Se eu escolher um local e clicar em Salvar, eu volto.

73
00:07:09,970 --> 00:07:17,560
Portanto, agora podemos usar os dados que estamos retornando da tela do mapa em nosso seletor de localização para atualizar a visualização do

74
00:07:17,590 --> 00:07:18,890
mapa, então é

75
00:07:18,910 --> 00:07:20,290
a próxima coisa que farei.