react-native Tutorial
Erste Schritte mit Reactor-Native

Bemerkungen

Setup für Mac

Paketmanager installieren Homebrew brew

Fügen Sie das an einer Terminal-Eingabeaufforderung ein.

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

Xcode IDE installieren

Laden Sie es über den Link unten herunter oder finden Sie es im Mac App Store

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

HINWEIS: Wenn Sie Xcode-beta.app mit Produktionsversion von Xcode.app installiert zusammen, stellen Sie sicher , dass Sie Produktionsversion verwenden xcodebuild Tool. Sie können es einstellen mit:

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

Android-Umgebung installieren

• Git git

  * Wenn Sie XCode installiert haben, ist Git bereits installiert. Andernfalls führen Sie Folgendes aus

  brew install git 
  

• Neueste JDK

• Android Studio

  Wählen Sie eine benutzerdefinierte Installation

  

  Wählen Sie sowohl Leistung als auch virtuelles Android-Gerät

  

  Wählen Sie nach der Installation im Begrüßungsfenster von Android Studio die Option Konfigurieren -> SDK-Manager.

  

  Wählen Sie im Fenster SDK-Plattformen die Option Paketdetails anzeigen aus, und stellen Sie unter Android 6.0 (Marshmallow) sicher, dass Google APIs, Intel x86-Atom-Image, Intel x86-Atom_64-Systemabbild und Google-APIs - Intel x86-Atom_64-Systemabbild aktiviert sind.

  

  Wählen Sie im Fenster SDK-Tools die Option Paketdetails anzeigen aus, und stellen Sie unter Android SDK Build Tools sicher, dass Android SDK Build-Tools 23.0.1 ausgewählt ist.

  

• Umgebungsvariable ANDROID_HOME

  Stellen Sie sicher, dass die Umgebungsvariable ANDROID_HOME auf Ihr vorhandenes Android-SDK verweist. Fügen Sie dies Ihrem ~ / .bashrc, ~ / .bash_profile (oder was auch immer Ihre Shell verwendet) hinzu und öffnen Sie Ihr Terminal erneut:

  Wenn Sie das SDK ohne Android Studio installiert haben, kann es sich um Folgendes handeln: / usr / local / opt / android-sdk

  export ANDROID_HOME=~/Library/Android/sdk
  

Abhängigkeiten für Mac

Sie benötigen Xcode für iOS und Android Studio für Android, node.js, die Befehlszeilentools React Native und Watchman.

Wir empfehlen, Node und Watchman über Homebrew zu installieren.

brew install node
brew install watchman

Watchman ist ein Tool von Facebook, um Änderungen im Dateisystem zu überwachen. Es wird dringend empfohlen, es für eine bessere Leistung zu installieren. Es ist optional.

Node wird mit npm geliefert, sodass Sie die React Native-Befehlszeilenschnittstelle installieren können.

npm install -g react-native-cli

Wenn Sie einen Berechtigungsfehler erhalten, versuchen Sie es mit sudo:

sudo npm install -g react-native-cli.

Für iOS ist die Installation von Xcode am einfachsten über den Mac App Store. Und für Android herunterladen und installieren Sie Android Studio.

Wenn Sie Änderungen am Java-Code vornehmen möchten, empfehlen wir den Gradle-Daemon, der die Erstellung beschleunigt.

Testen Sie Ihre native React-Installation

Verwenden Sie die React Native-Befehlszeilentools, um ein neues React Native-Projekt mit dem Namen "AwesomeProject" zu generieren. Führen Sie anschließend reaktative Run-ios im neu erstellten Ordner aus.

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

In Kürze sollte Ihre neue App im iOS-Simulator ausgeführt werden. reaktives Run-Ios ist nur eine Möglichkeit, Ihre App auszuführen - Sie können sie auch direkt in Xcode oder Nuclide ausführen.

Ändern Sie Ihre App

Nachdem Sie die App erfolgreich ausgeführt haben, ändern Sie sie jetzt.

• Öffnen Sie index.ios.js oder index.android.js in Ihrem gewünschten Texteditor und bearbeiten Sie einige Zeilen.
• Klicken Sie in Ihrem iOS-Simulator auf Command⌘ + R, um die App neu zu laden und Ihre Änderungen zu sehen! Das ist es!

Herzliche Glückwünsche! Sie haben Ihre erste React Native-App erfolgreich ausgeführt und geändert.

_{source: Erste Schritte - React-Native}

Setup für Windows

Hinweis: Sie können nicht reaktionsfähige Apps für iOS unter Windows entwickeln, sondern nur reaktionsfähige Android-Apps.

Die offiziellen Installationsdokumente für Reactive-Native unter Windows finden Sie hier . Wenn Sie weitere Informationen benötigen, finden Sie hier eine detaillierte Anleitung .

Tools / Umgebung

