1 00:00:02,100 --> 00:00:09,600 Para exibir isso em um mapa, temos esse componente da tela de mapa que atualmente possui algum conteúdo fictício e agora 2 00:00:09,600 --> 00:00:15,800 precisamos ser capazes de renderizar um mapa interativo e, para isso, a expo novamente nos oferece cobertura. 3 00:00:15,870 --> 00:00:17,880 Lá, você encontra o pacote 4 00:00:18,970 --> 00:00:20,810 de visualização do mapa. 5 00:00:20,850 --> 00:00:25,840 Agora, nos bastidores, usa-se um pacote chamado Mapas nativos do React, que você também pode usar em aplicativos 6 00:00:25,840 --> 00:00:30,220 não-expo, pela maneira como muitos desses pacotes podem ser usados em aplicativos não-expo, e é 7 00:00:30,220 --> 00:00:33,950 sobre isso que voltarei nos aplicativos de construção sem o módulo expo, mas 8 00:00:34,060 --> 00:00:38,480 por enquanto podemos simplesmente instalá-lo de forma conveniente executando este comando e isso instalará o 9 00:00:38,500 --> 00:00:40,630 pacote de mapas do React Native 10 00:00:40,640 --> 00:00:43,820 e, em seguida, podemos usá-lo como o vemos aqui neste exemplo. 11 00:00:43,900 --> 00:00:49,660 A propósito, verifique também a documentação oficial neste link para ver mais exemplos de uso, porque lá, 12 00:00:49,660 --> 00:00:52,660 você pode aprender tudo sobre como usar este 13 00:00:52,660 --> 00:00:56,300 pacote, alguns exemplos também são mostrados aqui neste módulo, é claro. 14 00:00:56,410 --> 00:01:01,810 Então, vamos executar o expo install react-native-maps para instalar este pacote aqui e 15 00:01:01,810 --> 00:01:06,160 isso nos permitirá usar vários componentes que renderizam mapas interativos. 16 00:01:06,160 --> 00:01:12,860 Então, vamos esperar que isso termine e com isso concluído, no componente de tela do mapa, podemos começar a usar esse 17 00:01:12,860 --> 00:01:13,300 mapa. 18 00:01:15,730 --> 00:01:26,160 Agora, lá dentro, para usar o mapa, podemos importar a visualização do mapa do mapa React Native, portanto, a partir deste pacote, acabamos 19 00:01:26,160 --> 00:01:31,150 de instalar e isso nos permitirá renderizar um mapa na tela. 20 00:01:31,200 --> 00:01:32,730 Agora, como isso funciona? 21 00:01:32,730 --> 00:01:38,880 Bem, vamos aqui para a tela do mapa e, em vez de retornar essa visualização aqui, retornarei uma 22 00:01:39,630 --> 00:01:41,340 visualização do mapa assim. 23 00:01:41,370 --> 00:01:43,470 Agora, a visualização do mapa pode ser uma tag 24 00:01:43,470 --> 00:01:47,910 de fechamento automático por enquanto; posteriormente, também podemos adicionar alguns marcadores, mas, por enquanto, vamos renderizá-la dessa maneira e agora 25 00:01:48,180 --> 00:01:51,530 você precisa configurar essa visualização do mapa. Para ser mais preciso, 26 00:01:51,540 --> 00:01:58,310 ele precisa de um suporte de região que indique onde deve ser focado quando carregar, de modo que 27 00:01:58,440 --> 00:02:03,990 parte do mapa ou em qual parte do mundo ela deve se concentrar quando carregar. 28 00:02:03,990 --> 00:02:12,770 Portanto, precisamos criar uma região aqui e armazenarei que em uma constante região de mapa 29 00:02:12,770 --> 00:02:20,810 nomeada e uma região é realmente um objeto com quatro propriedades e você 30 00:02:20,840 --> 00:02:24,470 deve nomeá-las dessa maneira: latitude 31 00:02:27,360 --> 00:02:32,680 e não lat, mas latitude, longitude, latitudeDelta e longitudeDelta. 32 00:02:32,830 --> 00:02:41,430 Os deltas basicamente definem o fator de zoom porque isso descreve quanto espaço você pode ver ao redor do 33 00:02:41,490 --> 00:02:45,450 centro que você descreve com esses dois pontos. 34 00:02:45,480 --> 00:02:48,690 Portanto, isso descreve um ponto, juntamente com os 35 00:02:48,690 --> 00:02:51,030 dois deltas, descreve uma superfície. 36 00:02:51,080 --> 00:02:54,890 Portanto, agora aqui, podemos começar com alguns valores 37 00:02:54,890 --> 00:02:58,820 fictícios antes de depois também garantir que possamos pré-preencher isso. 38 00:02:58,820 --> 00:03:03,980 Então, aqui, vou definir isso para o valor fictício de 37. 78 e -122. 43, que 39 00:03:03,980 --> 00:03:11,900 fica na área da baía em torno da sede do Google e, aqui, 40 00:03:11,900 --> 00:03:18,080 latitudeDelta terá 0. 0922 e depois 0. 0421, descobri que isso 41 00:03:18,080 --> 00:03:21,030 funciona muito bem como uma região. 42 00:03:21,080 --> 00:03:27,120 Claro que você pode experimentar esses números, mas no final, passe nesta região do mapa aqui. 43 00:03:27,200 --> 00:03:30,020 Agora, isso deve renderizar um mapa na tela, agora precisamos 44 00:03:30,110 --> 00:03:32,320 apenas alcançá-lo e, para isso, deixe-me 45 00:03:32,330 --> 00:03:37,000 voltar ao seletor de localizações e quero alcançá-lo de duas maneiras diferentes - uma é com 46 00:03:37,010 --> 00:03:42,380 a ajuda de um botão que ainda não adicionei. Além do botão obter localização do usuário, 47 00:03:42,390 --> 00:03:48,730 quero ter um segundo botão que fique ao lado do primeiro, então adicionarei uma visualização para agrupar 48 00:03:48,730 --> 00:03:53,830 os dois e, em seguida, mova esse botão aqui e coloque um segundo botão 49 00:03:53,830 --> 00:04:01,400 ali e esse botão geralmente será configurado da mesma maneira, mas direi pick no mapa e, é claro, acionarei um 50 00:04:01,400 --> 00:04:09,740 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 51 00:04:09,740 --> 00:04:10,870 aqui e 52 00:04:10,940 --> 00:04:16,220 essa é uma maneira de selecionar isso. A outra maneira de selecionar isso ou 53 00:04:16,220 --> 00:04:22,900 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. 54 00:04:22,900 --> 00:04:30,460 Vou dar a ele um identificador de estilo de ações e, em seguida, as ações podem ser configuradas de maneira 55 00:04:30,460 --> 00:04:31,620 relativamente direta. 56 00:04:32,930 --> 00:04:38,720 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 57 00:04:38,720 --> 00:04:45,580 espaço para distribuir o espaço livre disponível ao redor dos dois botões. Aceito uma largura de 58 00:04:45,620 --> 00:04:49,400 100% para esta linha e é isso mesmo. 59 00:04:49,400 --> 00:04:51,170 Agora com isso, eu tenho 60 00:04:51,170 --> 00:04:56,510 meus botões aqui, agora precisamos garantir que também possamos tocar na visualização do mapa e, para 61 00:04:56,510 --> 00:05:03,090 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 62 00:05:03,110 --> 00:05:07,700 aqui Usarei apenas a opacidade palpável, é claro que você também pode optar por 63 00:05:07,700 --> 00:05:08,260 diferentes 64 00:05:08,270 --> 00:05:14,000 componentes palpáveis com base na plataforma em que está executando. Quero manter isso relativamente simples, então substituirei essa 65 00:05:14,450 --> 00:05:15,430 visualização por opacidade 66 00:05:15,440 --> 00:05:20,750 palpável, tenho o meu estilo aqui, tudo bem, mas também, claro, o manipulador onPress, e quero 67 00:05:20,750 --> 00:05:23,950 ativar uma função que espero obter de fora via adereços. 68 00:05:24,020 --> 00:05:28,210 Eu também chamarei isso de onPress, mas você pode dar a esse suporte o nome que quiser. 69 00:05:28,250 --> 00:05:32,030 Isso agora nos permite adicionar um suporte onPress à visualização do 70 00:05:32,030 --> 00:05:38,030 mapa. Portanto, aqui no seletor de localidades, eu posso ouvir onPress na visualização do mapa e, é claro, quero 71 00:05:38,030 --> 00:05:42,050 ativar a mesma função de quando clico no botão para baixo. há. 72 00:05:42,140 --> 00:05:44,420 Quero acionar a seleção no manipulador de mapas, 73 00:05:44,660 --> 00:05:46,490 e é isso que faço. 74 00:05:46,520 --> 00:05:49,790 Agora, a seleção no manipulador de mapas deve simplesmente ir para a tela 75 00:05:49,790 --> 00:05:56,700 do mapa à direita, para que possamos dizer adereços. navegação. navegar mapa e é isso por um segundo. 76 00:05:56,720 --> 00:06:01,760 Portanto, se agora salvarmos isso, poderemos acessar esse mapa interativo em tela cheia, onde ainda não podemos 77 00:06:01,760 --> 00:06:04,140 selecionar um local, mas pelo menos podemos visualizá-lo. 78 00:06:04,160 --> 00:06:09,500 Então agora, se eu clicar no sinal de mais aqui e depois escolher no mapa, recebo 79 00:06:09,600 --> 00:06:15,930 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 80 00:06:15,930 --> 00:06:20,700 navegação está disponível apenas em componentes que são carregados diretamente como telas que o seletor de local, obviamente, 81 00:06:20,700 --> 00:06:22,140 não é. Agora, existem 82 00:06:22,140 --> 00:06:23,750 várias soluções alternativas, haveria um 83 00:06:23,760 --> 00:06:26,070 componente de ordem mais alta que podemos usar, 84 00:06:26,080 --> 00:06:29,910 também podemos instalar um pacote de ganchos específicos para navegação do React, mas aqui 85 00:06:30,360 --> 00:06:35,430 adotarei uma abordagem simples e certifique-se de ter um suporte de navegação no seletor de local por indo 86 00:06:35,760 --> 00:06:39,720 para a nova tela de local que é onde eu uso o seletor de 87 00:06:39,960 --> 00:06:45,600 local e lá configurarei esse suporte de navegação e encaminhamento. navegação que aqui tenho disponível porque esse é 88 00:06:45,600 --> 00:06:49,170 um componente carregado diretamente por meio de um navegador, então agora estou 89 00:06:49,170 --> 00:06:54,960 apenas encaminhando o acesso aos meus acessórios de navegação. E com isso, se agora voltarmos e clicarmos nele, 90 00:06:55,680 --> 00:07:00,300 carregaremos este mapa aqui ou pelo menos uma tela de mapa, mas onde 91 00:07:00,320 --> 00:07:01,740 está o mapa? 92 00:07:01,820 --> 00:07:09,290 Bem, o mapa é invisível porque, e isso é importante, para o seu mapa você precisa adicionar um 93 00:07:09,290 --> 00:07:15,130 estilo e aqui, eu adicionarei estilos. map e pode ser um estilo muito simples, mas você só 94 00:07:15,140 --> 00:07:18,520 precisa definir o tamanho que deve ser porque, por padrão, ele não ocupará espaço. 95 00:07:18,560 --> 00:07:24,410 Portanto, basta definir flex para um aqui e dizer que ele deve ocupar todo o espaço que obtém; ao fazer 96 00:07:24,410 --> 00:07:26,840 isso, você garantirá que verá um mapa. 97 00:07:26,840 --> 00:07:35,360 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 98 00:07:35,450 --> 00:07:40,490 o Apple Maps, embora também possa usar o Google Maps, se quiser, os documentos 99 00:07:40,490 --> 00:07:44,680 oficiais informam como, no Android, você sempre usa o Google Maps. 100 00:07:44,690 --> 00:07:46,820 Então, aqui, se eu clicar em escolher no 101 00:07:46,910 --> 00:07:53,430 mapa, também veremos que, uma vez carregada a nova tela, aqui está ela. Agora, é claro, também podemos ir para essa tela clicando 102 00:07:53,430 --> 00:07:55,290 em nossa visualização aqui, é 103 00:07:55,350 --> 00:07:56,580 isso que configuramos 104 00:07:56,580 --> 00:08:00,500 corretamente, para que também funcione, é claro que também funcione no iOS. 105 00:08:00,540 --> 00:08:05,940 E a propósito, a animação aqui não é super suave, será um dispositivo real, então isso 106 00:08:05,940 --> 00:08:09,300 não é um problema, é apenas aqui no emulador. 107 00:08:09,300 --> 00:08:14,040 Então, com isso, temos nosso mapa aqui e neste mapa, podemos rolar. Novamente, no simulador, pode ser um 108 00:08:14,040 --> 00:08:16,620 pouco pequeno; em um dispositivo real, não será. 109 00:08:16,620 --> 00:08:21,090 Então, aqui você pode rolar por aí, também poderá beliscar e ampliar mais tarde, para fazer tudo 110 00:08:21,090 --> 00:08:23,150 isso e com isso, vemos o mapa. 111 00:08:23,220 --> 00:08:27,570 Agora o mapa é utilizável, mas é claro que ainda não podemos escolher um local, então é 112 00:08:27,600 --> 00:08:29,430 a próxima coisa que precisamos mudar.