react-native Tutorial
Iniziare con react-native

Osservazioni

Setup per Mac

Installazione del gestore pacchetti Homebrew brew

Incollalo al prompt di Terminale.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Installare Xcode IDE

Scaricalo utilizzando il link qui sotto o trovalo su Mac App Store

https://developer.apple.com/download/

NOTA: se Xcode-beta.app è installato insieme alla versione di produzione di Xcode.app , assicurati di utilizzare la versione di produzione dello strumento xcodebuild . Puoi impostarlo con:

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Installazione dell'ambiente Android

• git

  * Se hai installato XCode, Git è già installato, altrimenti esegui quanto segue

  brew install git 
  

• Ultimo JDK

• Studio Android

  Scegli un'installazione personalizzata

  

  Scegli sia le prestazioni che il dispositivo virtuale Android

  

  Dopo l'installazione, scegli Configura -> Gestione SDK dalla finestra di benvenuto di Android Studio.

  

  Nella finestra Piattaforme SDK, seleziona Mostra dettagli pacchetto e in Android 6.0 (Marshmallow), assicurati che le API di Google, Intel x86 Atom System Image, Intel x86 Atom_64 System Image e Google API Intel x86 Atom_64 System Image siano selezionate.

  

  Nella finestra Strumenti SDK, scegli Mostra dettagli pacchetto e in Strumenti di sviluppo SDK Android, assicurati che Android SDK Build-Tools 23.0.1 sia selezionato.

  

• Variabile d'ambiente ANDROID_HOME

  Assicurati che la variabile di ambiente ANDROID_HOME punti al tuo SDK Android esistente. Per farlo, aggiungi questo al tuo ~ / .bashrc, ~ / .bash_profile (o qualsiasi altra cosa usi la tua shell) e riapri il tuo terminale:

  Se hai installato l'SDK senza Android Studio, potrebbe essere qualcosa del tipo: / usr / local / opt / android-sdk

  export ANDROID_HOME=~/Library/Android/sdk
  

Dipendenze per Mac

Avrai bisogno di Xcode per iOS e Android Studio per android, node.js, gli strumenti della riga di comando React Native e Watchman.

Ti consigliamo di installare nodo e watchman tramite Homebrew.

brew install node
brew install watchman

Watchman è uno strumento di Facebook per osservare i cambiamenti nel filesystem. Si consiglia vivamente di installarlo per prestazioni migliori. È opzionale

Il nodo viene fornito con npm, che consente di installare l'interfaccia della riga di comando React Native.

npm install -g react-native-cli

Se ricevi un errore di autorizzazione, prova con sudo:

sudo npm install -g react-native-cli.

Per iOS il modo più semplice per installare Xcode è tramite il Mac App Store. E per Android scarica e installa Android Studio.

Se hai intenzione di apportare modifiche al codice Java, ti consigliamo Gradle Daemon che velocizza la compilazione.

Test della tua installazione React Native

Utilizzare gli strumenti della riga di comando React Native per generare un nuovo progetto React Native denominato "AwesomeProject", quindi eseguire run-ios nativo react all'interno della cartella appena creata.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

Dovresti vedere la tua nuova app in esecuzione su iOS Simulator a breve. react-native run-ios è solo un modo per eseguire la tua app - puoi anche eseguirla direttamente da Xcode o Nuclide.

Modifica la tua app

Ora che hai eseguito correttamente l'app, cambialo.

• Apri index.ios.js o index.android.js nel tuo editor di testo di scelta e modifica alcune linee.
• Premi Command⌘ + R nel tuo iOS Simulator per ricaricare l'app e vedere le tue modifiche! Questo è tutto!

Congratulazioni! Hai eseguito e modificato correttamente la tua prima app React Native.

_{fonte: Introduzione - React-Native}

Installazione per Windows

Nota: non è possibile sviluppare app native native per iOS su Windows, solo app Android native native.

I documenti ufficiali di installazione per react-native su Windows possono essere trovati qui . Se hai bisogno di maggiori dettagli qui c'è una guida dettagliata .

Strumenti / Ambiente

