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
o formulário da função lá, para que tenhamos acesso a essa nav, aquele objeto com o
objeto de navegação e lá , Quero retornar meu objeto de configuração.
Você pode adicionar um título de cabeçalho, mas na verdade
estou feliz sem um, mas quero defini-lo aqui e agora importante, aqui você pode usar os
botões de cabeçalho, é claro, e renderizar um ícone legal, mas, na verdade, renderizarei algum texto aqui. Portanto, importarei o componente de texto
ou certifique-se de importá-lo. Vou renderizar um texto aqui, onde digo
apenas salvar e, é claro, você também pode adicionar uma verificação de plataforma
para tornar
esta maiúscula no Android, se quiser, vou dizer salvar dessa maneira e adicionar um estilo aqui onde Eu adiciono o estilo do texto
do botão do cabeçalho e, em torno disso, quero ter uma visualização palpável, então usarei a
opacidade palpável aqui que, portanto, você também precisa importar, não a partir daí, mas realmente a partir
do React Native, portanto, a opacidade palpável deve ser importada do React Native e com o importado, podemos envolver isso
em torno deste texto para criar nossos próprios botões, por assim dizer, e também quero adicionar um estilo e
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
é algo que farei em um segundo, por enquanto, vamos estilizar isso. Então, lá embaixo na folha de estilo, para o botão do
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
e no texto do botão do cabeçalho aqui, é claro para você o que você deseja adicionar
lá, mas eu adicionarei um tamanho de fonte 16, digamos e importante, a cor. Para isso, preciso da API da plataforma, pois a cor
precisa diferir, pois está no cabeçalho que possui um sólido background no Android, mas não no
iOS, posso definir minha cor aqui, minha cor de texto como Platform. O sistema operacional é igual ao Android; portanto, para verificar isso, no Android,
eu o defini como branco; caso contrário, defini-lo como Cores. primário e, como sempre,
verifique se você está importando suas cores constantemente.
Agora, agora temos o botão Salvar. Quando pressionamos o botão Salvar, quero acionar uma função que deve ser definida
no componente. Isso também é algo que fizemos várias vezes no curso. Mostrei como você pode se
comunicar entre seu componente. e também suas opções de navegação aqui. Portanto, podemos adicionar essencialmente uma nova função aqui,
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
de navegação e, para isso, podemos usar o bom e velho gancho de
efeitos de uso e use o retorno de chamada para evitar esse loop infinito, se você se lembrar
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
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
referência a esta função, para este parâmetro ou com esse parâmetro para meus cabeçalhos e o efeito de
uso depende, obviamente, da função do manipulador de local escolhido para salvar, portanto, eu o adicionarei como uma dependência
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
desta página e voltar, então aqui posso usar a navegação de adereços
e voltaremos a isso em um segundo, mas, por enquanto, nós posso fazer isso.
E, portanto, normalmente, é claro, essa função de retorno seria minha dependência, mas para evitar um loop infinito, com
essa abordagem, temos que usar params para atualizar o componente em que já
estamos, na verdade adicionarei uma matriz vazia aqui como uma dependência, para que essa função efetivamente não seja
reconstruída no momento.
Portanto, com isso, podemos extrair esse parâmetro do local de salvamento em nosso cabeçalho.
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
salvamento e, em seguida, a função de salvamento é a função que eu conecto ao manipulador onPress
na opacidade tocável.
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
escolher no
mapa e se agora clicar em salvar, ele deve simplesmente voltar e voltar.
Portanto, isso funciona, mas é claro que agora, não estou salvando nenhum local, não estou usando nenhum local, esse é
o próximo passo e, para isso,
precisamos passar o local escolhido pelo usuário de volta à tela anterior. Com voltar, isso é relativamente difícil, mas,
em vez disso, podemos usar um padrão que eu realmente não havia usado
antes neste curso, também posso navegar aqui e depois voltar. Posso navegar para minha nova tela de local com o novo identificador
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
de que é
uma pilha de telas e eu estou em uma tela em cima da nova tela de local,
na verdade, isso não empurrará essa nova tela de local em cima da tela existente, poderíamos
forçá-lo com push, mas eu não quero, em
vez disso, ele voltará, mas agora usando navegar, posso acrescentar alguns parâmetros aqui. Posso adicionar meu local escolhido e apontar para
o suporte de local selecionado que, espera-se, reter meu local escolhido. Agora, como uso o local selecionado aqui e, uma vez que isso
muda, adicionarei isso como uma dependência para usar o retorno de chamada, para que essa função
seja recriada quando tivermos um novo local escolhido e eu quero ter certeza de que
temos um local aqui , para verificar se o local selecionado ou para ser preciso, se não tivermos um, por
isso, se não
estiver definido, o que significa que o usuário ainda não escolheu um, retornarei e não
continuarei, além de podermos mostrar um alerta aqui, se quisermos. Agora não vou fazer isso aqui, mas você pode
mostrar um alerta, se quiser.
Portanto, agora só poderemos clicar em salvar se tivermos um local escolhido, mas, se o fizermos,
o definiremos de fato nos parâmetros de nossa
ação de retorno. Vamos tentar,
vamos lá, clique em picK no mapa e agora observe que ainda não escolhi nenhum local, ainda
não cliquei em nenhum
lugar. Se clicar em salvar, nada acontece. Se eu escolher um local e clicar em Salvar, eu volto.
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
mapa, então é
a próxima coisa que farei.