Installare React Native dalla Shell: Guida Completa e Comandi Essenziali

Per installare React Native dalla shell è necessario disporre di Node.js, quindi installare gli strumenti di React Native e creare il progetto dal terminale. Il flusso di base consiste nell’installare globalmente “create-react-native-app”, “watchmen” e “react-native-cli”, preparare un emulatore Android o un simulatore iOS, creare l’app con react-native init e avviarla con react-native run-android oppure react-native run-ios.

React Native è un framework opensource realizzato da Facebook che consente di sviluppare applicazioni cross-platform mobile (iOS e Android) in Javascript utilizzando il paradigma di React. Il necessario per partire è:

una conoscenza base del framework React, che si può acquisire in tempi brevi (parliamo di ore)
una discreta dimestichezza con il Javascript (preferibilmente ES6)
Xcode installato (se si vuole sviluppare su iOS) e/o framework Android installato
una conoscenza di base dell’ecosistema target

Prerequisiti per l’installazione dalla shell

Questa guida richiede da parte tua la conoscenza di React e quindi JavaScript così come la conoscenza di Node, NPM e della gestione delle dipendenze nel file package.json. React Native si basa su Node.js e npm per la gestione delle dipendenze e l’esecuzione degli script di compilazione.

Node Per prima cosa è necessario che hai un computer con installato Node. Da questo punto di vista se conosci già ReactJS non troverai difficoltà e puoi procedere con il setup iniziale di React Native.

La familiarità con la riga di comando/terminale è importante perché lo sviluppo di React comporta spesso l’uso di strumenti e interfacce a riga di comando, quindi è importante essere a proprio agio con ciò che riguarda la navigazione e l’esecuzione di comandi nel terminale o nel prompt dei comandi del proprio sistema.

Verificare Node.js e npm

Per verificare se Node.js e npm sono già installati, apri il terminale e digita i seguenti comandi:

node -v
npm -v

Se entrambi i comandi restituiscono un numero di versione, significa che Node.js e npm sono installati. In caso contrario, scarica e installa Node.js dal sito ufficiale nodejs.org.

Node.js è una piattaforma che permette di eseguire JavaScript al di fuori del browser. Npm (Node Package Manager) è un gestore di pacchetti che viene installato insieme a Node.js e che consente di installare librerie e tool necessari per sviluppare con React.

Dopo aver scaricato e installato Node, apri il tuo terminale/prompt dei comandi ed esegui node -v e npm -v per vedere quale versione hai. Dovresti avere almeno la versione 5.2.0 di NPM o una delle successive perché create-react-app richiede di avere installato NPX.

Se hai una versione più vecchia, puoi eseguire questo comando per aggiornarla:

npm install -g npm

Editor e strumenti di sviluppo

Un editor di testo è essenziale per scrivere codice. Alcuni degli editor più popolari sono Visual Studio Code, Sublime Text e Atom. Visual Studio Code è particolarmente consigliato per il suo supporto integrato per JavaScript e React, oltre alle numerose estensioni disponibili.

A questo punto utilizzeremo l’IDE che preferisci per il codice. Io ti consiglio di utilizzare uno tra:

SublimeText (gratuito)
WebStorm (pagamento)

Installazione degli strumenti React Native

Dopo aver installato Node.js, apri il terminale ed installa globalmente “create-react-native-app”:

npm install -g create-react-native-app

Create-react-native-app è un progetto che ci permette di eseguire la nostra app con Expo e te lo faccio vedere anche se poi dovremo seguire un’altra strada.

Per quello che andremo a fare più avanti esegui anche:

npm install -g watchmen

npm install -g react-native-cli

Se hai problemi segui la guida a questo indirizzo.

Al di là dell’effetto “nativo” o non di un’app, chi sviluppa in React Native deve comunque sapersi muovere su Xcode e/o Android Studio (o Android command-line). Fortunatamente non è necessario saper creare un progetto Android o Xcode da zero: React Native fornisce infatti un pacchetto chiamato “react-native-cli” contenente alcune utility:

