Para a localização do usuário, temos outro pacote incorporado no expo, que podemos usar facilmente, e
esse é o pacote de localização.
Agora, como antes, você o instala seguindo as instruções aqui e também vê um exemplo de uso
lá em baixo,
então vamos fazer isso rapidamente.
Vamos executar expo install expo-location em nosso projeto e, com o instalado, agora podemos adicionar
outro componente, além do componente selecionador
de imagens, adicionarei o LocationPicker. arquivo js, porque isso é outra coisa que eu quero
fazer neste aplicativo. Eu quero escolher um local. Para isso, no componente selecionador de
local, importarei React do React, é claro, porque no final será um componente React regular e importarei
algumas coisas do React Native e, entre essas coisas, está a visualização, um botão que nos permite para começar a obter o
local do usuário, algum texto, também para mostrar um texto de fallback padrão enquanto nenhum lugar foi
selecionado, um indicador de atividade para mostrar um botão giratório enquanto aguardamos a localização do local
e talvez também esteja alerta para mostrar um alerta se algo der errado e também a folha
de estilo, é claro, para estilizar esse componente.
Agora aqui, eu tenho o meu componente selecionador de local que recebe adereços e, em seguida, faremos algo,
configuramos o objeto de estilos com a Folha de estilo. crie e, no final, exporte o componente seletor de
local aqui como o padrão, assim. Agora, para esse componente, como deve ser o código jsx?
Em última análise, isso depende sempre de você, mas vou começar muito simples aqui e ter apenas
uma visualização
com um botão que permitirá que eu comece a obter a localização do usuário e também outra visualização
que mostre, por exemplo, meu texto de fallback, não local escolhido ainda que mais tarde será substituído por uma pequena
visualização do local em
um mapa, então adicionarei mais tarde. Agora, aqui no botão, direi,
obtenha localização do usuário, por exemplo, defina a cor como Cores. primário e, como sempre, certifique-se de importar as
cores constantemente e pressionando isso, sem surpresa, quero começar a buscar o local
do usuário.
Então, aqui vou adicionar uma nova constante, get location handler, que é uma função que usará a API de localização que acabamos de instalar para
obter a localização do usuário e é isso que aciono quando clico nesse botão.
Agora, para o estilo aqui, adicionarei um seletor de localização de estilos. Nesta visualização, adicionarei outra visualização do mapa de estilos. Também poderíamos
estilizar esse texto, mas manterei o padrão e agora adicionarei esses dois estilos
a a folha de estilo, então o seletor de local aqui, adicionarei uma margem na parte inferior, digamos 15, e na visualização do
mapa, também adicionarei uma margem na parte inferior, digamos 10 e a largura de 100% a use toda a largura disponível, uma altura de talvez
150 e também a cor da borda dessa cor acinzentada com
o código hexadecimal #ccc e a largura de uma borda, é um pouco como a
caixa de visualização da imagem. Com isso, temos esse componente configurado, agora podemos
incluí-lo na nova tela de local.
Portanto, nesse componente de tela, importarei o seletor de localização dos componentes, o seletor de localização como este e o adicionarei
no código jsx abaixo do seletor de imagem, assim.
Se agora salvarmos isso e dermos uma olhada, vemos esta caixa aqui.
Agora, quando clico em obter a localização do usuário, surpreendentemente, a ideia é começar a obter a localização do usuário.
Para isso, em nosso componente seletor de localização, precisaremos importar algumas coisas aqui - importaremos tudo como local do
pacote de localização expo que acabamos de instalar. Além da localização, assim como para
a câmera, teremos que pedir permissões, portanto importaremos tudo como permissões das
permissões de expo, que também é necessário. Com isso adicionado aqui no manipulador de localização get, antes de tudo, desejo verificar minhas permissões
e, para isso, posso copiar a abordagem que utilizo no seletor de imagens. Lá nós temos esta função de verificação de permissões que, obviamente,
nós também podemos terceirizar e escrever de uma maneira mais genérica para trabalhar em diferentes
componentes; aqui eu vou copiá-la, verificar as permissões. Claro que aqui, não estou pedindo o
rolo da câmera, mas sim um local, e você precisa conceder permissões de local para usar este aplicativo e agora verificar
se as permissões são executadas aqui no manipulador de obter local. Podemos usar o async aguardar aqui novamente para aguardar o
resultado dessa verificação. Portanto, tem permissão é o que eu quero verificar aqui e, caso contrário, se não tivermos permissões,
bem, retornarei aqui, não há precisa continuar porque não teremos
permissão para buscar o local de qualquer maneira. Agora, caso contrário, podemos continuar e agora podemos
usar o pacote de localização para obter a posição atual assíncrona e isso faz o que o nome implica,
obtém a posição atual do usuário. Agora, a localização do usuário pode demorar um pouco, e é
por isso que essa é uma tarefa assíncrona e por que isso retorna uma promessa, uma promessa que será resolvida quando chegarmos
ao local do usuário ou que será rejeitada se ele não conseguir buscar um. Também podemos configurar isso com um objeto
que você passa para ele, novamente, como sempre, nos documentos oficiais que você aprendeu
sobre todas as opções que você pode definir lá. Por exemplo, uma opção que você pode definir é o tempo
limite e defina-o como cinco segundos para garantir que, se não pudéssemos buscar um local por cinco segundos,
parássemos de tentar
e lançássemos um erro, para que a promessa fosse rejeitada.
Agora podemos esperar isso e, é claro, envolvê-lo em um bloco try catch, isso é importante para garantir que lidemos
com erros se não conseguirmos buscar um local. Aqui, simplesmente utilizarei o componente de alerta
que já estou importando para emitir um alerta, não foi possível buscar o local e, aqui, tente novamente mais tarde ou escolha
um local no mapa, o que não é possível no momento, mas que nós ' logo
adicionaremos e aqui um botão onde dizemos OK. Portanto, esse é um alerta que mostro se a busca do local
falhar por algum
motivo; caso contrário, espero recuperar um local.
Esse é o resultado dessa promessa no final,
um local que podemos usar.
Agora, podemos utilizar esse local com a ajuda do estado de uso para gerenciar algum estado interno aqui, que
é o local escolhido e definir o local escolhido, e podemos chamar o estado de uso que não tem valor inicial
aqui e
aqui no manipulador de local, podemos definir o local escolhido como algo, teremos que ver por que,
por enquanto, nulo, mas antes de definir qualquer coisa aqui, vamos consolar o local
do log para ter uma ideia do que está lá dentro.
Agora também quero mostrar um botão giratório enquanto buscamos, então gerencio outro estado aqui e
esse é o estado de busca e, inicialmente, isso é obviamente falso, mas inicialmente não
estamos buscando, mas aqui no
local de obtenção manipulador, antes de começarmos a obter o local, definirei que está buscando true e,
assim que
terminarmos, isso também inclui se tivermos um
erro; então, depois, definirei novamente como false e agora podemos usá-lo. para mostrar um spinner enquanto estamos buscando.
Portanto, se a busca é verdadeira, mostrarei o indicador de atividade e, caso contrário, mostrarei este texto e, mais tarde, é
claro que não apenas mostraremos o texto, mas também mostraremos um trecho de mapa.
Agora o indicador de atividade pode ser configurado, podemos
definir o tamanho como grande e a cor como Cores. primário se você quiser. Com tudo isso, vamos voltar e
experimentá-lo aqui no iOS porque, embora eu
não possa adicionar uma imagem aqui, pelo menos posso verificar o local e clicar em
obter a localização do usuário e agora me perguntam se quero conceder permissões que eu
quero permitir, sempre permitir e você vê esse botão giratório, é super rápido porque é um simulador, também simula a
localização, não é a localização real do seu computador em que você está
executando isso. é um local fictício padrão em São Francisco e aqui no Android, é o mesmo, se eu
clicar em obter a localização do usuário aqui, preciso conceder permissões e, depois disso, você verá o botão giratório aqui e não
verá nada além dos registros claro, você vê alguma coisa. Lá você vê os objetos que estavam
sendo registrados onde você tem um subobjeto coords, por assim dizer, um campo chamado coords
e o objeto que é outro objeto com precisão e, em seguida, um par de latitude e latitude que descreve
esse local falso, ambos os simuladores usam falso Localizações. Você também tem um carimbo de data / hora.
Então agora sabemos
o que está lá, para que possamos definir o local escolhido, agora podemos definir isso para, digamos, um objeto em que
você armazena uma latitude de local. coords. latitude, é isso que está lá, certo e uma longitude. Localização.
coords. longitude.
Portanto, agora temos o local escolhido disponível e esse local escolhido agora pode ser usado para,
por exemplo, mostrar um pequeno
trecho de mapa aqui quando tivermos um local. Antes de fazer isso apenas uma coisinha, quero ter
certeza de que o texto e o botão giratório aqui estão centralizados. Portanto, na visualização do mapa, na verdade também definirei o conteúdo
justificado para centralizar e alinhar os itens para centralizar, para que todos o conteúdo é centralizado horizontal e verticalmente, isso
é uma coisa minúscula, então
agora você vê tudo no centro.
Mas com isso, agora vamos mostrar um pequeno trecho de mapa que mostra a localização que o usuário escolheu.