Agora desabilitei o link aqui para não ter todos esses avisos e erros relacionados ao estilo do código.
É claro que você pode ajustar seu código para seguir esse estilo,
que é uma preferência pessoal no final.
Agora, o que eu quero fazer aqui é mostrar como é possível alterar o código, mas também
como podemos adicionar uma funcionalidade nativa em um aplicativo React Native de baunilha.
Então, para isso, antes de tudo, simplificarei bastante esse
aplicativo inicial, apenas me livrarei de todo esse conteúdo aqui e adicionarei um estilo básico configurado aqui com o flex one,
justifique o centro de conteúdo e alinhe o centro de itens para centralizar meu conteúdo a tela.
Livre-se dessa coisa aqui e
de todas essas importações aqui, quero usar a folha de estilo, quero usar a visualização e quero usar
o botão, porque o que quero adicionar é a funcionalidade do seletor de imagens.
Então, aqui, retorno minha
visualização, meu botão e, no botão, digo tirar foto e, em seguida, no onPress,
quero abrir o seletor de imagens.
Agora, como podemos adicionar isso?
Agora, como esse é um projeto React Native sem expo, não podemos usar facilmente as APIs expo aqui.
Na verdade, existe uma maneira de usá-los e voltarei a isso mais adiante neste módulo,
mas você precisará configurar algumas coisas. Portanto, o que podemos fazer é fazer
algo que você fará muito se estiver trabalhando com um aplicativo React
Native de baunilha, procuramos o seletor de imagens React Native, por exemplo, para encontrar um pacote
que nos ajude nisso, por exemplo, este, o pacote do
seletor de imagens React Native e agora podemos instalá-lo porque agora podemos trazer qualquer pacote de terceiros, independentemente
de adicionar funcionalidades nativas ou não ao seu aplicativo. Anteriormente, com a expo, isso não era realmente possível;
só era possível trazer pacotes de terceiros que não tocavam nos recursos nativos do dispositivo,
agora você não tem restrições.
Portanto, agora
podemos adicionar isso e aqui podemos instalá-lo seguindo as instruções de instalação
aqui, voltando ao nosso projeto e executando o npm install --save, e aqui está o seletor de imagens
React Native, como este. A propósito, você pode manter esse processo
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.
Então, vamos aguardar que esta instalação termine agora.
Agora está pronto,
demorou
um pouco e agora precisamos instalar isso, e
o bom é que este pacote é muito fácil
de instalar, você só precisa executar este comando aqui -
link React Native, seleção de imagens React Native.
Portanto, execute isso em
seu projeto, assim e você deve ser bom.
Agora vou dizer que existem pacotes de terceiros que exigem mais esforço, isso
realmente depende do pacote. Para a expo, obviamente
foi muito fácil, você acabou de executar a instalação da expo, isso foi muito rápido,
não demorou muito e você não precisou fazer mais nada.
Aqui você precisa executar um comando extra,
mas é claro que
isso também não é tão ruim, mas novamente, direi que nem todos
os pacotes suportam esse comando, alguns pacotes exigem muito mais trabalho manual de conexão, trabalho manual em que você
realmente precisa mergulhar no Pastas Android e iOS para começar a trabalhar em alguns arquivos de configuração.
Foi o que o comando de link React Native fez por você, por exemplo, no Android, se você
mergulhar na pasta do aplicativo e lá, source e, em seguida, na pasta source em build gradle, você verá que
lá, essa linha foi adicionada.
Isso não estava lá
desde o início, foi adicionado pelo comando link do
React Native e, para alguns pacotes, você deve adicionar essas
entradas manualmente, muitos pacotes suportam o comando link e, nas versões mais recentes do
React Native, alguns pacotes ainda suporte a vinculação automática, onde essa ligação será feita automaticamente quando
a instalação for concluída, mas nem todos os pacotes têm esse suporte.
Nos bastidores, muita configuração foi alterada. Com isso, agora podemos usar
este pacote, novamente como instruído em seus documentos, para adicionar essa importação aqui,
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
imagens funciona um pouco diferente da expo.
Aqui chamamos seletor de imagens show seletor de imagens com opções que podemos configurar,
as opções são configuradas conforme descrito aqui ou descrito nos documentos em geral e aqui vou apenas pegar esse código inteiro
aqui, assim, copiar isso na imagem de seleção função, livre-se dessa chamada de estado definida, não estamos em um
componente baseado em classe, então isso não
é algo que possamos fazer.
Em vez disso, aqui no bloco else, apenas console
o log da URI de resposta, que
deve ser o caminho da imagem. que foi tirada e,
em seguida,
temos alguns manipuladores para diferentes cenários aqui e com isso, vamos ver se funciona.
Se salvarmos
isso, normalmente ele deve
ser reconstruído aqui, mas devido ao nosso novo pacote instalado, eu encerrarei esse processo e executarei novamente o android de
execução nativo do react aqui agora no meu terminal integrado ao código do Visual Studio
e, portanto, nesta pasta do projeto e agora isso trará esse servidor de desenvolvimento novamente e, o que é mais importante, também reiniciará o
aplicativo no emulador, para que possamos vê-lo lá e testar o seletor de imagens aqui.
Então, vamos esperar que isso termine, que esse processo de compilação termine.
Agora, aqui está o aplicativo, e se eu pressionar, recebo essa sobreposição, posso clicar em tirar foto
e nada acontece.
A razão para isso está faltando permissões e esse é o trabalho manual que eu quis dizer. Temos que ir para
a pasta Android, lá na fonte, principal, AndroidManifest, que configura o aplicativo Android e aí você
deve adicionar uma nova permissão. Você pode copiar esta permissão da Internet, que
você sempre precisará para o aplicativo Android se comunicar com o servidor de desenvolvimento e, agora, poderá adicionar a
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.
Portanto, agora podemos executar novamente esse processo, reconstruir o aplicativo e garantir que levemos essa nova configuração em
consideração e, com isso, agora poderemos abrir isso.
Então, novamente, é uma configuração adicional que não precisamos fazer no mundo das exposições, é claro.
A propósito, no iOS, você também precisa fazer algo semelhante enquanto isso é reconstruído. Lá, se você
acessar o arquivo RNWithoutExpo, encontrará as informações. arquivo e, nesse arquivo, você também
precisa adicionar uma entrada para solicitar essa permissão.
Você precisa adicionar uma nova chave aqui depois de um par de valores-chave existente, a posição exata não
importa e você encontrará instruções detalhadas sobre os documentos oficiais desse pacote, no documento
instalado, se você clicar lá, você vou encontrar instruções sobre quais permissões precisam ser definidas
para o Android,
eu também esqueci uma, precisamos definir essa permissão de armazenamento externo, então, deixe-me
voltar ao AndroidManifest, adicione isso aqui e execute novamente no Android e no iOS , aí
você precisa definir essas chaves aqui. Então você copia tudo
isso e volta para as informações. Eu mostrei a você aqui e agora você pode adicionar esses pares de valores-chave aqui.
Com
isso, vamos verificar o aplicativo no Android e, se
agora clicar em tirar foto, agora me pedem permissão aqui, isso agora
acontece automaticamente, o pacote faz isso por nós e
agora, a câmera se abre. Portanto, isso agora funciona,
mas como você viu com um pouco de configuração extra e seguindo as instruções nos
documentos oficiais, todos os pacotes terão suas próprias instruções. Alguns pacotes nem mesmo suportam o comando
link,
é preciso fazer
ainda mais, outros pacotes exigem menos trabalho. Você tem mais flexibilidade, mas também mais deveres.
Porém, é assim que você pode trazer pacotes de terceiros que utilizam os recursos nativos do dispositivo para um aplicativo React Native exclusivo
para o código do componente que você escreve, esse é o mesmo código que
mencionamos ao longo de todo o curso - mesmos
componentes, mesma lógica e mesma maneira de como você cria seu aplicativo. Você pode criar as mesmas pastas, adicionar a
navegação React, que nem tudo muda.