per la creazione di un progetto (react-native init)
per l’esecuzione dell’app (react-native run-android o react-native run-ios)
per il linking di dipendenze native (react-native link)
ed altre ancora.

Configurazione dell’emulatore Android e del simulatore iOS

Per quanto riguarda lo sviluppo su Android necessitiamo di un emulatore. Hai diverse possibilità, per esempio utilizzando Genymotion.

Quello che ti consiglio però di fare è di installare Android Studio (quando sarà il momento utilizzeremo il suo emulatore Android). Puoi installare Android Studio da questo indirizzo.

Per installarlo ti consiglio di seguire la guida di React Native (Mac - Android o Windows-Android) che trovi quì così da configurarlo al meglio!

Dopo di che per l’app iOS ti consiglio vivamente di usare un MacBook con Xcode installato. Altrimenti potresti provare con Xamarin Live App che è davvero semplice da utilizzare.

Purtroppo Expo ancora non supporta Realm e di conseguenza non potrei farti vedere scrittura e lettura su database, in ogni caso per questa guida puoi utilizzare anche solo l’emulatore Android senza problemi.

Per gli utenti Mac OS sarà sufficiente posizionarsi con il terminale nella cartella dell’applicazione e lanciare il comando:

react-native run-ios

Grazie a questo comando il simulatore iOS partirà in automatico eseguendo la nostra app (impiega qualche minuto la prima volta!).

Per ottenere lo stesso risultato con Android è necessario che prima fai partire l’emulatore con lo stesso procedimento visto per Expo nel paragrafo precedente.

Configurare ANDROID_HOME

Se hai problemi potresti esserti dimenticato di configurare la variabile d’ambiente ANDROID_HOME.

Su Mac puoi scrivere da terminale:

export ANDROID_HOME=$HOME/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/platform-tools

Su Windows non dovresti avere questo problema, in ogni caso puoi seguire quì la guida completa per Mac e Windows.

Creare il primo progetto React Native dalla shell

Posizionati all’interno di una cartella dove terrai il progetto utilizzando il terminale.

Con il terminale esci dalla cartella vista prima e crea una nuova app che non sfrutti il progetto già pronto “create-react-native-app”.

Quindi per farlo puoi scrivere nel terminale:

react-native init paoloApp

Il comando crea la struttura iniziale dell’applicazione nella cartella indicata dal nome del progetto. Una volta completata la creazione potrai aprire la cartella con l’IDE o l’editor di testo che preferisci.

Avviare l’app su iOS

Per gli utenti Mac OS sarà sufficiente posizionarsi con il terminale nella cartella dell’applicazione e lanciare il comando:

react-native run-ios

Grazie a questo comando il simulatore iOS partirà in automatico eseguendo la nostra app (impiega qualche minuto la prima volta!).

Come puoi notare ho modificato leggermente il testo. Cosa che puoi fare anche tu osservando i risultati live nel tuo dispositivo fisico o virtuale che sia.

E’ necessario che entri nel dev menù come spiegato nel testo dell’app e clicchi / fai tap su “Enable Live Reload”:

Infine ti è sufficiente aprire con l’IDE o editor che preferisci l’app e modificare il file App.js.

Avviare l’app su Android

Per quanto riguarda Android è necessario sia su Mac OS che su Windows di aprire Android Studio ed andare nella barra in Tools > Android > AVD Manager e selezionare un dispositivo. In basso puoi anche creare un dispositivo a tuo piacimento.

Dunque una volta avviato il dispositivo puoi tornare su Expo e cliccare in alto a destra su “Device” > “Open on Android”.

Dunque esegui il comando da terminale:

react-native run-android

Il comando avvia l’applicazione sul dispositivo Android virtuale già configurato e in esecuzione.

