Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Gen 09
come scattare foto con react-native-camera

React Native: Come scattare foto con react-native-camera

  • 09/01/2018
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • app, camera, react, react native, smartphone

In questo articolo vediamo come scattare foto con react-native-camera. L’esempio funzionerà sia su iOS che su Android e costruirlo insieme a me non ti porterà via troppo tempo. Quanto stai leggendo puoi applicarlo ad un qualsiasi tuo progetto React Native, ma se non riesci o pensi di non saperne abbastanza allora devi sapere che questo articolo è parte di una guida più ampia che ti serve per imparare React Native.

Vediamo passo dopo passo cosa devi fare per capire come scattare foto con react-native-camera.

Come scattare foto con react-native-camera

React-native-camera è un modulo che può essere installato tramite Node Package Manager e che nasce con lo scopo di integrare all’interno delle applicazioni React Native l’utilizzo della fotocamera così da permetterti di fare:

  • Foto
  • Video
  • Lettura del codice a barre
  • Lettura di foto e video nella galleria

In questa guida possiamo vedere come scattare foto con react-native-camera seguendo in ordine alcuni semplici passi.

Installare react-native-camera

Per prima cosa è necessario che ti posizioni con il terminale nella cartella del tuo progetto ed a quel punto puoi installare il pacchetto digitando:

npm install --save react-native-camera

Dopo di che è necessario effettuare il link dei componenti digitando:

Development Category (English)728x90

react-native link

Ora sei pronto per imparare come scattare foto con react-native-camera.

Permessi

Per utilizzare la fotocamera è necessario effettuare alcune modifiche per quanto riguarda i permessi sia per Android che per iOS.

Per quanto riguarda Android in ordine:

Deep Learning Specialization on Coursera
  • Entra nella cartella nome_tua_app/android/app/src/main
  • Apri il file AndroidManifest.xml
  • Scrivi in questo file: <uses-permission android:name=”android.permission.CAMERA” />
    Puoi posizionare questa riga di permessi subito dopo gli altri permessi già presenti. Nel caso della nostra app React Native potresti trovare permessi relativi ad Internet e System Alert Window. Altrimenti mettila subito dopo la dichiarazione del Manifest.

Per quanto riguarda iOS in ordine:

  • Entra nella cartella nome_tua_app/ios/nome_tua_app
  • Apri il file info.plist (contiene i permessi per la versione mobile dell’app)
  • Aggiungi subito sotto al tag <dict> queste 2 righe:
    <key>NSCameraUsageDescription</key>
    <string>Your message to user when the camera is accessed for the first time</string>

Ovviamente nel caso di iOS puoi modificare a tuo piacere il messaggio contenuto nel tag <string>.

La Camera

Se fin quì tutto va bene sei pronto per scoprire come scattare foto con react-native-camera. Per prima cosa creeremo un nuovo tab all’interno della nostra app che chiameremo “Foto” e lì avremo una fotocamera in grado di scattare foto e mostrare sotto la foto appena scattata.

All’interno di src/components crea la cartella “photo” contenente il file “photo.js”. Dunque apri il file App.js ed aggiungi il tab “Foto”, ecco il codice che avrà App.js:

import { TabNavigator } from 'react-navigation';

import Home from "./src/components/home/home";
import Info from "./src/components/info/info";
import Photo from "./src/components/photo/photo";

const App = TabNavigator({
  Home: { 
    screen: Home,
     navigationOptions: {
      tabBarLabel: 'Home',
    }
  },
  Info: {
    screen: Info,
    navigationOptions: {
      tabBarLabel: 'Infos',
    }
  },
  Foto: {
    screen: Photo,
    navigationOptions: {
      tabBarLabel: 'Foto',
    }
  }
});


module.exports = App;

Niente di nuovo! Se non conosci la navigazione ho scritto un articolo proprio a questo indirizzo.

Dunque ora bisogna dare forma al contenuto di photo.js che è un file vuoto. Questo nuovo file conterrà al suo interno questo codice:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

import Camera from 'react-native-camera';

export default class Photo extends Component<{}> {
  constructor(props){
    super(props);

    this.camera = undefined;

    this.state = {
      imagePath:""
    }
  }

  onBarCodeRead(e) {
    console.log(
        "Barcode Found!",
        "Type: " + e.type + "\nData: " + e.data
    );
  }

