Para exibir isso em um mapa, temos esse componente da tela de mapa que atualmente possui algum conteúdo fictício e agora
precisamos ser capazes de renderizar um mapa interativo e, para isso, a expo novamente nos oferece cobertura.
Lá, você encontra o pacote
de visualização do mapa.
Agora, nos bastidores, usa-se um pacote chamado Mapas nativos do React, que você também pode usar em aplicativos
não-expo, pela maneira como muitos desses pacotes podem ser usados em aplicativos não-expo, e é
sobre isso que voltarei nos aplicativos de construção sem o módulo expo, mas
por enquanto podemos simplesmente instalá-lo de forma conveniente executando este comando e isso instalará o
pacote de mapas do React Native
e, em seguida, podemos usá-lo como o vemos aqui neste exemplo.
A propósito, verifique também a documentação oficial neste link para ver mais exemplos de uso, porque lá,
você pode aprender tudo sobre como usar este
pacote, alguns exemplos também são mostrados aqui neste módulo, é claro.
Então, vamos executar o expo install react-native-maps para instalar este pacote aqui e
isso nos permitirá usar vários componentes que renderizam mapas interativos.
Então, vamos esperar que isso termine e com isso concluído, no componente de tela do mapa, podemos começar a usar esse
mapa.
Agora, lá dentro, para usar o mapa, podemos importar a visualização do mapa do mapa React Native, portanto, a partir deste pacote, acabamos
de instalar e isso nos permitirá renderizar um mapa na tela.
Agora, como isso funciona?
Bem, vamos aqui para a tela do mapa e, em vez de retornar essa visualização aqui, retornarei uma
visualização do mapa assim.
Agora, a visualização do mapa pode ser uma tag
de fechamento automático por enquanto; posteriormente, também podemos adicionar alguns marcadores, mas, por enquanto, vamos renderizá-la dessa maneira e agora
você precisa configurar essa visualização do mapa. Para ser mais preciso,
ele precisa de um suporte de região que indique onde deve ser focado quando carregar, de modo que
parte do mapa ou em qual parte do mundo ela deve se concentrar quando carregar.
Portanto, precisamos criar uma região aqui e armazenarei que em uma constante região de mapa
nomeada e uma região é realmente um objeto com quatro propriedades e você
deve nomeá-las dessa maneira: latitude
e não lat, mas latitude, longitude, latitudeDelta e longitudeDelta.
Os deltas basicamente definem o fator de zoom porque isso descreve quanto espaço você pode ver ao redor do
centro que você descreve com esses dois pontos.
Portanto, isso descreve um ponto, juntamente com os
dois deltas, descreve uma superfície.
Portanto, agora aqui, podemos começar com alguns valores
fictícios antes de depois também garantir que possamos pré-preencher isso.
Então, aqui, vou definir isso para o valor fictício de 37. 78 e -122. 43, que
fica na área da baía em torno da sede do Google e, aqui,
latitudeDelta terá 0. 0922 e depois 0. 0421, descobri que isso
funciona muito bem como uma região.
Claro que você pode experimentar esses números, mas no final, passe nesta região do mapa aqui.
Agora, isso deve renderizar um mapa na tela, agora precisamos
apenas alcançá-lo e, para isso, deixe-me
voltar ao seletor de localizações e quero alcançá-lo de duas maneiras diferentes - uma é com
a ajuda de um botão que ainda não adicionei. Além do botão obter localização do usuário,
quero ter um segundo botão que fique ao lado do primeiro, então adicionarei uma visualização para agrupar
os dois e, em seguida, mova esse botão aqui e coloque um segundo botão
ali e esse botão geralmente será configurado da mesma maneira, mas direi pick no mapa e, é claro, acionarei um
método diferente, função diferente, aqui eu quero acionar uma função que seja a pick no manipulador de mapas e, portanto, usarei isso
aqui e
essa é uma maneira de selecionar isso. A outra maneira de selecionar isso ou
acessar o mapa é clicando na visualização do mapa. Agora, antes de implementar isso, deixe-me estilizar rapidamente essa exibição que contém os dois botões.
Vou dar a ele um identificador de estilo de ações e, em seguida, as ações podem ser configuradas de maneira
relativamente direta.
Quero que o item fique ao lado do outro, para que a direção flexível seja uma linha, não uma coluna. Justificar que o conteúdo pode ter
espaço para distribuir o espaço livre disponível ao redor dos dois botões. Aceito uma largura de
100% para esta linha e é isso mesmo.
Agora com isso, eu tenho
meus botões aqui, agora precisamos garantir que também possamos tocar na visualização do mapa e, para
isso, deixe-me ir para a visualização do mapa e envolvê-la, não em uma exibição, mas em um componente tocável e
aqui Usarei apenas a opacidade palpável, é claro que você também pode optar por
diferentes
componentes palpáveis com base na plataforma em que está executando. Quero manter isso relativamente simples, então substituirei essa
visualização por opacidade
palpável, tenho o meu estilo aqui, tudo bem, mas também, claro, o manipulador onPress, e quero
ativar uma função que espero obter de fora via adereços.
Eu também chamarei isso de onPress, mas você pode dar a esse suporte o nome que quiser.
Isso agora nos permite adicionar um suporte onPress à visualização do
mapa. Portanto, aqui no seletor de localidades, eu posso ouvir onPress na visualização do mapa e, é claro, quero
ativar a mesma função de quando clico no botão para baixo. há.
Quero acionar a seleção no manipulador de mapas,
e é isso que faço.
Agora, a seleção no manipulador de mapas deve simplesmente ir para a tela
do mapa à direita, para que possamos dizer adereços. navegação. navegar mapa e é isso por um segundo.
Portanto, se agora salvarmos isso, poderemos acessar esse mapa interativo em tela cheia, onde ainda não podemos
selecionar um local, mas pelo menos podemos visualizá-lo.
Então agora, se eu clicar no sinal de mais aqui e depois escolher no mapa, recebo
um erro, agora, por que isso? Bem, isso não tem nenhuma relação com os módulos nativos. Você deve se lembrar que o suporte de
navegação está disponível apenas em componentes que são carregados diretamente como telas que o seletor de local, obviamente,
não é. Agora, existem
várias soluções alternativas, haveria um
componente de ordem mais alta que podemos usar,
também podemos instalar um pacote de ganchos específicos para navegação do React, mas aqui
adotarei uma abordagem simples e certifique-se de ter um suporte de navegação no seletor de local por indo
para a nova tela de local que é onde eu uso o seletor de
local e lá configurarei esse suporte de navegação e encaminhamento. navegação que aqui tenho disponível porque esse é
um componente carregado diretamente por meio de um navegador, então agora estou
apenas encaminhando o acesso aos meus acessórios de navegação. E com isso, se agora voltarmos e clicarmos nele,
carregaremos este mapa aqui ou pelo menos uma tela de mapa, mas onde
está o mapa?
Bem, o mapa é invisível porque, e isso é importante, para o seu mapa você precisa adicionar um
estilo e aqui, eu adicionarei estilos. map e pode ser um estilo muito simples, mas você só
precisa definir o tamanho que deve ser porque, por padrão, ele não ocupará espaço.
Portanto, basta definir flex para um aqui e dizer que ele deve ocupar todo o espaço que obtém; ao fazer
isso, você garantirá que verá um mapa.
Então agora com isso, se você clicar nisso, aqui está o nosso mapa sendo carregado. Agora também vale a pena notar que, no iOS, você usa automaticamente
o Apple Maps, embora também possa usar o Google Maps, se quiser, os documentos
oficiais informam como, no Android, você sempre usa o Google Maps.
Então, aqui, se eu clicar em escolher no
mapa, também veremos que, uma vez carregada a nova tela, aqui está ela. Agora, é claro, também podemos ir para essa tela clicando
em nossa visualização aqui, é
isso que configuramos
corretamente, para que também funcione, é claro que também funcione no iOS.
E a propósito, a animação aqui não é super suave, será um dispositivo real, então isso
não é um problema, é apenas aqui no emulador.
Então, com isso, temos nosso mapa aqui e neste mapa, podemos rolar. Novamente, no simulador, pode ser um
pouco pequeno; em um dispositivo real, não será.
Então, aqui você pode rolar por aí, também poderá beliscar e ampliar mais tarde, para fazer tudo
isso e com isso, vemos o mapa.
Agora o mapa é utilizável, mas é claro que ainda não podemos escolher um local, então é
a próxima coisa que precisamos mudar.