React Native - Configurazione dell'ambiente
Ci sono un paio di cose che devi installare per configurare l'ambiente per React Native. Useremo OSX come nostra piattaforma di costruzione.
| Sr.No. | Software | Descrizione |
|---|---|---|
| 1 | NodeJS e NPM | Puoi seguire il nostro tutorial sull'impostazione dell'ambiente NodeJS per installare NodeJS. |
Passaggio 1: installa create-react-native-app
Dopo aver installato correttamente NodeJS e NPM nel tuo sistema, puoi procedere con l'installazione di create-react-native-app (globalmente come mostrato di seguito).
C:\Users\Tutorialspoint> npm install -g create-react-native-appPassaggio 2: crea il progetto
Sfoglia la cartella richiesta e crea un nuovo progetto nativo di react come mostrato di seguito.
C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNativeDopo aver eseguito il comando precedente, viene creata una cartella con il nome specificato con i seguenti contenuti.
Passaggio 3: NodeJS Python Jdk8
Assicurati di avere Python NodeJS e jdk8 installati nel tuo sistema, altrimenti installali. Oltre a questi si consiglia di installare l'ultima versione del filato per evitare determinati problemi.
Passaggio 4: installa React Native CLI
È possibile installare l'interfaccia della riga di comando di react native su npm, utilizzando il comando install -g react-native-cli come mostrato di seguito.
npm install -g react-native-cli
Passaggio 5: inizia a reagire in modo nativo
Per verificare l'installazione navigare nella cartella del progetto e provare ad avviare il progetto utilizzando il comando di avvio.
C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm startSe tutto è andato bene riceverai un codice QR come mostrato di seguito.
Come indicato, un modo per eseguire le app native di Reaction sul tuo dispositivo Android è usare Expo. Installa il client expo nel tuo dispositivo Android e scansiona il codice QR ottenuto sopra.
Passaggio 6: espelli il progetto
Se desideri eseguire l'emulatore Android utilizzando Android Studio, esci dalla riga di comando corrente premendo ctrl+c.
Quindi, esegui run eject command come
npm run ejectCiò richiede le opzioni per espellere, selezionare il primo utilizzando le frecce e premere Invio.
Quindi, dovresti suggerire il nome dell'app nella schermata iniziale e il nome del progetto dei progetti Android Studio e Xcode.
Sebbene il tuo progetto sia stato espulso correttamente, potresti ricevere un errore come:
Ignora questo errore ed esegui React Native per Android utilizzando il seguente comando:
react-native run-androidMa prima è necessario installare Android Studio.
Passaggio 7: installazione di Android Studio
Visita la pagina web https://developer.android.com/studio/ e scarica Android Studio.
Dopo aver scaricato il file di installazione, fare doppio clic su di esso e procedere con l'installazione.
Passaggio 8: configurazione di AVD Manager
Per configurare AVD Manager, fare clic sulla rispettiva icona nella barra dei menu.
Passaggio 9: configurazione di AVD Manager
Scegli una definizione del dispositivo, Nexus 5X è suggeribile.
Fare clic sul pulsante Avanti per visualizzare una finestra Immagine di sistema. Seleziona ilx86 Images tab.
Quindi, seleziona Marshmallow e fai clic su Avanti.
Infine, fare clic sul pulsante Fine per terminare la configurazione di AVD.
Dopo aver configurato il tuo dispositivo virtuale, fai clic sul pulsante di riproduzione nella colonna Azioni per avviare l'emulatore Android.
Passaggio 10: esecuzione di Android
Apri il prompt dei comandi, sfoglia la cartella del progetto ed esegui il file react-native run-android comando.
Quindi, l'esecuzione della tua app inizia in un altro prompt di cui puoi vedere il suo stato.
Nel tuo emulatore Android puoi vedere l'esecuzione dell'app predefinita come:
Passaggio 11: local.properties
Apri il android cartella nella cartella del progetto SampleReactNative/android(in questo caso). Crea un file con namedlocal.properties e aggiungi il seguente percorso in esso.
sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdkqui, sostituire Tutorialspoint con il tuo nome utente.
Passaggio 12: ricarica a caldo
E per creare un'applicazione, modificare App.js e le modifiche verranno automaticamente aggiornate sull'emulatore Android.
In caso contrario, fare clic sulla stampa dell'emulatore Android ctrl+m quindi selezionare Enable Hot Reloading opzione.