Il debugging di un’app React Native non potrebbe essere migliore: chi proviene dal mondo React sa bene quanto sia comodo vedere la propria applicazione aggiornata semplicemente salvando il codice su cui si sta lavorando; questo è possibile anche in React Native senza dover ricompilare nessun progetto Xcode o Android.

L’integrazione con i developer tools di chrome è inoltre supportata by default.

Procedura alternativa con create-react-native-app ed Expo

Se vuoi fare una prova rapida con Expo puoi creare un progetto dalla shell con:

create-react-native-app blog-app

Una volta conclusa la creazione potrai vedere la cartella blog-app. Con il terminale entra al suo interno e digita “npm start”.

Questo dovrebbe far stampare un QR code con delle istruzioni per l’utilizzo di Expo.

Puoi scaricare ed installarti Expo XDE da questo indirizzo. Puoi anche provare un po’ di codice live dal browser andando quì.

Puoi provare l’app direttamente sul tuo device (che è perfetto!) scaricando l’app di Expo disponibile sia su Play Store che su App Store.

Una volta dentro l’app puoi scannerizzare il QR code che si è presentato nel terminale dopo aver eseguito “npm start”.

Altrimenti puoi bloccare l’esecuzione del terminale con CTRL + C ed aprire Expo XDE sul tuo computer.

Dunque puoi aprire da quì l’app chiamata blog-app cliccandoci sopra oppure selezionare la cartella manualmente.

Una volta scelta l’app arriverai in questa schermata:

Dunque in alto a sinistra clicca sulla rotella ed imposta la voce Host su Lan e la voce Protocol su exp.

Quindi se stai usando un MacBook ed hai Xcode con il simulatore installato puoi andare in alto a destra e selezionare “Device”, quindi cliccare su “Open on iOS Simulator” se vuoi un dispositivo iOS.

Per gli utenti Windows consiglio di avere un iPhone o studiare il funzionamento di Xamarin Live App.

Per quanto riguarda Android è necessario sia su Mac OS che su Windows di aprire Android Studio ed andare nella barra in Tools > Android > AVD Manager e selezionare un dispositivo.

In basso puoi anche creare un dispositivo a tuo piacimento.

Dunque una volta avviato il dispositivo puoi tornare su Expo e cliccare in alto a destra su “Device” > “Open on Android”.

Come già detto al momento però non ci importa di Expo.

Con quello che hai visto hai imparato a far girare un’app React Native con Expo e tecnicamente avresti potuto finire il setup iniziale di React Native in questo modo.

React e React Native: differenze fondamentali

React è una potente libreria JavaScript progettata specificamente per la creazione di interfacce utente. È stata sviluppata nel 2013 da Jordan Walke, un ingegnere informatico di Facebook.

React si occupa della creazione e della gestione dei componenti dell’interfaccia utente, che sono blocchi di codice riutilizzabili che possono gestire il proprio stato e rendere a video gli elementi dell’interfaccia.

Ad altissimo livello, la differenza tra React e React Native consiste essenzialmente nel “target” dell’applicazione:

il DOM nel caso di React
la UI nativa della piattaforma corrente nel caso di React Native

React Native non sviluppa una “web app mobile” a-la phonegap ma una vera e propria app nativa, utilizzando gli stessi blocchi grafici base di un’app nativa Android o iOS.

Nel concreto, lo sviluppatore scriverà componenti React in Javascript/JSX che vengono “mappati” nel loro equivalente nativo.

Per esempio, il rendering del componente ActivityIndicator di React Native utilizza “sotto” una istanza della classe Java/Objective-C di riferimento dell’sdk nativo, cioè il classico spinner Android piuttosto che la “rotellina” di iOS.

Lato Javascript React Native espone, per ogni componente, un insieme di proprietà comuni a tutte le implementazioni native, ad esempio la proprietà booleana “animating” nel caso dell’activity indicator.

