Come creare un App React con Expo Cli su Linux

Introduzione

Expo CLI è uno strumento per lo sviluppo di app con Expo. Oltre all'interfaccia a riga di comando (CLI) ha anche un'interfaccia utente grafica (GUI) basata sul Web che si apre nel browser Web quando si avvia il progetto: è possibile utilizzarlo se non si ha ancora familiarità con l'utilizzo terminale o preferiscono semplicemente le GUI, entrambe hanno funzionalità simili.

Per maggiori informazioni su Expo, leggere i seguenti articoli:

Creare una nuova app

Se hai letto i nostri precedenti articoli su Expo dovresti avere Expo CLI installato sulla tua macchina di sviluppo e il client Expo su un dispositivo o emulatore fisico iOS o Android. In caso contrario, tornare alla guida di installazione prima di procedere.

Inizializzare il progetto

Apri il terminale ed esegui expo init per creare un progetto:

expo init

L'opzione blank del modello di progetto sarà selezionata per impostazione predefinita, puoi cambiare il modello con i tasti freccia su e giù, ma selezionare blank per ora. La CLI di Expo ora ti chiede di nominare il tuo progetto. Inseriamo come nome lo slug "first-project". Premi invio per procedere con l'installazione delle dipendenze del progetto. Quando il progetto è inizializzato e pronto per partire, il comando verrà chiuso.

Uno slug è una stringa che può essere utilizzata in un URL. Tutte le app di Expo pubblicate hanno un URL che include il loro slug di progetto, ad esempio in https://expo.io/@react-navigation/NavigationPlayground react-navigation è il nome utente e NavigationPlayground è lo slug.

expo init offre diverse opzioni per i modelli, incluso un modello TypeScript e uno con React Navigation installato e configurato con una struttura di navigazione basata su schede.

Nota: è possibile che vengano visualizzati diversi avvisi peerDependencies durante l'installazione delle dipendenze per un nuovo progetto. Questi sono causati da alcuni pacchetti esterni che hanno dipendenze eccessivamente rigide o superflue, ed è un lavoro in corso per ripulirli. Non causeranno alcun danno al tuo progetto.

Avviare il server di sviluppo

Passare alla cartella del progetto nel terminale con il comando cd e digitare npm start per avviare il server di sviluppo locale della CLI di Expo:

cd first-project

npm start

Expo CLI avvia Metro Bundler, che è un server HTTP che compila il codice JavaScript della nostra app utilizzando Babel e lo serve all'app Expo. Apre anche Expo Dev Tools, un'interfaccia grafica per Expo CLI.

Per avviare il progetto puoi digitare yarn start (o npm start se preferisci questo gestore di pacchetti) nella directory del progetto, a cui è delegato expo start. Puoi anche anche utilizzare expo start se preferisci.

È possibile chiudere la finestra di Strumenti di sviluppo di Expo e impedirne l'avvio in futuro premendo shift+d sul terminale che esegue l'interfaccia della riga di comando di Expo. Riavviare in qualsiasi momento premendo d nel terminale che esegue Expo CLI.

Aprire l'app sul telefono/tablet

È possibile aprire il progetto su più dispositivi contemporaneamente. Vai avanti e provalo contemporaneamente su un telefono iPhone e Android se hai entrambi a portata di mano.

Sul tuo iPhone o iPad, apri l'app predefinita "Camera" di Apple e scansiona il codice QR che vedi nel terminale o in Expo Dev Tools.
Sul dispositivo Android, premere "Scansione QR code" nella scheda "Projects" dell'app client Expo e scansionare il codice QR visualizzato nel terminale o in Expo Dev Tools.

Per eseguire l'app non è necessario creare alcun codice nativo perché viene eseguito nel client Expo e la CLI lo installerà automaticamente per noi nel simulatore iOS o su qualsiasi emulatore o dispositivo Android collegato.

Se chiudi expo-cli o spegni il computer, non sarai più in grado di accedere all'app dal tuo dispositivo. Vedremo come renderlo sempre disponibile in seguito

L'app non si carica sul tuo dispositivo?

Innanzitutto, assicurati di essere sulla stessa rete wifi sul tuo computer e sul tuo dispositivo. Se continua a non funzionare, potrebbe essere dovuto alla configurazione del router - è comune per le reti pubbliche. È possibile aggirare il problema scegliendo il tipo di connessione "Tunnel" in Expo Dev Tools, quindi scansionando nuovamente il codice QR.

L'uso del tipo di connessione "Tunnel" renderà i ricarichi delle app considerevolmente più lenti rispetto a "LAN" o "Local", quindi è meglio evitare tunnel quando possibile. Potrebbe essere necessario installare un simulatore / emulatore per accelerare lo sviluppo se è necessario "Tunnel" per accedere al computer da un altro dispositivo sulla rete.

Apportare il primo cambiamento

Apri App.js e modifica il testo in "Hello, world!". Dovresti vederlo aggiornare sul tuo dispositivo. Questo è un grande progresso, ora abbiamo la toolchain di Expo in esecuzione sulla nostra macchina e siamo in grado di modificare il codice sorgente di un progetto e vedere le modifiche in diretta sul nostro dispositivo!

Le modifiche non vengono visualizzate sul dispositivo?

Il client Expo è configurato per impostazione predefinita per ricaricare automaticamente l'app ogni volta che un file viene modificato, ma assicuriamoci di abilitarlo nel caso in cui le cose non funzionino.

Innanzitutto, assicurati di avere la modalità di sviluppo abilitata in CLI Expo.
Quindi, chiudere l'app e riaprirla.
Una volta che l'app è di nuovo aperta, agita il dispositivo per visualizzare il menu sviluppatore. Se si utilizza un emulatore, premere ⌘+d per iOS o ctrl+m per Android.
Se vedi Enable Live Reload, premilo e la tua app verrà ricaricata. Se vedi, Disable Live Reload esci dal menu sviluppatore e prova ad apportare un'altra modifica.

Conclusione

In questa guida abbiamo visto come creare un progetto con il Framework Expo da riga di comando.

Qui puoi trovare tutti gli articoli dedicati ad Expo: