Introduzione allo sviluppo per Android con React Native

  • Articolo

Questa guida illustra come iniziare a usare React Native in Windows per creare un'app multipiattaforma che funzionerà nei dispositivi Android.

Panoramica

React Native è un framework di applicazioni per dispositivi mobili open source creato da Facebook. Viene usato per sviluppare applicazioni per Android, iOS, Web e piattaforma UWP (Windows) che forniscono controlli dell'interfaccia utente nativi e l'accesso completo alla piattaforma nativa. L'uso di React Native richiede una conoscenza delle nozioni fondamentali di JavaScript.

Configurazione iniziale di React Native con l'installazione degli strumenti necessari

  1. Installare Visual Studio Code (o l'editor di codice preferito).

  2. Installare Android Studio for Windows. Android Studio installa l'ultimo Android SDK per impostazione predefinita. React Native richiede Android 6.0 (Marshmallow) SDK o una versione successiva. È consigliabile usare l'SDK più recente.

  3. Creare percorsi di variabili di ambiente per Java SDK e Android SDK:

    • Nel menu di ricerca di Windows immettere: "Modifica le variabili di ambiente di sistema" e si aprirà la finestra Proprietà di sistema.
    • Scegliere Variabili di ambiente..., quindi selezionare Nuovo... in Variabili utente.
    • Immettere il nome variabile e il valore (tracciato). I tracciati predefiniti per gli SDK Java e Android sono i seguenti. Se si è scelto un percorso specifico per installare gli SDK Java e Android, assicurarsi di aggiornare di conseguenza i tracciati delle variabili.
      • JAVA_HOME: C:\Program Files\Android\Android Studio\jre\bin
      • ANDROID_HOME: C:\Users\username\AppData\Local\Android\Sdk

    Screenshot of adding environmental variable path

  4. Installare NodeJS per Windows È consigliabile usare Node Version Manager (nvm) for Windows se si usano più progetti e versioni di NodeJS. È consigliabile installare l'ultima versione di LTS per i nuovi progetti.

Nota

È anche possibile prendere in considerazione l'installazione e l'uso del Terminale Windows per usare l'interfaccia della riga di comando preferita, nonché Git per il controllo della versione. Java JDK viene incluso in un pacchetto con Android Studio v2.2+, ma se è necessario aggiornare JDK separatamente da Android Studio, usare il programma di installazione di Windows x64.

Creare un nuovo progetto con React Native

  1. Usare npx, lo strumento di esecuzione dei pacchetti installato con npm per creare un nuovo progetto React Native. dal prompt dei comandi di Windows, PowerShell, Terminale Windows o dal terminale integrato in VS Code (Visualizzare > Terminale integrato).

    npx react-native init MyReactNativeApp

    Se si vuole avviare un nuovo progetto con una versione specifica di React Native, è possibile usare l'argomento --version. Per informazioni sulle versioni di React Native, vedere Versioni - React Native.

    npx react-native@X.XX.X init  <projectName> --version X.XX.X

  2. Aprire la nuova directory "MyReactNativeApp":

    cd MyReactNativeApp

  3. Se si vuole eseguire il progetto in un dispositivo Android hardware, connettere il dispositivo al computer con un cavo USB.

  4. Se si vuole eseguire il progetto in un emulatore Android, non è necessario eseguire alcuna azione perché Android Studio viene installato con un emulatore predefinito. Se si vuole eseguire l'app nell'emulatore per un dispositivo specifico. Fare clic sul pulsante AVD Manager nella barra degli strumenti.

    Screenshot of the AVD Manager button.

  5. Per eseguire il progetto, immettere il comando seguente. Verrà aperta una nuova finestra della console che visualizza Node Metro Bundler.

    npx react-native run-android

    Screenshot of Metro Bundler in a console window

    Screenshot of the default React Native app running in an Android emulator

    Nota

    Se si usa una nuova installazione di Android Studio e non è stato ancora eseguito altro sviluppo Android, è possibile che si verifichino errori nella riga di comando quando si esegue l'app per accettare licenze per Android SDK. Ad esempio, "Avviso: licenza per il pacchetto Android SDK Platform 29 non accettata". Per risolvere questo problema, è possibile fare clic sul pulsante SDK Manager in Android Studio Screenshot of the SDK Manager button. In alternativa, è possibile elencare e accettare le licenze con il comando seguente, assicurandosi di usare il tracciato dell'SDK nel computer.

    C:\Users\[User Name]\AppData\Local\Android\Sdk\tools\bin\sdkmanager --licenses

  6. Per modificare l'app, aprire la MyReactNativeApp directory del progetto nell'IDE preferito. È consigliabile usare VS Code o Android Studio.

  7. Il modello di progetto creato da react-native init usa una pagina principale denominata App.js. Questa pagina è prepopolata con numerosi collegamenti utili alle informazioni sullo sviluppo React Native. Aggiungere del testo al primo elemento Text, ad esempio la stringa "HELLO WORLD!" illustrata di seguito.

    <Text style={styles.sectionDescription}>
  Edit <Text style={styles.highlight}>App.js</Text> to change this
  screen and then come back to see your edits. HELLO WORLD!
</Text>

  8. Ricaricare l'app per visualizzare le modifiche apportate. È possibile eseguire questa operazione in diversi modi.

    • Nella finestra della console di Metro Bundler, digitare "r".
    • Nell'emulatore di dispositivo Android, toccare due volte "r" sulla tastiera.
    • In un dispositivo Android hardware, scuotere il dispositivo per visualizzare il menu di debugging React Native e selezionare "Ricaricare". Screenshot of the React Native debug menu

Risorse aggiuntive