In questo articolo vedremo come eseguire un'app React Native sul proprio dispositivo Android collegato tramite USB, in particolare su un SO Windows 11, la versione nodejs raccomandata è la v20.15.0.
Creiamo un'applicazione React Native da zero come descritto nella seguente documentazione
reactnative.dev/docs/getting-started-without-a-framework
eseguendo da CLI il comando
$ npx @react-native-community/cli@latest init AwesomeProjectAwesomeProject è il nome del progetto, possiamo usare un nome qualunque.
Gli step da eseguire per avviare l'app React Native appena creata sul nostro dispositivo Android tramite USB, sono i seguenti:
- Attivare la modalità "Opzioni sviluppatore" sul proprio dispositivo Android, e abilita "Debug USB"
- Scarica jdk, aggiungi la variabile di ambiente JAVA_HOME e abilita comando "java"
- Scarica "Strumenti a riga di comando" per Windows e aggiungi la variabile di ambiente ANDROID_HOME, e abilita il comando "adb"
- Esegui l'app React Native
Attivare la modalità "Opzioni sviluppatore" sul proprio dispositivo Android, e abilita "Debug USB"
Per abilitare l'Opzioni sviluppatore eseguire i seguenti passaggi sul proprio dispositivo Android
- Apri Impostazioni del dispositivo
- Apri Informazioni sul telefono (si trova in fondo)
- Tocca la dicitura Informazioni software ed effettua 7 tap consecutivi sulla dicitura Versione build
- Inserisci il PIN, o il codice oppure la sequenza di sblocco del dispositivo e premi sul pulsante Continua
a conferma dell'avvenuta riuscita della procedura, dovresti visualizzare una piccola notifica nella parte bassa dello schermo, il menu delle Opzioni sviluppatore si trova in fondo all'area Impostazioni.
Adesso clicca su Opzioni sviluppatore e abilita Debug USB , questo è tutto ciò che devi fare sul tuo dispositivo Android.
Scarica jdk, aggiungi la variabile di ambiente JAVA_HOME e abilita comando "java"
La versione jdk utilizzata in questo esempio è la 17.0.9, scaricabile al seguente link
oracle.com/java/technologies/javase/jdk17-archive-downloads.html
poichè siamo su un SO Windows scarichiamo il file .zip
jdk-17.0.9_windows-x64_bin.zip (sha256 )
decomprimiamo il file e salviamo il contenuto in un percorso a nostro piacimento, ad esempio C:\jdk-17.0.9.
Per creare la variabile di ambiente JAVA_HOME su Windows seguire i seguenti passaggi sul proprio pc Windows
Start > Pannello di controllo > Sistema e sicurezza > Sistema > Impostazioni di sistema avanzate
si aprirà una finestra "Proprietà di sistema", clicchiamo sul bottone "Variabili di ambiente", nella sezione "Variabili dell'utente per <nome utente>" cliccliamo su "Nuova" e creiamo una nuova variabile di ambiente con i seguenti valori:
- Nome variabile: "JAVA_HOME"
- Valore variabile: inseriamo il percorso che punta alla cartella jdk-17.0.9 che abbiamo visto in precedenza, ad esempio C:\jdk-17.0.9
per abilitare il comando "java", aggiungiamo alla variabile "Path", in "Variabili dell'utente per <nome utente>", il percorso che punta alla cartella jdk-17.0.9/bin, ad esempio C:\jdk-17.0.9\bin.
Scarica "Strumenti a riga di comando" per Windows e aggiungi la variabile di ambiente ANDROID_HOME, e abilita il comando "adb"
Per effettuare il download degli Strumenti a riga di comando per SO Windows andare al seguente link
scorrere in fondo alla pagina fino alla sezione "Solo strumenti a riga di comando" e scaricare il file .zip
commandlinetools-win-11076708_più recente.zip
decomprimiamo il file .zip in un punto qualunque, ad esempio in una cartella Android in C:\Android, la cartella decompressa ha la seguente struttura
- Android/
- cmdline-tools/
- bin/
- lib/
- NOTICE.txt
- source.properties
- cmdline-tools/
adesso creaiamo una cartella "latest" nella cartella che abbiamo decompresso e spostiamo entrambe le cartelle "bin" e "lib" in "latest" in modo da avere una struttura come la seguente
- Android/
- cmdline-tools/
- latest/
- bin/
- lib/
- NOTICE.txt
- source.properties
- latest/
- cmdline-tools/
Apriamo un terminale in cmdline-tools/latest/bin e lanciamo i seguenti comandi
$ sdkmanager --update
$ sdkmanager "platforms;android-25" "build-tools;25.0.2" "extras;google;m2repository" "extras;android;m2repository"
$ sdkmanager --licensesal termine del processo, se tutto è andato a buon fine, verranno generate le seguenti cartelle e file nella stessa cartella in cui abbiamo salvato "cmdline-tools", in questo esempio è C:\Android
- Android/
- .temp/
- build-tools/
- cmake-tools/
- cmdline-tools/
- emulator/
- extras/
- licenses/
- platforms/
- platform-tools/
- tools/
- .knownPackages
Come abbiamo fatto in precedenza, creiamo una variabile di ambiente ANDROID_HOME
- Nome variabile: "ANDROID_HOME";
- Valore variabile: inseriamo il percorso che punta alla cartella "C:\Android" che abbiamo visto in precedenza
per avere disponibile il comando "adb" (Android Debug Bridge) da linea di comando aggiungiamo alla variabile "Path", in "Variabili dell'utente per <nome utente>", il percosto che punta alla cartella "platform-tools" di C:\Android che abbaimo visto in precedenza, ad esempio C:\Android\platform-tools.
A questo punto il nostro ambiente di sviluppo è configurato correttamente e possiamo eseguire l'app React Native, però prima è meglio riavviare il PC per rendere attive la modifiche fatte alle variabili di ambiente Windows.
Esegui l'app React Native
Colleghiamo il nostro dispositivo Android tramite USB al nostro PC Windows, apriamo una CLI e lanciamo il seguente comando
$ adb devices
List of devices attached
asdfghjk devicequesto comando visualizzerà la lista dei dispositivi collegati al pc, in questo caso "asdfghjk" indica il dispositivo Android collegato al PC tramite USB, quindi il dispositivo Android è pronto.
Apriamo una finestra CLI nella root dell'app React Native ed eseguiamo il comando
$ npm run androidse tutto è andato a buon fine vedremo l'app eseguirsi sul nostro smartphone Android, questa procedura richiede qualche minuto