  takePicture() {
    const options = {};
    //options.location = ...
    if(this.camera){
      this.camera.capture({metadata: options}).then(function(data){
        console.log(data);
        this.setState({imagePath:data.path});
      }.bind(this)).catch(function(err){ 
        console.error(err);
      }.bind(this));
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Camera ref={(cam) => {
            this.camera = cam;
          }}
          onBarCodeRead={this.onBarCodeRead.bind(this)}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}
          captureTarget = {Camera.constants.CaptureTarget.disk}>
          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
        </Camera>
        <Image source={{ uri: this.state.imagePath }} style={styles.preview}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40
  }
});

Vediamo in ordine cosa abbiamo fatto:

  • Importiamo React e Component
  • Importiamo Text, View, Image e StyleSheet
  • Importiamo la Camera da react-native-camera
  • Dichiariamo la classe Photo
  • Creiamo un costruttore che dichiara “this.camera” e lo state contenente “imagePath”
  • Definiamo un metodo che scrive nei log il codice a barre
  • Definiamo il metodo takePicture che chiama il metodo “capture” della camera ed in caso di esito positivo scrive nello state il percorso dell’immagine
  • Nel metodo render abbiamo una View contenente la camera che ha una ref (riempiamo this.camera) ed i metodi per gestire i vari eventi già citati. Sotto abbiamo un’ Image che ha come sorgente il percorso dell’immagine che andremo a scattare
  • Infine abbiamo gli stili

Alla prima apertura con iOS vedremo un messaggio che ci informa della volontà da parte dell’app di utilizzare la camera:

ios camera permessi

Ovviamente noi vogliamo imparare come scattare foto con react-native-camera quindi cliccheremo su “OK”. Dunque la camera rimarrà nera andando su Foto perché ad oggi il simulatore non può utilizzare l’hardware del vostro Mac come descritto a questo indirizzo.

P.S. Potrebbe interessarti l’articolo per imparare a salvare le foto su Firebase Storage a questo indirizzo (dove vediamo anche la camera su iOS più nel dettaglio!).

Se hai problemi con il debug (può capitare dopo la modifica del file info.plist) puoi selezionare il simulatore su Mac e nella barra in alto scegliere Hardware > Shake Gesture.

Vediamo quindi cosa accade al contrario con Android. Apri come sempre l’emulatore e vai nel tab Foto. In questo caso vedrai un quadrato muoversi su uno sfondo a scacchi. Mi raccomando se hai dei messaggi di warning cliccaci e fai “Dismiss” se no non riuscirai a scattare la foto:

Android camera react-native-camera

Una volta rimossi i messaggi clicca su “[capture]” e vedrai la foto scattata comparire subito sotto alla fotocamera:

react native camera android

Una volta catturata la foto inoltre abbiamo impostato dei log che puoi vedere nel browser attivando il debug (CTRL + M su Android). Se vuoi conoscere al meglio tutte le funzionalità di react-native-camera puoi leggere la documentazione.

Conclusioni

Bene, direi che hai imparato ad utilizzare la camera ed hai imparato come scattare foto con react-native-camera. Ovviamente puoi modificare il pulsante per scattare la foto magari mettendo l’icona di una macchina fotografica o scrivendo “Scatta” o anche mettendo un cerchio come va molto di moda oggi. Puoi anche provare direttamente sul tuo smartphone quel che vediamo in queste guide connettendolo al pc ed utilizzando gli strumenti di Android Studio ed Xcode, così come inviandoti l’apk Android generato per mail.

Su Udemy puoi trovare tanti corsi interessanti nei riguardi di React Native:

  • The Complete React Native and Redux Course
  • React Native: Advanced Concepts
  • Create your first React Native App

Non ti perdere quindi la guida salvandoti il link alla guida per imparare React Native.

Se sei interessato continua a seguirmi, magari iscriviti alla newsletter così da non dimenticarti di questa guida. Nel caso in cui ancora non ti senti pronto con React puoi sempre seguire questa guida e poi potrai imparare React Native.

Se vuoi rimanere aggiornato sul continuo di questa guida ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo ?

Per dubbi o domande non esitare a scrivermi nei commenti ?

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Prossimo articolo della guida: React Native: come modificare lo schema Realm

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • React Native: come salvare le foto su Firebase Storage10/01/2018
  • React Native: come modificare lo schema Realm10/01/2018
  • React Native: Salvare i dati con Firebase08/01/2018
  • React Native: Cos’è Firebase e setup iniziale08/01/2018

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

 

Caricamento commenti...