• Windows 10
• strumento da riga di comando (es. Powershell o riga di comando di Windows)
• Chocolatey ( passaggi per l'installazione tramite PowerShell )
• The JDK (versione 8)
• Studio Android
• Una macchina Intel con tecnologia di virtualizzazione abilitata per HAXM (opzionale, necessaria solo se si desidera utilizzare un emulatore)

1) Configura la tua macchina per reagire allo sviluppo nativo

Avvia la riga di comando mentre un amministratore esegue i seguenti comandi:

choco install nodejs.install
choco install python2

Riavvia la riga di comando come amministratore in modo da poter eseguire npm

npm install -g react-native-cli

Dopo aver eseguito l'ultimo comando, copia la directory in cui è stato installato react-native. Ne avrai bisogno per il passaggio 4. Ho provato questo su due computer in un caso: C:\Program Files (x86)\Nodist\v-x64\6.2.2 . Nell'altro era: C:\Users\admin\AppData\Roaming\npm

2) Imposta le tue variabili d'ambiente

Una guida passo passo con le immagini può essere trovata qui per questa sezione.

Apri la finestra Variabili d'ambiente navigando su:

[Tasto destro] Menu "Start" -> Sistema -> Impostazioni di sistema avanzate -> Variabili d'ambiente

Nella sezione in basso trova la variabile di sistema "Path" e aggiungi la posizione a cui è stato eseguito il react-native al passaggio 1.

Se non hai aggiunto una variabile d'ambiente ANDROID_HOME, dovrai farlo anche qui. Mentre sei ancora nella finestra "Variabili d'ambiente", aggiungi una nuova variabile di sistema con il nome "ANDROID_HOME" e assegna valore al percorso del tuo sdk Android.

Quindi riavvia la riga di comando come amministratore in modo da poter eseguire comandi nativi reattivi.

3) Crea il tuo progetto Nella riga di comando, vai alla cartella in cui vuoi posizionare il tuo progetto ed esegui il seguente comando:

react-native init ProjectName

4) Esegui il tuo progetto Avvia un emulatore da Android Studio Naviga nella directory principale del tuo progetto in riga di comando ed eseguilo:

cd ProjectName
react-native run-android

Potresti incorrere in problemi di dipendenza. Ad esempio, potrebbe esserci un errore nel caso in cui non si disponga della versione corretta degli strumenti di compilazione. Per risolvere questo problema devi aprire il gestore sdk in Android Studio e scaricare da lì gli strumenti di compilazione.

Congratulazioni!

Per aggiornare l'interfaccia utente, puoi premere due volte il tasto r mentre ti trovi nell'emulatore e avviare l'app. Per vedere le opzioni dello sviluppatore puoi premere ctrl + m .

Installazione per Linux (Ubuntu)

1) Setup Node.JS

Avviare il terminale ed eseguire i seguenti comandi per installare nodeJS:

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

Se il comando nodo non è disponibile

sudo ln -s /usr/bin/nodejs /usr/bin/node

Alternative NodeJS instalations:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

o

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

controlla se hai la versione corrente

node -v 

Eseguire il npm per installare il react-native

sudo npm install -g react-native-cli

2) Installazione Java

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3) Impostazione Android Studio:

Android SDK o Android Studio

http://developer.android.com/sdk/index.html

Android SDK e ENV

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4) Emulatore di installazione:

Sul terminale eseguire il comando

android

Seleziona "Piattaforme SDK" all'interno di SDK Manager e dovresti vedere un segno di spunta blu accanto a "Android 7.0 (Nougat)". Nel caso in cui non lo fosse, fare clic sulla casella di controllo e quindi su "Applica".

5) Avvia un progetto

Esempio app init

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs: controlla sempre se la versione su android/app/build.gradle è la stessa di Build Tools scaricata sul tuo Android SDK

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...

6) Esegui il progetto

Apri Android AVD per configurare un android virtuale. Esegui la riga di comando:

android avd

Segui le istruzioni per creare un dispositivo virtuale e avviarlo

Aprire un altro terminale ed eseguire le righe di comando:

react-native run-android
react-native start