react-native Handledning
Komma igång med reaktiva

Anmärkningar

Inställning för Mac

Installera paketansvarig Homebrew brew

Klistra in det i en terminalprompt.

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

Installera Xcode IDE

Ladda ner den med länken nedan eller hitta den i Mac App Store

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

OBS: Om du har Xcode-beta.app installerat tillsammans med produktionsversionen av Xcode.app , se till att du använder produktionsversionen av xcodebuild verktyget. Du kan ställa in det med:

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

Installera Android-miljö

• Git git

  * Om du har installerat XCode är Git redan installerat, annars kör följande

  brew install git 
  

• Senaste JDK

• Android Studio

  Välj en anpassad installation

  

  Välj både prestanda och virtuell Android-enhet

  

  Efter installationen väljer du Konfigurera -> SDK Manager i välkomstfönstret för Android Studio.

  

  I fönstret SDK-plattformar väljer du Visa paketdetaljer och under Android 6.0 (Marshmallow), se till att Google API: er, Intel x86 Atom-systembild, Intel x86 Atom_64 systembild och Google API: er Intel x86 Atom_64 systembild.

  

  I fönstret SDK Tools väljer du Visa paketdetaljer och under Android SDK Build Tools, se till att Android SDK Build-Tools 23.0.1 är valt.

  

• ANDROID_HOME

  Se till att ANDROID_HOME-miljövariabeln pekar på din befintliga Android SDK. För att göra det, lägg till detta till din ~ / .bashrc, ~ / .bash_profile (eller vad ditt skal använder) och öppna din terminal igen:

  Om du installerade SDK utan Android Studio kan det vara något som: / usr / local / opt / android-sdk

  export ANDROID_HOME=~/Library/Android/sdk
  

Beroenden för Mac

Du behöver Xcode för iOS och Android Studio för android, node.js, kommandoradsverktygen React Native och Watchman.

Vi rekommenderar att du installerar nod och vaktmästare via Homebrew.

brew install node
brew install watchman

Watchman är ett verktyg från Facebook för att titta på förändringar i filsystemet. Det rekommenderas starkt att du installerar det för bättre prestanda. Det är valfritt.

Noden kommer med npm, som låter dig installera kommandoradgränssnittet React Native.

npm install -g react-native-cli

Om du får ett tillåtelsefel kan du prova med sudo:

sudo npm install -g react-native-cli.

För iOS är det enklaste sättet att installera Xcode via Mac App Store. Och för Android ladda ner och installera Android Studio.

Om du planerar att göra ändringar i Java-koden rekommenderar vi Gradle Daemon som påskyndar byggandet.

Testa din React Native Installation

Använd kommandoradsverktygen React Native för att generera ett nytt React Native-projekt som heter "AwesomeProject" och kör sedan rea-native run-ios i den nyligen skapade mappen.

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

Du bör se din nya app köra i iOS Simulator inom kort. react-native run-ios är bara ett sätt att köra din app - du kan också köra den direkt från Xcode eller Nuclide.

Ändra din app

Nu när du har kört appen, låt oss ändra den.

• Öppna index.ios.js eller index.android.js i ditt val av textredigerare och redigera några rader.
• Slå på Command⌘ + R i din iOS-simulator för att ladda om appen och se din förändring! Det är allt!

Grattis! Du har framgångsrikt kört och modifierat din första React Native-app.

_{källa: Komma igång - React-Native}

Inställning för Windows

Obs! Du kan inte utveckla reaktiva appar för iOS på Windows, bara reaktiva Android-appar.

De officiella installationsdokumenten för react-native på windows kan hittas här . Om du behöver mer information finns det en detaljerad guide här .

Verktyg / Miljö

• Windows 10
• kommandoradsverktyg (t.ex. Powershell eller windows kommandorad)
• Chocolatey ( steg för installation via PowerShell )
• JDK (version 8)
• Android Studio
• En Intel-maskin med virtualiseringsteknologi aktiverad för HAXM (valfritt, behövs endast om du vill använda en emulator)

1) Ställ in din maskin för att utveckla reagera

Starta kommandoraden som en administratör kör följande kommandon:

choco install nodejs.install
choco install python2

Starta om kommandoraden som administratör så att du kan köra npm

npm install -g react-native-cli

Efter att ha kört det sista kommandot kopierade katalogen som react-native installerades i. Du kommer att behöva detta för steg 4. Jag försökte detta på två datorer i ett fall det var: C:\Program Files (x86)\Nodist\v-x64\6.2.2 . I det andra var det: C:\Users\admin\AppData\Roaming\npm

2) Ställ in dina miljövariabler

En steg för steg-guide med bilder kan hittas här för det här avsnittet.

Öppna fönstret Miljövariabler genom att navigera till:

[Högerklicka] -menyn "Start" -> System -> Avancerade systeminställningar -> Miljövariabler

I det nedre avsnittet hittar du "Path" -systemvariabeln och lägger till den plats som reaktiva har installerats i steg 1.

Om du inte har lagt till en ANDROID_HOME-miljövariabel måste du göra det här också. Medan du fortfarande finns i fönstret "Miljövariabler" lägger du till en ny systemvariabel med namnet "ANDROID_HOME" och värde som sökvägen till din Android sdk.

Starta sedan om kommandoraden som admin så att du kan köra reaktiva kommandon i den.

3) Skapa ditt projekt I kommandoraden navigerar du till mappen du vill placera ditt projekt och kör följande kommando:

react-native init ProjectName

4) Kör ditt projekt Starta en emulator från Android Studio Navigera till projektets rotkatalog i kommandoraden och kör det:

cd ProjectName
react-native run-android

Du kan stöta på beroendesproblem. Till exempel kan det finnas ett fel att du inte har rätt version av build-verktyg. För att åtgärda detta måste du öppna sdk-hanteraren i Android Studio och ladda ner byggverktygen därifrån.

grattis!

För att uppdatera ui kan du trycka på r knappen två gånger i emulatorn och köra appen. För att se utvecklaralternativ kan du trycka på ctrl + m .

Inställning för Linux (Ubuntu)

1) Setup Node.JS

Starta terminalen och kör följande kommandon för att installera nodeJS:

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

sudo apt-get install nodejs

Om nodkommandot inte är tillgängligt

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

Alternativ NodeJS-installationer:

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

eller

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

kolla om du har den aktuella versionen

node -v 

Kör npm för att installera den reaktiva

sudo npm install -g react-native-cli

2) Installera Java

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

3) Installera Android Studio:

Android SDK eller 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) Inställningsemulator:

Kör kommandot på terminalen

android

Välj "SDK-plattformar" från SDK-hanteraren så ser du ett blått bock bredvid "Android 7.0 (Nougat)". Om det inte är det, klicka på kryssrutan och sedan på "Apply".

5) Starta ett projekt

Exempel på app init

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs: Kontrollera alltid om versionen på android/app/build.gradle är densamma som Build Tools nedladdade på din Android SDK

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

6) Kör projektet

Öppna Android AVD för att ställa in en virtuell Android. Kör kommandoraden:

android avd

Följ instruktionerna för att skapa en virtuell enhet och starta den

Öppna en annan terminal och kör kommandoraderna:

react-native run-android
react-native start