• Windows 10
• Kommandozeilenwerkzeug (zB Powershell oder Windows Kommandozeile)
• Chocolatey ( Schritte zum Einrichten über PowerShell )
• Das JDK (Version 8)
• Android Studio
• Eine Intel-Maschine mit aktivierter Virtualisierungstechnologie für HAXM (optional, nur erforderlich, wenn Sie einen Emulator verwenden möchten)

1) Richten Sie Ihren Rechner für die native Entwicklung ein

Starten Sie die Befehlszeile, wenn ein Administrator die folgenden Befehle ausführt:

choco install nodejs.install
choco install python2

Starten Sie die Befehlszeile als Administrator neu, damit Sie npm ausführen können

npm install -g react-native-cli

Nachdem Sie den letzten Befehl ausgeführt haben, kopieren Sie das Verzeichnis, in dem Reactive-Native installiert ist. Sie benötigen dies für Schritt 4. Ich habe dies auf zwei Computern in einem Fall versucht: C:\Program Files (x86)\Nodist\v-x64\6.2.2 . Im anderen war es: C:\Users\admin\AppData\Roaming\npm

2) Stellen Sie Ihre Umgebungsvariablen ein

Eine Schritt-für-Schritt-Anleitung mit Bildern finden Sie hier für diesen Abschnitt.

Öffnen Sie das Fenster "Umgebungsvariablen", indem Sie zu folgenden Seiten navigieren:

[Rechtsklick] Menü "Start" -> System -> Erweiterte Systemeinstellungen -> Umgebungsvariablen

Suchen Sie im unteren Abschnitt die Systemvariable "Path" und fügen Sie den Speicherort hinzu, an dem reaktives System in Schritt 1 installiert wurde.

Wenn Sie keine ANDROID_HOME-Umgebungsvariable hinzugefügt haben, müssen Sie dies auch hier tun. Fügen Sie im Fenster "Umgebungsvariablen" eine neue Systemvariable mit dem Namen "ANDROID_HOME" und einem Wert als Pfad zu Ihrem Android-SDK hinzu.

Starten Sie dann die Befehlszeile als Administrator neu, damit Sie darin reaktive Befehle ausführen können.

3) Erstellen Sie Ihr Projekt . Navigieren Sie in der Befehlszeile zu dem Ordner, in dem Sie Ihr Projekt platzieren möchten, und führen Sie den folgenden Befehl aus:

react-native init ProjectName

4) Führen Sie Ihr Projekt aus Starten Sie einen Emulator in Android Studio Navigieren Sie in der Befehlszeile zum Stammverzeichnis Ihres Projekts und führen Sie es aus:

cd ProjectName
react-native run-android

Sie können auf Abhängigkeitsprobleme stoßen. Es kann beispielsweise ein Fehler auftreten, dass Sie nicht über die richtige Version der Build-Tools verfügen. Um dies zu beheben, müssen Sie den SDK-Manager in Android Studio öffnen und die Build-Tools von dort herunterladen.

Glückwunsch!

Um die Benutzeroberfläche zu aktualisieren, können Sie die r Taste zweimal drücken, während Sie sich im Emulator befinden und die App ausführen. Um die Entwickleroptionen ctrl + m drücken Sie ctrl + m .

Setup für Linux (Ubuntu)

1) Setup Node.JS

Starten Sie das Terminal und führen Sie die folgenden Befehle aus, um nodeJS zu installieren:

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

sudo apt-get install nodejs

Wenn knotenbefehl nicht verfügbar ist

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

Alternativen NodeJS-Installationen:

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

oder

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

Prüfen Sie, ob Sie die aktuelle Version haben

node -v 

Führen Sie das npm aus, um den Reaktiver zu installieren

sudo npm install -g react-native-cli

2) Java einrichten

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

3) Android Studio einrichten:

Android SDK oder Android Studio

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

Android SDK und ENV

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

4) Setup-Emulator:

Führen Sie auf dem Terminal den Befehl aus

android

Wählen Sie im SDK-Manager "SDK-Plattformen" aus und Sie sollten ein blaues Häkchen neben "Android 7.0 (Nougat)" sehen. Ist dies nicht der Fall, klicken Sie auf das Kontrollkästchen und anschließend auf "Übernehmen".

5) Starten Sie ein Projekt

Beispiel app init

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs: Prüfen Sie immer, ob die Version unter android/app/build.gradle mit den Build-Tools Ihres Android-SDK android/app/build.gradle

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

6) Führen Sie das Projekt aus

Öffnen Sie Android AVD, um ein virtuelles Android einzurichten. Führen Sie die Befehlszeile aus:

android avd

Folgen Sie den Anweisungen, um ein virtuelles Gerät zu erstellen und zu starten

Öffnen Sie ein anderes Terminal und führen Sie die Befehlszeilen aus:

react-native run-android
react-native start