1 00:00:02,080 --> 00:00:06,910 Para a localização do usuário, temos outro pacote incorporado no expo, que podemos usar facilmente, e 2 00:00:06,910 --> 00:00:08,740 esse é o pacote de localização. 3 00:00:08,780 --> 00:00:14,230 Agora, como antes, você o instala seguindo as instruções aqui e também vê um exemplo de uso 4 00:00:14,230 --> 00:00:15,520 lá em baixo, 5 00:00:15,520 --> 00:00:17,130 então vamos fazer isso rapidamente. 6 00:00:17,140 --> 00:00:24,580 Vamos executar expo install expo-location em nosso projeto e, com o instalado, agora podemos adicionar 7 00:00:24,570 --> 00:00:27,580 outro componente, além do componente selecionador 8 00:00:27,580 --> 00:00:33,340 de imagens, adicionarei o LocationPicker. arquivo js, porque isso é outra coisa que eu quero 9 00:00:33,340 --> 00:00:38,920 fazer neste aplicativo. Eu quero escolher um local. Para isso, no componente selecionador de 10 00:00:38,920 --> 00:00:45,490 local, importarei React do React, é claro, porque no final será um componente React regular e importarei 11 00:00:45,490 --> 00:00:54,040 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 12 00:00:54,040 --> 00:01:00,610 local do usuário, algum texto, também para mostrar um texto de fallback padrão enquanto nenhum lugar foi 13 00:01:00,610 --> 00:01:06,640 selecionado, um indicador de atividade para mostrar um botão giratório enquanto aguardamos a localização do local 14 00:01:07,300 --> 00:01:13,840 e talvez também esteja alerta para mostrar um alerta se algo der errado e também a folha 15 00:01:13,840 --> 00:01:16,840 de estilo, é claro, para estilizar esse componente. 16 00:01:16,860 --> 00:01:24,390 Agora aqui, eu tenho o meu componente selecionador de local que recebe adereços e, em seguida, faremos algo, 17 00:01:24,390 --> 00:01:33,390 configuramos o objeto de estilos com a Folha de estilo. crie e, no final, exporte o componente seletor de 18 00:01:33,450 --> 00:01:40,870 local aqui como o padrão, assim. Agora, para esse componente, como deve ser o código jsx? 19 00:01:40,940 --> 00:01:47,540 Em última análise, isso depende sempre de você, mas vou começar muito simples aqui e ter apenas 20 00:01:47,540 --> 00:01:48,460 uma visualização 21 00:01:49,590 --> 00:01:56,580 com um botão que permitirá que eu comece a obter a localização do usuário e também outra visualização 22 00:01:56,580 --> 00:02:04,080 que mostre, por exemplo, meu texto de fallback, não local escolhido ainda que mais tarde será substituído por uma pequena 23 00:02:04,110 --> 00:02:05,890 visualização do local em 24 00:02:05,910 --> 00:02:10,010 um mapa, então adicionarei mais tarde. Agora, aqui no botão, direi, 25 00:02:13,220 --> 00:02:20,990 obtenha localização do usuário, por exemplo, defina a cor como Cores. primário e, como sempre, certifique-se de importar as 26 00:02:20,990 --> 00:02:27,430 cores constantemente e pressionando isso, sem surpresa, quero começar a buscar o local 27 00:02:27,430 --> 00:02:28,500 do usuário. 28 00:02:28,610 --> 00:02:38,180 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 29 00:02:38,210 --> 00:02:43,760 obter a localização do usuário e é isso que aciono quando clico nesse botão. 30 00:02:45,530 --> 00:02:57,040 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 31 00:02:57,190 --> 00:03:03,790 estilizar esse texto, mas manterei o padrão e agora adicionarei esses dois estilos 32 00:03:03,790 --> 00:03:15,570 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 33 00:03:15,570 --> 00:03:27,820 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 34 00:03:27,820 --> 00:03:33,380 150 e também a cor da borda dessa cor acinzentada com 35 00:03:33,570 --> 00:03:41,310 o código hexadecimal #ccc e a largura de uma borda, é um pouco como a 36 00:03:41,540 --> 00:03:47,620 caixa de visualização da imagem. Com isso, temos esse componente configurado, agora podemos 37 00:03:47,620 --> 00:03:50,170 incluí-lo na nova tela de local. 38 00:03:50,200 --> 00:04:00,970 Portanto, nesse componente de tela, importarei o seletor de localização dos componentes, o seletor de localização como este e o adicionarei 39 00:04:00,970 --> 00:04:05,750 no código jsx abaixo do seletor de imagem, assim. 40 00:04:05,900 --> 00:04:10,540 Se agora salvarmos isso e dermos uma olhada, vemos esta caixa aqui. 41 00:04:10,560 --> 00:04:16,110 Agora, quando clico em obter a localização do usuário, surpreendentemente, a ideia é começar a obter a localização do usuário. 42 00:04:18,460 --> 00:04:26,110 Para isso, em nosso componente seletor de localização, precisaremos importar algumas coisas aqui - importaremos tudo como local do 43 00:04:26,200 --> 00:04:33,610 pacote de localização expo que acabamos de instalar. Além da localização, assim como para 44 00:04:33,610 --> 00:04:40,030 a câmera, teremos que pedir permissões, portanto importaremos tudo como permissões das 45 00:04:40,060 --> 00:04:47,970 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 46 00:04:48,090 --> 00:04:54,540 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, 47 00:04:54,540 --> 00:04:59,010 nós também podemos terceirizar e escrever de uma maneira mais genérica para trabalhar em diferentes 48 00:04:59,010 --> 00:05:04,800 componentes; aqui eu vou copiá-la, verificar as permissões. Claro que aqui, não estou pedindo o 49 00:05:04,800 --> 00:05:12,750 rolo da câmera, mas sim um local, e você precisa conceder permissões de local para usar este aplicativo e agora verificar 50 00:05:12,750 --> 00:05:20,820 se as permissões são executadas aqui no manipulador de obter local. Podemos usar o async aguardar aqui novamente para aguardar o 51 00:05:20,850 --> 00:05:28,870 resultado dessa verificação. Portanto, tem permissão é o que eu quero verificar aqui e, caso contrário, se não tivermos permissões, 52 00:05:29,020 --> 00:05:33,040 bem, retornarei aqui, não há precisa continuar porque não teremos 53 00:05:33,040 --> 00:05:39,790 permissão para buscar o local de qualquer maneira. Agora, caso contrário, podemos continuar e agora podemos 54 00:05:39,970 --> 00:05:47,680 usar o pacote de localização para obter a posição atual assíncrona e isso faz o que o nome implica, 55 00:05:47,680 --> 00:05:53,230 obtém a posição atual do usuário. Agora, a localização do usuário pode demorar um pouco, e é 56 00:05:53,230 --> 00:05:58,150 por isso que essa é uma tarefa assíncrona e por que isso retorna uma promessa, uma promessa que será resolvida quando chegarmos 57 00:05:58,180 --> 00:06:04,230 ao local do usuário ou que será rejeitada se ele não conseguir buscar um. Também podemos configurar isso com um objeto 58 00:06:04,240 --> 00:06:09,400 que você passa para ele, novamente, como sempre, nos documentos oficiais que você aprendeu 59 00:06:09,400 --> 00:06:16,550 sobre todas as opções que você pode definir lá. Por exemplo, uma opção que você pode definir é o tempo 60 00:06:16,550 --> 00:06:22,670 limite e defina-o como cinco segundos para garantir que, se não pudéssemos buscar um local por cinco segundos, 61 00:06:22,670 --> 00:06:23,870 parássemos de tentar 62 00:06:23,870 --> 00:06:27,260 e lançássemos um erro, para que a promessa fosse rejeitada. 63 00:06:27,310 --> 00:06:34,930 Agora podemos esperar isso e, é claro, envolvê-lo em um bloco try catch, isso é importante para garantir que lidemos 64 00:06:35,590 --> 00:06:42,610 com erros se não conseguirmos buscar um local. Aqui, simplesmente utilizarei o componente de alerta 65 00:06:42,610 --> 00:06:52,410 que já estou importando para emitir um alerta, não foi possível buscar o local e, aqui, tente novamente mais tarde ou escolha 66 00:06:52,840 --> 00:06:59,940 um local no mapa, o que não é possível no momento, mas que nós ' logo 67 00:06:59,940 --> 00:07:07,920 adicionaremos e aqui um botão onde dizemos OK. Portanto, esse é um alerta que mostro se a busca do local 68 00:07:08,880 --> 00:07:10,090 falhar por algum 69 00:07:10,130 --> 00:07:12,470 motivo; caso contrário, espero recuperar um local. 70 00:07:12,500 --> 00:07:15,200 Esse é o resultado dessa promessa no final, 71 00:07:15,200 --> 00:07:16,920 um local que podemos usar. 72 00:07:17,120 --> 00:07:25,720 Agora, podemos utilizar esse local com a ajuda do estado de uso para gerenciar algum estado interno aqui, que 73 00:07:26,830 --> 00:07:36,250 é o local escolhido e definir o local escolhido, e podemos chamar o estado de uso que não tem valor inicial 74 00:07:36,250 --> 00:07:37,810 aqui e 75 00:07:37,810 --> 00:07:45,550 aqui no manipulador de local, podemos definir o local escolhido como algo, teremos que ver por que, 76 00:07:45,600 --> 00:07:52,230 por enquanto, nulo, mas antes de definir qualquer coisa aqui, vamos consolar o local 77 00:07:52,290 --> 00:07:57,530 do log para ter uma ideia do que está lá dentro. 78 00:07:57,540 --> 00:08:03,740 Agora também quero mostrar um botão giratório enquanto buscamos, então gerencio outro estado aqui e 79 00:08:03,740 --> 00:08:10,190 esse é o estado de busca e, inicialmente, isso é obviamente falso, mas inicialmente não 80 00:08:10,220 --> 00:08:12,260 estamos buscando, mas aqui no 81 00:08:12,650 --> 00:08:19,670 local de obtenção manipulador, antes de começarmos a obter o local, definirei que está buscando true e, 82 00:08:19,670 --> 00:08:21,090 assim que 83 00:08:21,260 --> 00:08:24,410 terminarmos, isso também inclui se tivermos um 84 00:08:24,410 --> 00:08:31,640 erro; então, depois, definirei novamente como false e agora podemos usá-lo. para mostrar um spinner enquanto estamos buscando. 85 00:08:31,640 --> 00:08:39,740 Portanto, se a busca é verdadeira, mostrarei o indicador de atividade e, caso contrário, mostrarei este texto e, mais tarde, é 86 00:08:39,950 --> 00:08:45,920 claro que não apenas mostraremos o texto, mas também mostraremos um trecho de mapa. 87 00:08:45,920 --> 00:08:48,260 Agora o indicador de atividade pode ser configurado, podemos 88 00:08:48,260 --> 00:08:55,440 definir o tamanho como grande e a cor como Cores. primário se você quiser. Com tudo isso, vamos voltar e 89 00:08:55,440 --> 00:08:57,940 experimentá-lo aqui no iOS porque, embora eu 90 00:08:57,960 --> 00:09:03,060 não possa adicionar uma imagem aqui, pelo menos posso verificar o local e clicar em 91 00:09:03,060 --> 00:09:07,980 obter a localização do usuário e agora me perguntam se quero conceder permissões que eu 92 00:09:08,040 --> 00:09:14,820 quero permitir, sempre permitir e você vê esse botão giratório, é super rápido porque é um simulador, também simula a 93 00:09:14,820 --> 00:09:19,270 localização, não é a localização real do seu computador em que você está 94 00:09:19,480 --> 00:09:25,750 executando isso. é um local fictício padrão em São Francisco e aqui no Android, é o mesmo, se eu 95 00:09:25,780 --> 00:09:33,100 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 96 00:09:33,100 --> 00:09:39,700 verá nada além dos registros claro, você vê alguma coisa. Lá você vê os objetos que estavam 97 00:09:39,700 --> 00:09:45,670 sendo registrados onde você tem um subobjeto coords, por assim dizer, um campo chamado coords 98 00:09:45,670 --> 00:09:53,230 e o objeto que é outro objeto com precisão e, em seguida, um par de latitude e latitude que descreve 99 00:09:53,290 --> 00:10:00,170 esse local falso, ambos os simuladores usam falso Localizações. Você também tem um carimbo de data / hora. 100 00:10:00,210 --> 00:10:01,700 Então agora sabemos 101 00:10:01,740 --> 00:10:08,790 o que está lá, para que possamos definir o local escolhido, agora podemos definir isso para, digamos, um objeto em que 102 00:10:09,540 --> 00:10:20,280 você armazena uma latitude de local. coords. latitude, é isso que está lá, certo e uma longitude. Localização. 103 00:10:20,280 --> 00:10:20,280 coords. longitude. 104 00:10:20,320 --> 00:10:26,140 Portanto, agora temos o local escolhido disponível e esse local escolhido agora pode ser usado para, 105 00:10:26,440 --> 00:10:28,440 por exemplo, mostrar um pequeno 106 00:10:28,480 --> 00:10:34,420 trecho de mapa aqui quando tivermos um local. Antes de fazer isso apenas uma coisinha, quero ter 107 00:10:34,720 --> 00:10:41,920 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 108 00:10:42,280 --> 00:10:48,490 justificado para centralizar e alinhar os itens para centralizar, para que todos o conteúdo é centralizado horizontal e verticalmente, isso 109 00:10:48,500 --> 00:10:50,310 é uma coisa minúscula, então 110 00:10:50,320 --> 00:10:52,290 agora você vê tudo no centro. 111 00:10:52,300 --> 00:10:58,390 Mas com isso, agora vamos mostrar um pequeno trecho de mapa que mostra a localização que o usuário escolheu.