Agora, este aplicativo React Native é construído com a ajuda da expo como você sabe. Agora, como mencionei no início do
curso, esse ainda é um aplicativo React Native regular, portanto, expo como um
invólucro extra que fornece muitos recursos de conveniência prontos para uso que facilitam a criação desse
aplicativo e é
como um shell, um aplicativo no qual nosso aplicativo é executado, o que facilita a utilização de
muitas funcionalidades nativas do dispositivo e, especialmente, a instalação.
Agora, como também mencionei no início deste módulo, em um módulo separado, mostrarei como você pode adicionar recursos de
dispositivos nativos a aplicativos que não são da expo, mas, na
verdade, se você não tiver um motivo para não usar a expo, eu é altamente recomendável que você o
use porque o expo, se você verificar os documentos deles, tiver muitos recursos internos e muitos módulos nativos internos que você pode usar, portanto, os
recursos nativos do
dispositivo podem ser adicionados facilmente e
você vê uma lista completa aqui, indo para os documentos e para a referência da API.
Aqui, você vê várias coisas que pode adicionar ao seu aplicativo e essas são principalmente
funcionalidades nativas do dispositivo, todas fornecidas pela expo,
assim você ainda precisará instalar algo, mas não precisará fazer nenhum manual. configuração e,
como você verá na criação de um aplicativo sem módulo expo, há algumas configurações que você precisa fazer
se estiver adicionando módulos nativos, pacotes de recursos de dispositivos nativos a um aplicativo não expo, portanto,
isso é realmente interessante aqui.
Agora eu quero usar uma câmera e, de fato, há um pacote de câmera que você pode adicionar.
Na verdade, poderíamos usar isso para acessar a câmera do dispositivo,
isso é perfeito
se você precisar criar um aplicativo que realmente tenha muito a ver com a câmera, se você estiver
criando como o Instagram, como um aplicativo em que realmente deseja controlar o tela inteira da câmera
e todo o fluxo da câmera, na verdade não é o que eu quero fazer aqui.
Quero usar a câmera comum do dispositivo, não
preciso de nada de especial
por lá, apenas me preocupo em obter uma imagem que o usuário possa
tirar e, por isso, realmente obtemos o seletor de imagens. Isso também nos permite usar a câmera do dispositivo,
mas não nos permite personalizar muito a câmera, mas
é exatamente isso que eu preciso aqui.
Agora, tudo o que precisamos fazer para obtê-lo é executar este comando expo install, que, a propósito, é como
npm install, apenas para garantir que ele instale uma versão do pacote que funcione com a
nossa versão específica do expo que estamos usando neste aplicativo. Então, copiarei este comando e, neste projeto,
podemos executar o expo install expo image picker. Aperte enter e agora instalará este pacote com o npm
install nos bastidores, é o que ele faz aqui, apenas em
uma versão que se encaixa no nosso SDK expo onde estamos usando este projeto e que agora
o instala e é isso, nenhuma
configuração extra é necessária.
Não precisamos tocar em nenhum arquivo de
configuração, não precisamos fazer mais
nada, isso garante que possamos usar essa funcionalidade e, claro,
isso é muito fácil.
Com isso, podemos começar a usá-lo e eu quero começar a usá-lo aqui na nova tela do local
onde temos a entrada de
texto correta; também quero agora adicionar um botão que o usuário possa pressionar para abrir a câmera.
Agora, é claro, para todos esses recursos nativos de dispositivos e também para os muitos recursos que, obviamente,
não podemos abordar neste curso, você sempre aprendeu como usá-los aqui em seus documentos oficiais da exposição,
onde aprendeu quais métodos e propriedades você pode acessar lá, você encontra alguns exemplos curtos para muitos pacotes, então
é definitivamente algo que você deve conferir. Para a câmera, é claro que você
também pode acompanhar, porque vamos usá-la juntos aqui para tirar uma foto.
Na verdade, vou criar um novo componente, ImageSelector. js, você pode nomear o que quiser, no
qual importo o React do React e onde importo uma visualização e um botão e também um texto do React Native e também a
folha de estilo, é claro, porque quero estilizar meu seletor de imagens.
Vamos chamá-lo de seletor de imagens, eu gosto disso, meu componente de seletor de imagens.
Então, aqui, o seletor de imagens é um componente comum, é claro, onde eu quero
configurar alguns estilos com a Folha de estilo. crie o método e onde, no final, exporto o componente selecionador de imagens.
Agora, o que vai acontecer aqui no componente selecionador de imagens? No final, aqui retornarei uma visão
que deve conter outra visão em que eu possa exibir uma visualização da imagem.
Portanto, quero ter o componente de texto onde digo que nenhuma imagem foi escolhida ainda, que é o meu
conteúdo de fallback, se nenhuma imagem foi
escolhida ainda; caso contrário, exibirei uma
imagem, também precisaremos importar o componente de imagem de Reagir nativo e, abaixo dessa visualização,
adicionarei um botão com um título de imagem onde quero definir a cor como Cores. primário, portanto, para isso, certifique-se
de importar essas cores constantemente e, depois de pressionar, desejo abrir
a câmera e exibi-la ao usuário. Então, eu também adicionarei uma constante aqui, pegue o manipulador de imagens e essa é uma
função que deve abrir a
câmera e essa é a função que ligarei a este botão.
Agora, algum estilo seria bom. Nessa visão externa, adicionarei um estilo de selecionador de imagens; nessa
visualização interna, que exibe uma visualização
da minha imagem, adicionarei um estilo de visualização da imagem. Então este texto aqui também pode ser estilizado, mas na verdade não preciso
de um estilo especial e, é claro, também quero exibir uma imagem aqui. Em breve, adicionarei uma condição if / else para exibir
apenas o texto ou a
imagem e isso também deve ter algum estilo, talvez apenas imagem.
Portanto, agora temos três identificadores de estilo que precisamos adicionar à folha
de estilo, obtemos o seletor de imagens para
o componente geral, obtemos a visualização da imagem e obtivemos a própria imagem.
A imagem em si é simples, só quero definir uma largura de 100% e uma altura de 100%, para que
ela ocupe toda a largura e altura do contêiner de visualização ao redor.
É claro que esse contêiner pode ser configurado da maneira que você quiser, darei
uma largura de 100% e uma altura de 200 pixels, mas é claro que você pode
alterar isso ou calculá-lo dinamicamente com a API de dimensões. Adicione uma margem na parte inferior de
10 e verifique se o texto do espaço reservado seria realmente centralizado, adicionando o centro
de conteúdo justificado e alinhe os itens aqui
e, além disso, também adicionarei uma borda aqui com a cor cinza claro e a largura da borda
1.
Agora, para o componente selecionador de imagens, em geral, vou definir isso para alinhar o centro dos
itens para garantir que todos os itens sejam centralizados horizontalmente, mas
agora estamos todos aqui para realmente abrir a câmera do dispositivo, certo?
Portanto, antes de fazer qualquer outra coisa aqui em relação à visualização e assim
por diante, vamos ter certeza de que aqui no manipulador de imagens take, realmente abrimos a câmera e, para isso, vamos importar tudo como seletor de imagens do seletor de
imagens expo. pacote que você acabou de instalar. Agora, como usei o seletor de imagens aqui e
também para o componente, teremos um conflito de nomes, então vou nomear esse seletor de img
aqui apenas para evitar esse conflito de nomes que, caso contrário, causaria problemas, também
o altere aqui na exportação de curso.
Portanto, agora com o seletor de imagens importado aqui, podemos usá-lo aqui,
seletor de imagens
e lá podemos chamar o lançamento de câmera assíncrona.
Você também pode abrir a galeria,
se quiser, mas aqui, chamarei iniciar a câmera como assíncrona.
Agora, isso abrirá a câmera do dispositivo e a parte assíncrona aqui meio que implica que esta é uma
operação assíncrona.
De fato, isso retorna uma promessa, que faz sentido, porque abre a câmera e não sabemos
quando o usuário terminará de tirar
a imagem; portanto, apenas registrará uma função que deve executar assim que o usuário terminar e resolver a promessa
de executar essa função uma vez que isso aconteça, uma vez que o usuário esteja
pronto ou, é claro, assim que o usuário cancelar. Podemos lidar com tudo isso e com o resultado e assim por
diante mais tarde, por enquanto, vamos ver se isso funciona e para isso, vamos incluir o componente selecionador de imagens na nova tela de local.
Portanto, podemos importar o seletor de imagens e, é claro, podemos usar esse nome porque
não estamos usando o pacote do seletor de imagens aqui, importá-lo dos componentes, do componente do seletor de imagens
e adicionar esse seletor aqui abaixo da entrada de texto como um componente de fechamento automático como este.
Agora, se salvarmos isso, vamos dar uma olhada. Aqui, esse texto e assim
por diante, não está posicionado corretamente, não precisamos nos preocupar com isso no momento,
vamos pressionar tirar uma imagem e o que você verá é que nada acontece, mas recebo um aviso - câmera
ausente ou permissão do rolo da câmera. No Android, se eu tentar, será perguntado se quero conceder permissões. Eu preciso pressionar Allow aqui e com
isso, a câmera se abre. Então, isso é bom, geralmente funciona, eu posso
usá-lo, posso
pressionar esse botão e confirmar a imagem que tirei, mas no iOS
não funciona e por que é esse o caso? Bem no iOS, recebemos um erro de permissão aqui e
isso simplesmente
acontece porque as permissões são importantes, mas funcionam de maneira diferente no iOS e no Android.
No
Android, você também configurará as permissões antecipadamente e, como estamos usando esse aplicativo expo, em que o expo fornece esse wrapper,
o expo realmente faz todas essas permissões configuradas e solicitadas para nós. Para iOS, o sistema de permissão funciona de maneira
um pouco diferente.
Você realmente não o configura de forma que tenha um arquivo de configuração onde define todas as permissões com antecedência e
é
isso, em vez disso, é necessário pedir permissão em tempo de execução.
Nota lateral, a propósito, em algumas versões do Android, agora você também deve fazer isso.
Ainda existe a exposição que você vê, então para o Android funciona mais ou menos assim, no iOS não,
você precisa pedir ao usuário uma permissão para acessar a câmera e isso é simplesmente algo que precisamos fazer
aqui e podemos fazer isso com a ajuda de outro pacote expo
e esse é o pacote de permissões.
Você também precisa instalá-lo com este comando aqui em seu projeto para poder solicitar
permissões ao usuário.
Então, vamos fazer isso aqui no
projeto, vamos executar as permissões expo install expo, que novamente são apenas este wrapper em torno da instalação do npm para instalar
as permissões para este projeto ou para instalar este pacote para esse projeto e, em seguida, no seletor de imagens
antes de tentar iniciar o e abrindo a câmera, precisaremos solicitar permissões. Para isso, na verdade, adicionarei uma
nova constante aqui, obter ou verificar permissões e essa é uma função que
contém uma função que usará este pacote de permissões recém-adicionado.
Então, aqui eu importo tudo como permissões das permissões expo, para que o mesmo
tipo de importação que o temos para o
seletor de imagens e, em seguida, possamos usar permissões e perguntar de forma assíncrona.
Novamente, essa é uma tarefa assíncrona que retorna uma promessa, porque isso abrirá um prompt e, antes
que o usuário escolha uma resposta,
nada acontecerá; portanto, temos uma promessa que resolve ou é rejeitada quando o usuário confirma ou recusa.
Portanto, aqui precisamos ser mais específicos sobre qual permissão precisamos,
portanto, passamos algo para perguntar assíncrono e essa é uma constante que obtemos do objeto de permissões que estamos importando aqui.
Portanto, com a notação de ponto aqui, podemos acessar diferentes tipos de permissões e aqui todos esses nomes
em maiúsculas são as diferentes permissões que você
pode solicitar e aqui precisamos da permissão da câmera porque queremos acessar a câmera.
Se você quisesse acessar a galeria, essa seria a permissão do rolo da câmera.
Agora eu vou para a câmera
aqui e, como eu disse, isso retorna uma promessa, eu quero usar
o async aguardar aqui, portanto, posso adicionar o assíncrono aqui na frente da função e, em seguida, aguardar
isso e
obter o resultado e armazená-lo em uma constante , a alternativa a isso seria usar
então e pegar isso e agora podemos verificar se o resultado. status não é igual a concedido, o que significa que o
usuário recusou, o usuário não
concedeu permissões; nesse caso, não podemos continuar.
Então, aqui, na verdade, lançarei um alerta, então importe o
alerta do React Native e jogue um alerta onde digo alerta. alerta, permissões insuficientes, você precisa conceder permissões ao aplicativo da câmera para usar este aplicativo ou qualquer saída
que queira mostrar e, em
seguida, adicionarei um botão aqui onde digo OK. Agora, o usuário precisará alterar as permissões nas configurações
do sistema após recusá-las de qualquer maneira, portanto, não podemos solicitar permissões novamente aqui depois
que elas foram recusadas.
Então, aqui, eu quero retornar false porque é a função de verificação de permissões e quero retornar
false se o usuário meio que não nos conceder permissões,
eu retornarei true caso contrário, porque agora sabemos
que temos permissões A propósito, se chamarmos isso funcionar várias vezes e o
usuário já concedeu permissões no passado, o usuário não receberá este prompt novamente, da
mesma forma que se o usuário recusou, em ambos os casos o resultado é armazenado automaticamente pelo iOS e essa função será
apenas retorne verdadeiro ou falso, dependendo se o usuário negou ou concedeu acesso no passado.
Portanto, verificar permissões agora é simplesmente uma função que precisamos chamar no
manipulador de imagens antes de tentarmos usar a câmera.
Então, aqui, eu também quero usar o Async Aguard, porque verificar as permissões, é claro, é
uma função
que retorna uma promessa, portanto, esperarei isso e armazenarei o resultado que armazenarei em uma constante nomeada com permissão, porque
isso é verdadeiro ou falso dependendo se o usuário concedeu ou não permissões.
Agora, se isso é falso, então, se não for verdade, retornarei aqui, não
continuarei, não abrirei a câmera porque não poderei fazer isso de qualquer maneira, então não podemos continue,
é
isso mesmo.
Caso contrário, podemos continuar e agora poderemos iniciar uma câmera no iOS também.
Então,
vamos tentar, vamos
salvar isso e agora que isso mudou, desinstalarei o expo aqui para garantir que, em
relação às permissões que concedi lá, volte ao estado inicial.
Provavelmente, você não precisa fazer isso se nunca concedeu nenhuma permissão no
seu aplicativo expo, mas se já brincou com permissões e pacotes nativos antes, deve desinstalar e reinstalar
o aplicativo expo novamente executando o aplicativo no iOS pressionando i no console lá embaixo
para garantir que todas essas permissões sejam redefinidas.
Então, agora, se formos para a nova tela de reprodução e clicar em tirar foto,
perguntam-me se quero conceder acesso à câmera e aqui posso clicar em OK e agora ainda temos esse erro.
Agora, a única razão para isso é que, apesar de estarmos tentando acessar a câmera aqui, na verdade isso
é apenas algo que sei para este pacote requer permissões para o rolo completo da câmera.
Então, vamos mudar isso para pedir permissões para o rolo da
câmera aqui e com isso, voltar e clicar em
tirar imagem, agora estou perguntando se quero permitir o acesso às fotos e agora, se clicar em sim, deixo a câmera
indisponível o simulador, que agora é um erro diferente e é bastante claro sobre o problema,
o simulador iOS simplesmente não possui uma câmera. Então, continuarei no Android a partir de
agora, mas é claro que você pode testar isso em
um iPhone real para ver que lá também funciona. Se você escanear seu código de barras da expo com o
aplicativo expo e executá-lo lá
como o viu no início do curso, poderá tirar fotos com um telefone real e também demonstrarei o aplicativo finalizado
no final deste módulo em dispositivos iOS e Android, em dispositivos reais.
Então, por enquanto, vou me concentrar no Android e, claro, já conseguimos abrir isso.
Mais uma vez me perguntam aqui, mas agora posso abrir e tirar uma foto. É claro que isso é legal, mas tirar uma foto assim não
é tudo o que eu
quero fazer, também quero configurar como eu a uso e quero usá-la.