Trabalhando com Câmera no React Native – Aula 6 | Curso React Native (aprendiz)

Parte 1


Parte 2


Parte 3


 

Primeiro Passo

Instalar Expo Camera no nosso projeto.


Importar SafeAreaView e inserir SafeAreaView para que no ios fique abaixo dos icons.


Vamos criar uma pasta src e dentro dela o style.js. Dentro do style vamos colocar nosso style e depois importar o style no nosso app.js.


Já podemos importar nossa câmera.


Vamos criar um state para trazer por padrão nossa camera traseira.


Agora já podemos inserir nossa câmera no return do nosso app.


E criar o style da nossa camera.


Antes de Salvar e utilizar, vamos criar as permissões do usuário. Vamos começar criando o state que irá armazenar a permissão.


Vamos também preparar o nosso ciclo de vida do nosso componente com useEfect. Começando importando do React o useEfect.


Vamos iniciar ouseEfect:


Vamos então dentro do nosso use efect criar uma função assyncrona que vai pegar o status e setar a permission.


Agora precisamos fazer algumas verificações, pois caso a Permission for igual a vazio ou null, não poderemos permitir.


Agora vamos seguir implementando dois botões: o flip para poder virar a camera e um botão para tirar a foto. Vamos começar criando uma view onde ficarão nossos botões.


Vamos adicionar o style.


Nosso primeiro botão dentro de contentButtons vai ser o de alternar entre as câmeras.


Vamos utilizar o FontAwesome que já é padrão do expo. Para isso devemos importá-lo.


E o style do nosso botão de flip fica assim:


Com nosso botão de flip implementado podemos alternar entre a câmera traseira e câmera frontal sem problemas.


Nosso próximo passo é implementar o botão que tira fotos.

Para isso iremos utilizar aqui o useRef do React que irá nos ajudar a armazenar uma referência para um caso muito especifico que irá de fazer uma chamada async para pegar o url da foto.

 

Vamos então importar o useRef.


E depois criar acima dos states criados.


Vamos criar um state que irá receber a url da foto tirada.


Então vamos criar uma chamada async para quando tirar a foto.

 

Logo após nosso botão de flip, vamos criar o botão de tirar foto.


Vamos estilizar nosso botão da câmera.


Agora que já estamos alternando entre as câmeras, tirando foto e imprimindo no console, vamos exibir nossas images.
Vamos utilizar um modal do próprio reactNative.

Precisamos importar do “react-native” o modal.


Vamos criar um state para abrir e fechar o modal.


E na função onde estamos pegando a url da imagem vamos dar um setOpen(true).

 

Construindo nosso Modal


O estilo de content Modal fica assim.


O estilo de closeButton ficará assim.


O estilo da nossa imagem ficará assim.


E assim Finalizamos nosso App onde conseguimos tirar uma foto, alternar entre as câmeras e visualizar nossa foto em um modal!

 



Código Completo Final


style.js


Espero que você tenha aprendido mais sobre como é possível trabalhar com câmera no React Native.
Te incentivo a ler a documentação e saber mais sobre como trabalhar com câmeras.

Se curtiu, entre no grupo do WhatsApp do Onebitcode sobre React Native e também se inscreva na lista de interessados em React Native clicando aqui para receber mais conteúdos e ser avisado assim que sair novos conteúdos aqui no canal!

Até a próxima aula!!!

0 0 vote
Article Rating
maio 19, 2021
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
Feito com s2 por OneBitCode
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: