react-native Zelfstudie
Aan de slag met react-native

Opmerkingen

Installatie voor Mac

Pakketmanager installeren Homebrew brew

Plak dat achter een Terminal-prompt.

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

Xcode IDE installeren

Download het via onderstaande link of vind het in de Mac App Store

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

OPMERKING: Als u Xcode-beta.app hebt geïnstalleerd samen met de productieversie van Xcode.app , zorg er dan voor dat u de productieversie van xcodebuild tool gebruikt. U kunt het instellen met:

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

Android-omgeving installeren

• Git git

  * Als je XCode hebt geïnstalleerd, is Git al geïnstalleerd, voer anders het volgende uit

  brew install git 
  

• Nieuwste JDK

• Android Studio

  Kies een aangepaste installatie

  

  Kies zowel Performance als Android Virtual Device

  

  Kies na installatie Configureren -> SDK Manager in het welkomstvenster van Android Studio.

  

  Kies in het venster SDK-platforms Pakketdetails tonen en controleer onder Android 6.0 (Marshmallow) of Google API's, Intel x86 Atom-systeemafbeelding, Intel x86 Atom_64-systeemafbeelding en Google API's Intel x86 Atom_64-systeemafbeelding zijn aangevinkt.

  

  Kies in het venster SDK-tools Pakketdetails tonen en zorg ervoor dat onder Android SDK Build-tools Android SDK Build-Tools 23.0.1 is geselecteerd.

  

• Omgevingsvariabele ANDROID_HOME

  Zorg ervoor dat de omgevingsvariabele punten van ANDROID_HOME naar uw bestaande Android SDK verwijzen. Om dit te doen, voeg je dit toe aan je ~ / .bashrc, ~ / .bash_profile (of wat je shell ook gebruikt) en open je terminal opnieuw:

  Als u de SDK zonder Android Studio hebt geïnstalleerd, kan dit iets zijn als: / usr / local / opt / android-sdk

  export ANDROID_HOME=~/Library/Android/sdk
  

Afhankelijkheden voor Mac

Je hebt Xcode voor iOS en Android Studio voor Android, node.js, de React Native opdrachtregelprogramma's en Watchman nodig.

We raden aan om knooppunt en watchman te installeren via Homebrew.

brew install node
brew install watchman

Watchman is een hulpmiddel van Facebook voor het bekijken van veranderingen in het bestandssysteem. Het wordt ten zeerste aanbevolen om het te installeren voor betere prestaties. Het is optioneel.

Node wordt geleverd met npm, waarmee u de React Native opdrachtregelinterface kunt installeren.

npm install -g react-native-cli

Als u een toestemmingsfout krijgt, probeer dan met sudo:

sudo npm install -g react-native-cli.

Voor iOS is de eenvoudigste manier om Xcode te installeren via de Mac App Store. En voor Android downloaden en installeren van Android Studio.

Als u van plan bent om wijzigingen in de Java-code aan te brengen, raden we Gradle Daemon aan die de build versnelt.

Testen van uw React native installatie

Gebruik de opdrachtregelhulpmiddelen van React Native om een nieuw React Native-project te genereren met de naam "AwesomeProject" en voer vervolgens react-native run-ios uit in de nieuw gemaakte map.

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

U zou uw nieuwe app binnenkort in iOS Simulator moeten zien draaien. react-native run-ios is slechts één manier om uw app uit te voeren - u kunt het ook rechtstreeks vanuit Xcode of Nuclide uitvoeren.

Uw app aanpassen

Nu u de app met succes hebt uitgevoerd, laten we deze wijzigen.

• Open index.ios.js of index.android.js in uw gewenste teksteditor en bewerk enkele regels.
• Druk op Command⌘ + R in je iOS-simulator om de app opnieuw te laden en je verandering te zien! Dat is het!

Gefeliciteerd! U hebt uw eerste React Native-app met succes uitgevoerd en aangepast.

_{bron: Aan de slag - React-Native}

Setup voor Windows

Opmerking: je kunt geen react-native apps voor iOS op Windows ontwikkelen, alleen react-native Android-apps.

De officiële installatiedocumenten voor react-native op Windows zijn hier te vinden . Als u meer informatie nodig hebt, vindt u hier een gedetailleerde handleiding .

Gereedschap / Milieu

• Windows 10
• opdrachtregelprogramma (bijvoorbeeld Powershell of Windows-opdrachtregel)
• Chocolatey ( stappen om in te stellen via PowerShell )
• The JDK (versie 8)
• Android Studio
• Een Intel-machine met virtualisatietechnologie ingeschakeld voor HAXM (optioneel, alleen nodig als u een emulator wilt gebruiken)

1) Stel uw machine in op reactie native ontwikkeling

Start de opdrachtregel terwijl een beheerder de volgende opdrachten uitvoert:

choco install nodejs.install
choco install python2

Start de opdrachtregel opnieuw op als beheerder, zodat u npm kunt uitvoeren

npm install -g react-native-cli

Na het uitvoeren van de laatste opdracht kopieert u de directory waarin react-native is geïnstalleerd. U hebt dit nodig voor stap 4. Ik heb dit op twee computers geprobeerd in één geval: C:\Program Files (x86)\Nodist\v-x64\6.2.2 . In de andere was het: C:\Users\admin\AppData\Roaming\npm

2) Stel uw omgevingsvariabelen in

Een stapsgewijze handleiding met afbeeldingen vindt u hier voor deze sectie.

Open het venster Omgevingsvariabelen door te navigeren naar:

[Klik met de rechtermuisknop] Menu "Start" -> Systeem -> Geavanceerde systeeminstellingen -> Omgevingsvariabelen

Zoek in het onderste gedeelte de systeemvariabele "Path" en voeg de locatie toe waarop react-native in stap 1 is geïnstalleerd.

Als u geen omgevingsvariabele ANDROID_HOME hebt toegevoegd, moet u dat hier ook doen. Terwijl je nog in het venster "Omgevingsvariabelen" bent, voeg je een nieuwe systeemvariabele toe met de naam "ANDROID_HOME" en waarde als het pad naar je android sdk.

Start de opdrachtregel vervolgens opnieuw op als een beheerder, zodat u react-native opdrachten erin kunt uitvoeren.

3) Maak uw project Navigeer op de opdrachtregel naar de map waarin u uw project wilt plaatsen en voer de volgende opdracht uit:

react-native init ProjectName

4) Voer uw project uit Start een emulator vanuit Android Studio Navigeer naar de hoofdmap van uw project op de opdrachtregel en voer het uit:

cd ProjectName
react-native run-android

U kunt afhankelijkheden ondervinden. Er kan bijvoorbeeld een fout zijn dat u niet de juiste versie van de build-tools heeft. Om dit op te lossen, moet u de SDK-manager in Android Studio openen en de build-tools van daar downloaden.

Proficiat!

Om de ui te vernieuwen, kunt u tweemaal op de toets r drukken terwijl u in de emulator bent en de app uitvoert. Om ontwikkelaaropties te bekijken, drukt u op ctrl + m .

Setup voor Linux (Ubuntu)

1) Setup Node.JS

Start de terminal en voer de volgende opdrachten uit om nodeJS te installeren:

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

sudo apt-get install nodejs

Als knooppuntopdracht niet beschikbaar is

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

Alternatieve NodeJS-installaties:

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

of

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

controleer of je de huidige versie hebt

node -v 

Voer de npm uit om de react-native te installeren

sudo npm install -g react-native-cli

2) Java instellen

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

3) Android Studio instellen:

Android SDK of 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) Setup-emulator:

Voer op de terminal het commando uit

android

Selecteer "SDK Platforms" vanuit SDK Manager en je zou een blauw vinkje moeten zien naast "Android 7.0 (Nougat)". Als dit niet het geval is, klikt u op het selectievakje en vervolgens op "Toepassen".

5) Start een project

Voorbeeld app init

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs: Controleer altijd of de versie op android/app/build.gradle dezelfde is als de Build Tools gedownload op je Android SDK

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

6) Voer het project uit

Open Android AVD om een virtuele Android in te stellen. Voer de opdrachtregel uit:

android avd

Volg de instructies om een virtueel apparaat te maken en te starten

Open een andere terminal en voer de opdrachtregels uit:

react-native run-android
react-native start