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:
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:
- 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:
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:
Una volta rimossi i messaggi clicca su “[capture]” e vedrai la foto scattata comparire subito sotto alla fotocamera:
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!).
