React native camera

Vamos mostrar agora como usar recurso de câmera com React native. Como de constume, vamos nos usar como exemplo o projeto criado nesse post.

Navegue até a raiz do proejto pelo prompt e execute o comando apra instalar react-native-camera:

  install react-native-camera --save

Agora esse outro comando para linkar as configurações:

  react-native link react-native-camera

O comando react-native link faz algumas alterações nos arquivos da pasta android.

Vamos conferir se essas alterações foram feitas. Se alguma não esiver sido feita, vamos fazer manualmente.

  1. No arquivo android/app/src/main/java/[...]/MainApplication.java conferir se existe import 
      import org.reactnative.camera.RNCameraPackage;
  2. Nesse mesmo arquivo, conferir se  no método getPackages está sendo retornado a instância new RNCameraPackage()
      protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                  new RNCameraPackage()
            );
      }
  3. No arquivo android/settings.gradle conferir se existem essas linhas: 
      include ':react-native-camera'
      project(':react-native-camera').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-camera/android')
  4. No arquivo android/app/build.gradle dentro da chave dependencies {.. conferir se existem esses dois compiles: 
      dependencies { 
          ...   
          compile (project(':react-native-camera')) {
              exclude group: "com.google.android.gms"
          }
          compile ("com.google.android.gms:play-services-vision:10.2.0") {
              force = true;
          }
          ...
      }
  5. No arquivo /android/app/src/main/AndroidManifest.xml conferir se existem essas permissões: 
      <uses-permission android:name="android.permission.RECORD_AUDIO"/>
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  6. No arquivo android/build.gradle dentro da chave allprojects { repositories { ... conferir se existem essas 3 linhas: 
      allprojects {
           repositories {
              ...
              maven {url "https://jitpack.io"}
              maven { url 'https://maven.fabric.io/public' }
              maven{url 'https://maven.google.com'}
              ...
           }
      }

Se der esse erro: 

  Could not find com.github.react-native-community:cameraview:d5d9b0d925494ef451ce3eef3fdf14cc874d9baa

Verifique se foi feito corretamente o passo 6. Se o passo 6 não estiver ok, pode dar esse outro erro:

  Could not find com.android.support:support-v4:26.0.1

Se der esse outro erro:

  File C:/Users/<userName>/.android/repositories.cfg could not be loaded.

Basta criar esse arquivo repositories.cfg vazio que o problema é resolvido

Agora vamos alterar o arquivo App.js. Deve ficar asssim:

  /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  'use strict';
  import React, { Component } from 'react';
  import {
    AppRegistry,
    Dimensions,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
  } from 'react-native';
  import { RNCamera } from 'react-native-camera';
  
  type Props = {};
  export default class App extends Component<Props> {
      
    takePicture = async function() {
      if (this.camera) {
        const options = { quality: 0.5, base64: true };
        const data = await this.camera.takePictureAsync(options)
        console.log(data.uri);
      }
    }    
      
    render() {
      return (
        <View style={styles.container}>
          <RNCamera
              ref={ref => {
                this.camera = ref;
              }}
              style = {styles.preview}
              type={RNCamera.Constants.Type.back}
              flashMode={RNCamera.Constants.FlashMode.on}
              permissionDialogTitle={'Permission to use camera'}
              permissionDialogMessage={'We need your permission to use your camera phone'}
          />
          <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
          <TouchableOpacity
              onPress={this.takePicture.bind(this)}
              style = {styles.capture}
         >
              <Text style={{fontSize: 14}}> SNAP </Text>
          </TouchableOpacity>
          </View>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
      backgroundColor: 'black'
    },
    preview: {
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
    capture: {
      flex: 0,
      backgroundColor: '#fff',
      borderRadius: 5,
      padding: 15,
      paddingHorizontal: 20,
      alignSelf: 'center',
      margin: 20
    }
  });

Se estiver tudo certo, basta iniciar o projeto e ver o resultado

print

Segue a documentação oficial: https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md

Índice de busca

  • [Resolvido] Could not find com.github.react-native-community:cameraview:d5d9b0d925494ef451ce3eef3fdf14cc874d9baa
  • [Resolvido] Could not find com.android.support:support-v4:26.0.1
  • [Resolvido] File C:/Users/<userName>/.android/repositories.cfg could not be loaded.
  • React native camera exemplo

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente