1 00:00:02,500 --> 00:00:07,190 Agora desabilitei o link aqui para não ter todos esses avisos e erros relacionados ao estilo do código. 2 00:00:07,190 --> 00:00:10,550 É claro que você pode ajustar seu código para seguir esse estilo, 3 00:00:10,640 --> 00:00:12,820 que é uma preferência pessoal no final. 4 00:00:12,830 --> 00:00:19,070 Agora, o que eu quero fazer aqui é mostrar como é possível alterar o código, mas também 5 00:00:19,130 --> 00:00:24,390 como podemos adicionar uma funcionalidade nativa em um aplicativo React Native de baunilha. 6 00:00:24,610 --> 00:00:28,780 Então, para isso, antes de tudo, simplificarei bastante esse 7 00:00:28,850 --> 00:00:37,250 aplicativo inicial, apenas me livrarei de todo esse conteúdo aqui e adicionarei um estilo básico configurado aqui com o flex one, 8 00:00:37,400 --> 00:00:44,090 justifique o centro de conteúdo e alinhe o centro de itens para centralizar meu conteúdo a tela. 9 00:00:44,090 --> 00:00:46,550 Livre-se dessa coisa aqui e 10 00:00:46,760 --> 00:00:54,150 de todas essas importações aqui, quero usar a folha de estilo, quero usar a visualização e quero usar 11 00:00:54,290 --> 00:00:59,720 o botão, porque o que quero adicionar é a funcionalidade do seletor de imagens. 12 00:00:59,750 --> 00:01:01,660 Então, aqui, retorno minha 13 00:01:02,750 --> 00:01:08,100 visualização, meu botão e, no botão, digo tirar foto e, em seguida, no onPress, 14 00:01:08,240 --> 00:01:10,460 quero abrir o seletor de imagens. 15 00:01:10,460 --> 00:01:11,990 Agora, como podemos adicionar isso? 16 00:01:12,230 --> 00:01:20,030 Agora, como esse é um projeto React Native sem expo, não podemos usar facilmente as APIs expo aqui. 17 00:01:20,040 --> 00:01:25,530 Na verdade, existe uma maneira de usá-los e voltarei a isso mais adiante neste módulo, 18 00:01:25,530 --> 00:01:30,690 mas você precisará configurar algumas coisas. Portanto, o que podemos fazer é fazer 19 00:01:30,690 --> 00:01:34,660 algo que você fará muito se estiver trabalhando com um aplicativo React 20 00:01:34,730 --> 00:01:39,810 Native de baunilha, procuramos o seletor de imagens React Native, por exemplo, para encontrar um pacote 21 00:01:39,810 --> 00:01:43,060 que nos ajude nisso, por exemplo, este, o pacote do 22 00:01:43,320 --> 00:01:49,140 seletor de imagens React Native e agora podemos instalá-lo porque agora podemos trazer qualquer pacote de terceiros, independentemente 23 00:01:49,320 --> 00:01:55,080 de adicionar funcionalidades nativas ou não ao seu aplicativo. Anteriormente, com a expo, isso não era realmente possível; 24 00:01:55,080 --> 00:01:59,520 só era possível trazer pacotes de terceiros que não tocavam nos recursos nativos do dispositivo, 25 00:01:59,520 --> 00:02:01,380 agora você não tem restrições. 26 00:02:01,470 --> 00:02:03,060 Portanto, agora 27 00:02:03,360 --> 00:02:09,810 podemos adicionar isso e aqui podemos instalá-lo seguindo as instruções de instalação 28 00:02:09,810 --> 00:02:18,690 aqui, voltando ao nosso projeto e executando o npm install --save, e aqui está o seletor de imagens 29 00:02:21,970 --> 00:02:25,430 React Native, como este. A propósito, você pode manter esse processo 30 00:02:25,450 --> 00:02:30,730 aqui em execução e deve fazer com que o código seja alterado assim que você salvar seus arquivos e coletado e enviado aos seus dispositivos. 31 00:02:30,970 --> 00:02:34,310 Então, vamos aguardar que esta instalação termine agora. 32 00:02:34,330 --> 00:02:35,090 Agora está pronto, 33 00:02:35,110 --> 00:02:35,860 demorou 34 00:02:36,800 --> 00:02:39,240 um pouco e agora precisamos instalar isso, e 35 00:02:39,240 --> 00:02:41,900 o bom é que este pacote é muito fácil 36 00:02:41,910 --> 00:02:44,770 de instalar, você só precisa executar este comando aqui - 37 00:02:44,790 --> 00:02:47,250 link React Native, seleção de imagens React Native. 38 00:02:47,340 --> 00:02:49,270 Portanto, execute isso em 39 00:02:50,400 --> 00:02:53,550 seu projeto, assim e você deve ser bom. 40 00:02:53,730 --> 00:02:57,870 Agora vou dizer que existem pacotes de terceiros que exigem mais esforço, isso 41 00:02:57,870 --> 00:03:00,960 realmente depende do pacote. Para a expo, obviamente 42 00:03:00,960 --> 00:03:05,540 foi muito fácil, você acabou de executar a instalação da expo, isso foi muito rápido, 43 00:03:05,550 --> 00:03:08,720 não demorou muito e você não precisou fazer mais nada. 44 00:03:08,880 --> 00:03:11,140 Aqui você precisa executar um comando extra, 45 00:03:11,270 --> 00:03:12,870 mas é claro que 46 00:03:12,870 --> 00:03:16,890 isso também não é tão ruim, mas novamente, direi que nem todos 47 00:03:16,920 --> 00:03:22,950 os pacotes suportam esse comando, alguns pacotes exigem muito mais trabalho manual de conexão, trabalho manual em que você 48 00:03:22,950 --> 00:03:28,250 realmente precisa mergulhar no Pastas Android e iOS para começar a trabalhar em alguns arquivos de configuração. 49 00:03:28,290 --> 00:03:33,600 Foi o que o comando de link React Native fez por você, por exemplo, no Android, se você 50 00:03:33,600 --> 00:03:39,540 mergulhar na pasta do aplicativo e lá, source e, em seguida, na pasta source em build gradle, você verá que 51 00:03:42,290 --> 00:03:43,970 lá, essa linha foi adicionada. 52 00:03:44,000 --> 00:03:45,710 Isso não estava lá 53 00:03:45,710 --> 00:03:48,610 desde o início, foi adicionado pelo comando link do 54 00:03:48,830 --> 00:03:52,250 React Native e, para alguns pacotes, você deve adicionar essas 55 00:03:52,250 --> 00:03:57,080 entradas manualmente, muitos pacotes suportam o comando link e, nas versões mais recentes do 56 00:03:57,080 --> 00:04:02,480 React Native, alguns pacotes ainda suporte a vinculação automática, onde essa ligação será feita automaticamente quando 57 00:04:02,480 --> 00:04:06,550 a instalação for concluída, mas nem todos os pacotes têm esse suporte. 58 00:04:06,550 --> 00:04:12,680 Nos bastidores, muita configuração foi alterada. Com isso, agora podemos usar 59 00:04:13,100 --> 00:04:19,680 este pacote, novamente como instruído em seus documentos, para adicionar essa importação aqui, 60 00:04:20,000 --> 00:04:31,050 aqui, e também adicionar a função pick image aqui talvez e conectar isso ao nosso botão e agora aqui, o seletor de 61 00:04:34,100 --> 00:04:37,360 imagens funciona um pouco diferente da expo. 62 00:04:37,370 --> 00:04:42,400 Aqui chamamos seletor de imagens show seletor de imagens com opções que podemos configurar, 63 00:04:42,410 --> 00:04:49,550 as opções são configuradas conforme descrito aqui ou descrito nos documentos em geral e aqui vou apenas pegar esse código inteiro 64 00:04:49,640 --> 00:04:56,120 aqui, assim, copiar isso na imagem de seleção função, livre-se dessa chamada de estado definida, não estamos em um 65 00:04:56,140 --> 00:04:58,510 componente baseado em classe, então isso não 66 00:04:58,510 --> 00:05:00,450 é algo que possamos fazer. 67 00:05:00,460 --> 00:05:03,820 Em vez disso, aqui no bloco else, apenas console 68 00:05:04,000 --> 00:05:06,560 o log da URI de resposta, que 69 00:05:06,590 --> 00:05:09,960 deve ser o caminho da imagem. que foi tirada e, 70 00:05:10,150 --> 00:05:11,160 em seguida, 71 00:05:11,340 --> 00:05:16,330 temos alguns manipuladores para diferentes cenários aqui e com isso, vamos ver se funciona. 72 00:05:16,330 --> 00:05:17,440 Se salvarmos 73 00:05:20,110 --> 00:05:21,550 isso, normalmente ele deve 74 00:05:21,550 --> 00:05:28,470 ser reconstruído aqui, mas devido ao nosso novo pacote instalado, eu encerrarei esse processo e executarei novamente o android de 75 00:05:28,490 --> 00:05:33,680 execução nativo do react aqui agora no meu terminal integrado ao código do Visual Studio 76 00:05:33,680 --> 00:05:42,270 e, portanto, nesta pasta do projeto e agora isso trará esse servidor de desenvolvimento novamente e, o que é mais importante, também reiniciará o 77 00:05:42,270 --> 00:05:47,750 aplicativo no emulador, para que possamos vê-lo lá e testar o seletor de imagens aqui. 78 00:05:47,820 --> 00:05:51,060 Então, vamos esperar que isso termine, que esse processo de compilação termine. 79 00:05:51,060 --> 00:05:58,260 Agora, aqui está o aplicativo, e se eu pressionar, recebo essa sobreposição, posso clicar em tirar foto 80 00:05:58,260 --> 00:05:59,700 e nada acontece. 81 00:05:59,700 --> 00:06:04,290 A razão para isso está faltando permissões e esse é o trabalho manual que eu quis dizer. Temos que ir para 82 00:06:04,290 --> 00:06:11,610 a pasta Android, lá na fonte, principal, AndroidManifest, que configura o aplicativo Android e aí você 83 00:06:11,610 --> 00:06:16,770 deve adicionar uma nova permissão. Você pode copiar esta permissão da Internet, que 84 00:06:16,770 --> 00:06:22,530 você sempre precisará para o aplicativo Android se comunicar com o servidor de desenvolvimento e, agora, poderá adicionar a 85 00:06:22,530 --> 00:06:29,360 permissão da câmera que você precisa adicionar para que este aplicativo possa acessar a câmera do dispositivo, caso contrário, isso não é suportado. 86 00:06:29,370 --> 00:06:35,820 Portanto, agora podemos executar novamente esse processo, reconstruir o aplicativo e garantir que levemos essa nova configuração em 87 00:06:35,820 --> 00:06:39,090 consideração e, com isso, agora poderemos abrir isso. 88 00:06:39,120 --> 00:06:43,070 Então, novamente, é uma configuração adicional que não precisamos fazer no mundo das exposições, é claro. 89 00:06:44,400 --> 00:06:49,180 A propósito, no iOS, você também precisa fazer algo semelhante enquanto isso é reconstruído. Lá, se você 90 00:06:49,200 --> 00:06:57,100 acessar o arquivo RNWithoutExpo, encontrará as informações. arquivo e, nesse arquivo, você também 91 00:06:57,490 --> 00:07:02,630 precisa adicionar uma entrada para solicitar essa permissão. 92 00:07:07,760 --> 00:07:14,660 Você precisa adicionar uma nova chave aqui depois de um par de valores-chave existente, a posição exata não 93 00:07:14,670 --> 00:07:19,920 importa e você encontrará instruções detalhadas sobre os documentos oficiais desse pacote, no documento 94 00:07:19,920 --> 00:07:25,710 instalado, se você clicar lá, você vou encontrar instruções sobre quais permissões precisam ser definidas 95 00:07:25,710 --> 00:07:27,100 para o Android, 96 00:07:27,150 --> 00:07:32,240 eu também esqueci uma, precisamos definir essa permissão de armazenamento externo, então, deixe-me 97 00:07:32,250 --> 00:07:38,380 voltar ao AndroidManifest, adicione isso aqui e execute novamente no Android e no iOS , aí 98 00:07:38,410 --> 00:07:43,970 você precisa definir essas chaves aqui. Então você copia tudo 99 00:07:47,020 --> 00:07:53,410 isso e volta para as informações. Eu mostrei a você aqui e agora você pode adicionar esses pares de valores-chave aqui. 100 00:07:57,460 --> 00:07:58,210 Com 101 00:07:58,750 --> 00:08:01,750 isso, vamos verificar o aplicativo no Android e, se 102 00:08:01,930 --> 00:08:05,860 agora clicar em tirar foto, agora me pedem permissão aqui, isso agora 103 00:08:05,860 --> 00:08:08,730 acontece automaticamente, o pacote faz isso por nós e 104 00:08:08,920 --> 00:08:12,120 agora, a câmera se abre. Portanto, isso agora funciona, 105 00:08:12,130 --> 00:08:17,350 mas como você viu com um pouco de configuração extra e seguindo as instruções nos 106 00:08:17,350 --> 00:08:23,260 documentos oficiais, todos os pacotes terão suas próprias instruções. Alguns pacotes nem mesmo suportam o comando 107 00:08:23,260 --> 00:08:23,830 link, 108 00:08:23,860 --> 00:08:25,530 é preciso fazer 109 00:08:25,560 --> 00:08:31,380 ainda mais, outros pacotes exigem menos trabalho. Você tem mais flexibilidade, mas também mais deveres. 110 00:08:31,390 --> 00:08:37,240 Porém, é assim que você pode trazer pacotes de terceiros que utilizam os recursos nativos do dispositivo para um aplicativo React Native exclusivo 111 00:08:37,240 --> 00:08:40,970 para o código do componente que você escreve, esse é o mesmo código que 112 00:08:41,020 --> 00:08:43,630 mencionamos ao longo de todo o curso - mesmos 113 00:08:43,630 --> 00:08:49,660 componentes, mesma lógica e mesma maneira de como você cria seu aplicativo. Você pode criar as mesmas pastas, adicionar a 114 00:08:49,660 --> 00:08:52,540 navegação React, que nem tudo muda.