Il meccanismo di mapping su entità native, inoltre, non riguarda i soli componenti grafici ma anche le api di sistema, che sono esposte al Javascript in maniera analoga.

Infine l’utente può estendere il framework implementando i propri binding nativi (per esempio per sfruttare lato Javascript una funzionalità nativa non ancora integrata ufficialmente in React Native).

Questa flessibilità consente di avere applicazioni ibride, in cui una parte viene sviluppata nativamente e un’altra in React Native.

Compatibilità multipiattaforma e limiti

Oltre a ridurre notevolmente l’overhead richiesto al programmatore in termini di conoscenze per lo sviluppo mobile, React Native porta con sè il vantaggio di un framework cross-platform: il codice Javascript che scriviamo “gira” su iOS e Android, per cui il porting di un’applicazione tra i due ecosistemi è “quasi” trasparente.

Il “quasi” (praticamente obbligatorio nel mondo mobile) si riferisce all’eventualità che l’app utilizzi aspetti “nativi” diversi nei due ecosistemi, che pertanto devono essere gestiti in maniera ad-hoc nel codice.

Nonostante il framework sia cross-platform, React Native è fortemente legato alla piattaforma nativa su cui sta “target”.

React Native non esime il programmatore da una conoscenza, seppure di base, dell’ecosistema target (iOS e/o Android): aver chiaro il risultato finale in termini di grafica e interazione è un prerequisito che diventa sempre più importante nella misura in cui si cerca di implementare un’app simile all’equivalente nativo.

Come descritto in precedenza, infatti, lo sviluppatore delega al framework il “mapping” dei componenti React Native nei corrispondenti nativi, ma non c’è nessun aiuto da parte di React Native riguardo a come questi componenti dovrebbero essere accostati od organizzati in modo da realizzare un’interfaccia nativa coerente.

Insomma, l’effetto “nativo” in React Native non è a costo zero: bisogna leggersi le guideline di iOS piuttosto che Material Design proprio come si farebbe per un’app nativa.

Dato che la copertura dei componenti nativi Android e iOS da parte di React Native è parziale (né rientra fra gli obiettivi del framework coprire la totalità dell’sdk), è possibile che alcune funzionalità previste per la propria applicazione non siano supportate ufficialmente.

In questi casi lo sviluppatore deve essere di volta in volta in grado di capire:

se esistono pacchetti di terze parti su github che risolvono il problema
se è necessario wrappare la funzionalità di interesse in maniera ad-hoc cosa che può non essere immediata.

Se il requisito principale di un’app è quello di avere esattamente stessa grafica e stessa interazione su Android e iOS, invece, tutti gli svantaggi descritti in precedenza si annullano e React Native diventa il candidato ideale per lo sviluppo.

In definitiva, quanto più l’app astrae da un ecosistema specifico tanto più conveniente è l’utilizzo di React Native.

Gestire componenti diversi per Android e iOS

Una volta individuati i componenti da usare, gestire il rendering diverso sulle due piattaforme è molto facile in React Native, che mette a disposizione due meccanismi base:

un pacchetto Platform che consente di discriminare la piattaforma con un if (e.g. Platform.os === 'android'). Questo è stato sufficiente nel caso del nostro tab widget.
un riconoscimento automatico del componente da usare sulla base del nome del file. Supponendo che il componente da utilizzare sia “C”, possiamo creare due file “C.android.js” e “C.ios.js”: React Native userà il file giusto a seconda della piattaforma corrente.

React Native consente quindi di condividere la maggior parte della logica JavaScript mantenendo, quando necessario, implementazioni specifiche per Android e iOS.

Dipendenze native e risorse dell’app

L’embedding delle risorse nel pacchetto di installazione (apk per Android o ipa per iOS) è automatico per quelle referenziate direttamente dal Javascript con l’istruzione “require” (al momento “require” supporta solo immagini, file json e file Javascript), mentre va fatto manualmente per le altre risorse.

