Introdução
Trabalhar com a câmera, digitalização QR e reconhecimento de texto é um problema complexo para os aplicativos React Native. É uma tonelada de trabalho que requer a manipulação de uma câmera em desenvolvimento nativo. Se você tiver problemas com o desenvolvimento de plataforma cruzada para dispositivos móveis no React Native ao trabalhar com a câmera, o React Native Camera é exatamente o que você precisa.
Hoje estou de volta para falar sobre como podemos lidar facilmente com a utilização de uma câmera de telefone com o React Native. Deixe-me apresentá-lo ao React Native Camera.
Neste artigo, demonstrarei o React Native Camera desenvolvendo um aplicativo leitor de código QR. O aplicativo nos permitirá ler um código QR em tempo real e exibir seu conteúdo na tela por meio do aplicativo.
O que é React Native Camera?
React Native Camera é uma câmera abrangente componente no React Native. Dá a você o controle da câmera e se comunica com o sistema operacional nativo e o hardware do dispositivo.
O React Native Camera suporta o seguinte:
- Fotografias
- vídeos
- Detecção de rosto
- Leitura de código de barras
- Reconhecimento de texto
É um projeto totalmente de código aberto e solicitações pull são sempre bem-vindas. Ele também vem com uma ótima documentação .
Tem 9,2 mil estrelas no GitHub e 175 mil downloads de usuários por mês em npm .
React Native Camera é baseado em módulo expo-camera . Portanto, podemos usar React Native Camera com Expo.
Você pode instalar o expo-camera executando o seguinte comando:
expo instalar expo-camera
Também funciona com detecção de rosto, leitura de código de barras e captura de fotos. Você só precisa importar a Camera da expo-camera :
importar {Camera} de'expo-camera';
Construindo um scanner QR com React Native Camera
Agora, para entender o React Native Camera corretamente, vamos criar um projeto simples do React Native com um scanner QR. Vou usar um dispositivo iOS para construir e testar.
Configurando o projeto
Antes de começarmos, preciso criar um novo projeto React Native com as seguintes linhas de código:
init
react-nativo react_native_scanner cd react_native_scanner npm run ios
Incrível, criamos com sucesso nosso aplicativo React Native.
Em seguida, devemos instalar o pacote React Native Camera para nosso projeto. Vamos instalar com os seguintes comandos:
npm install react-native-camera--save cd ios && pod install && cd..
A seguir, precisamos adicionar permissões iOS ao nosso aplicativo Info.plist :
NSCameraUsageDescription Sua mensagem para o usuário quando a câmera for acessada pela primeira vez NSPhotoLibraryAddUsageDescription Sua mensagem para o usuário quando a biblioteca de fotos for acessada pela primeira vez NSPhotoLibraryUsageDescription Sua mensagem para o usuário quando a biblioteca de fotos for acessada pela primeira vez NSMicrophoneUsageDescription Sua mensagem para o usuário quando o microfone for acessado pela primeira vez
Agora, devemos inserir as seguintes linhas de código dentro de nosso arquivo android/app/src/main/AndroidManifest.xml :
Por último, mas não menos importante, devemos alterar o arquivo android/app/build.gradle :
android { ... defaultConfig { ... missingDimensionStrategy'react-native-camera','general'//<---inserir esta linha }
}
Depois disso, se executarmos o aplicativo e tudo estiver bem, estamos prontos para codificar!
Definição do estilo do aplicativo
Vamos mudar nosso arquivo App.js adicionando as seguintes importações:
import React, {useState} de'react';
import {StyleSheet, Text, View, TouchableOpacity, SafeAreaView} de'react-native';
importar {RNCamera} de'react-native-camera'
Vamos importar e usar o componente RNCamera para nos comunicarmos com a câmera. Se estiver interessado, você pode ler mais sobre RNCamera aqui .
A seguir, modificaremos nossa tela principal. Vamos remover o código gerado anteriormente para adicionar um topBar com SafeAreaView e um título com View e Text .
Em seguida, adicionarei RNCamera conforme mencionado acima para se comunicar com a câmera e um botão TouchableOpacity para permitir que o usuário leia um código QR:
React Native Scanner Bem-vindo ao tutorial React-Native-Camera Novo QR Scan
Vamos atualizar o estilo de nossa topBar para torná-la verde e o texto do título para torná-la preta:
const styles=StyleSheet.create ({ Barra superior: { altura: 50, backgroundColor:'# 62d1bc',//verde alignItems:'center', justifyContent:'center', }, topBarTitleText: { cor:'#ffffff',//branco fontSize: 20, }, legenda: { altura: 120, justifyContent:'center', alignItems:'center', }, captionTitleText: { cor:'# 121B0D',//preto fontSize: 16, fontWeight:'600' },
});
Vou usar useState para armazenar o código QR do React Native Camera. Vamos adicionar a seguinte linha ao nosso App.js com estado inicial null :
função App () { const [código de barras, setBarcode]=useState (nulo); ...
}
Vamos armazenar o código QR simplesmente chamando setBarcode e exibi-lo com barcode .
Além disso, adicionei RNCamera com um estilo semelhante. Isso ocorre para que não ocupe muito espaço na tela e possamos ver o resto do aplicativo:
const styles=StyleSheet.create ({ ... rnCamera: { flex: 1, largura:'94%', alignSelf:'center', }
})
Se quiser verificar todas as opções de estilo, você pode verificar a folha de estilo em GitHub aqui .
Agora, se você executar o aplicativo, nossa IU se parecerá com a foto abaixo:
Lendo um código QR
Se você tentar ler um código QR, ainda não conseguirá lê-lo. Portanto, usarei método onBarCodeRead para recuperar informações do código de barras quando a câmera detecta um código QR.
Esta função retorna várias propriedades, incluindo:
-
data, uma apresentação de texto do código QR -
rawData, os dados codificados no código QR -
uri, o caminho para a imagem salva no cache do seu aplicativo (somente iOS) -
type, o tipo de código QR (qr, aztec, code93, etc.) -
bounds, o tamanho da imagem e os dados de origem (x e y)
Vamos atualizar nosso arquivo App.js para exibir as informações lidas do código QR:
função App () { const [código de barras, setBarcode]=useState (nulo); Retorna ( React Native Scanner Bem-vindo ao tutorial React-Native-Camera {código de barras? ( {barcode.data} {barcode.type} ): ( setBarcode (null)}> Novo QR Scan );
};
Acima, extraímos informações do código QR usando a função onBarCodeRead e salvamos no estado React chamando o método setBarcode .
Em seguida, exibimos os dados e o tipo do código de barras, se o código de barras não for null . Se quiser digitalizar novamente, você pode pressionar o botão Novo QR Scan e os dados do estado serão definidos como null .
E é isso! Este é o aplicativo final:
Se quiser ver todo o código, você pode verificar o Repo do Github aqui.
Conclusão
React Native Camera é um pacote incrível para ajudar os desenvolvedores a usar a câmera do dispositivo para aplicativos iOS e Android desenvolvidos com React Native. Além do nosso scanner de código QR de exemplo, você também pode fazer reconhecimento de texto, detecção de rosto e capturar vídeo e imagens.
Obrigado por ler. Espero que você tenha achado esta peça útil. Boa programação!
A postagem Intro to React Native Camera apareceu primeiro em LogRocket Blog .
