React Native in macOS einrichten

von

Für die Einrichtung von React Native auf einem macOS-System wird Homebrew benötigt. Sobald oder sofern dieser Paketmanager installiert ist, gebt Ihr die beiden folgenden Anweisungen im Terminal ein:

$ brew install node
$ brew install watchman

Damit steht der npm (Node Package Manager) zur Verfügung, mit dem nun React Native installiert werden kann:

$ npm install -g react-native-cli

An diesen Installationsschritten mag sich von Zeit zu Zeit etwas ändern. Werft deswegen ggf. einen Blick in Facebooks Online-Dokumentation.

Android

Für die Android-Entwicklung ist Android Studio erforderlich. Nach der Installation dieser Anwendung findet Ihr im Verzeichnis

/Users/[Benutzername]/Library/Android/sdk

das Andoid-SDK.

Im Startfenster von Android Studio befindet sich unten rechts die Option „Configure“. Nach einem Klick darauf kann aus dem Kontext-Menü der SDK Manager geöffnet werden. Wählt unter „SDK Platforms“ die für Euch relevanten Android-Versionen aus.

Android SDK Manager

Sobald in Android Studio ein neues Projekt angelegt wurde, kann über

> Tools > Android

der Android Virtual Device (AVD) Manager gestartet und anschließend über „Create“ ein neues virtuelles Gerät hinzugefügt werden. Alternativ zu dieser Vorgehensweise kann man mit

$ cd /Users/[Benutzername]/Library/Android/sdk/tools

in das Verzeichnis tools wechseln und mit

./android avd

den Android Virtual Device (AVD) Manager separat starten.

Android Virtual Device Manager

Die Vorbereitungen sind nun abgeschlossen, so dass es an der Zeit ist, ein erstes Projekt anzulegen:

$ react-native init ErstesProjekt

Startet anschließend den Emulator mit dem von Euch eingerichtetem Gerät:

  1. Dafür öffnet Ihr entweder ein Projekt in Android Studio und wählt dann im Menü unter > Tools > Android den AVD Manager aus oder
  2. Ihr wechselt wieder in das Verzeichnis 
    cd /Users/[Benutzername]/Library/Android/sdk/tools

    und gebt dann die Anweisung

    ./emulator @Nexus_6

    ein. Auf meinem Mac habe ich für mein Gerät die Bezeichnung „Nexus_6“ vergeben. Ihr müsst hier freilich den von Euch im AVD Manager gewählten Namen angeben.

Wechselt schließlich in das Verzeichnis „ErstesProjekt“ und startet das Projekt mit

$ react-native run-android

Falls Ihr eine Fehlermeldung dergestalt erhalten solltet, dass die passenden Build-Tools nicht gefunden werden können, stellt im Android SDK Manager unter „SDK Tools“ sicher, dass die entsprechenden Tools tatsächlich installiert sind.

iOS

Installiert die aktuellste Version von Xcode aus Apples App Store. Nach der Installation solltet Ihr Xcode zudem auch einmal starten, damit alle notwendigen Ordner und Konfigurationsdateien erzeugt werden. Anschließend kann Xcode wieder beendet werden.

Legt dann ein neues Projekt an, wechselt in das Projekt-Verzeichnis und startet das Projekt:

$ react-native init ErstesProjekt
$ cd ErstesProjekt
$ react-native run-ios

Dadurch wird automatisch der iOS-Simulator mit dem noch leeren Projekt gestartet.