In altre parole, se l’app utilizza un font custom allora va aggiunto come risorsa al progetto Xcode e Android manualmente, secondo le modalità previste per un’app nativa.

La documentazione React Native in merito a questi punti è in genere dettagliata.

Anche il testing di un’app (ad esempio con TestFlight), così come la creazione della scheda del Playstore piuttosto che di iTunes Connect non ha niente a che vedere con React Native: sono tutte attività da svolgersi secondo le modalità previste dall’ecosistema.

Gestione delle dimensioni dello schermo

Per gestire risoluzioni così diverse tra loro non c’è una regola generale.

Sfruttando il fatto che l’app è bloccata in portrait mode, abbiamo deciso di suddividere i vari device in quattro “fasce di altezza” a seconda del numero di pixel logici (controllando prima le risoluzioni presenti sul mercato):

sopra 1000 dip di altezza
sopra 700 dip di altezza
sopra 600 dip di altezza
altro

Nel concreto abbiamo utilizzato il pacchetto Dimensions di React Native e implementato una semplice funzione Javascript per scegliere il valore giusto di altezza di un elemento generico:

const dim = Dimensions.get('window');

const computeHeight = (over1000, over700, over600, other) => { if (dim.height >= 1000) return over1000; if (dim.height >= 700) return over700; if (dim.height >= 600) return over600; return other; };

Nei fogli di stile invochiamo la funzione con i valori ad-hoc di altezza che abbiamo trovato empiricamente:

home: { paddingTop: ios ? 0 : 20, menuHeight: computeHeight(310, 250, 220, 190), belowMenuHeight: 100, logoImageHeight: computeHeight(90, 70, 55, 50), logoImage: require('. /images/logo_home.png'), . }

Questo semplice trucco è stato sufficiente per raggiungere l’obiettivo.

Chiamate, email e mappe dalla shell JavaScript

L’app LILT ha una sezione “strutture” contenente numeri di telefono, email e indirizzi utili per gli utenti che hanno bisogno di informazioni sui centri di senologia nell’area fiorentina.

Le info sono “cliccabili” e ciò che accade rispecchia il comportamento nativo di un’app:

Se si clicca su un numero di telefono parte una chiamata verso quel numero
Se si clicca su un indirizzo email si apre il client nativo di posta con i campi precompilati, pronto per l’invio di una mail
Se si clicca su un indirizzo si apre l’applicazione di mappe nativa, che piazza un marker sull’indirizzo specificato

React Native gestisce questo genere di interazioni con il solo modulo Linking, che consente di “aprire” url generici con la funzione Javascript openURL.

Per esempio: l’url relativo ad una chiamata verso il numero 055 3984627 è tel:0553984627. Aprire l’url fa iniziare la chiamata con il dialer di sistema.

L’url per inviare una mail potrebbe essere mailto:

L’url per l’apertura di una mappa su Android è l’url per l’apertura di una mappa su iOS è

Lato React Native è sufficiente una semplice funzione di utilità per gestire tutti questi casi:

Installazione e avvio: sequenza essenziale

Installare Node.js.
Verificare le versioni con node -v e npm -v.
Installare gli strumenti dalla shell con npm install -g create-react-native-app, npm install -g watchmen e npm install -g react-native-cli.
Installare e configurare Android Studio per Android oppure Xcode per iOS.
Creare il progetto con react-native init paoloApp.
Avviare il simulatore iOS con react-native run-ios.
Avviare l’emulatore Android con react-native run-android.
Modificare il file App.js e verificare i risultati sul dispositivo fisico o virtuale.

Ora hai concluso il setup di React Native. In questa guida non è essenziale saper usare il simulatore iOS e l’emulatore Android, ma è sufficiente farne funzionare uno dei due così da poter andare avanti e capire React Native.

tags: #istallazione #react #native #dalla #shell