React Native: Entwicklungsumgebung einrichten

---

• Home
• IT
• Programmierung
• JavaScript
• React Native
• Entwicklungsumgebung einrichten

---

Diese Installationsanleitung bezieht sich auf Kubuntu 18.04 LTE. Abweichungen auf Windows und MacOS werden hier nicht erläutert. Die Informationen können aber der React Native Getting Started Webseite unter React Native CLI Quickstart entnommen werden.

Was wird benötigt?

Ein schneller Rechner mit mindestens einem Dual Core Prozessor ab 2,7 GHz, 4 GB RAM (8 GB bei Nutzung von AVD) und 20 GB freiem Festplattenspeicherplatz. Je größer und höher, desto besser. Außerdem soll der Prozessor für die reibungslose Arbeit mit dem Emulator die Virtualisierung-Erweiterung  (Intel VT-x oder AMD-V) unterstützen. Diese soll auch im BIOS aktiviert sein. Intel Prozessoren sollen zusätzlich die Intel EM64T (Intel 64) Funktionen unterstützen und das Execute Disable (XD) Bit aktiviert haben. Die Überprüfen der Virtualisierungsunterstützung:

$ egrep -c '(vmx|svm)' /proc/cpuinfo

Wird eine 0 ausgegeben, ist die Unterstützung nicht vorhanden.

Sollte es nicht möglich sein, den Emulator zu installieren oder aus anderen Gründen nicht zu nutzen, benötigt man ein Android-Smartphone um die entwickelten Apps zu testen.

Die Entwicklungsumgebung für React Native erfordert einige Installations- und Konfigurationsprozeduren. Die benötigte Software sind:

• Node.js ab Version 10.x
• Java 8 JDK
• Android Studio (Android SDK, Android SDK Platform, Android Virtual Device)
• ein Editor wie z.B. Visual Studio Code
• KVM (Kernel-based Virtual Machine)
• (optional) Git für die Versionsverwaltung

Installation

Die verwendeten Software stehen alle frei und kostenlos zur Verfügung.

Node.js

React Native benötigt Node.js, eine JavaScript-Laufzeitumgebung, die auch den Node Package Manager (NPM) und Node Package Execute (NPX) enthält. Beide Tools werden zum Erstellen und Ausführen von Projekten eingesetzt. Die Voraussetzung ist Node.js ab der Version 10.x.

Installieren

Die neuste Version kann von der Webseite https://nodejs.org/de/ heruntergeladen werden.

Die Archivdatei entpacken nach /usr/local/lib/nodejs. Die Variablen VERSION und DISTRO entsprechend dem Archivdateinamen eingeben.

$ VERSION=v12.13.0
$ DISTRO=linux-x64
$ sudo mkdir -p /usr/local/lib/nodejs
$ sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs

Das Skript ~/.profile öffnen.

$ gedit ~/.profile

Die Umgebungsvariable durch das Einfügen der folgenden Zeilen am Ende der Datei setzen. Die korrekten VERSION und DISTRO Variablen-Werte eingeben (siehe Node.js-Ordnername in /usr/local/lib/nodejs).

# Nodejs
VERSION=v12.13.0
DISTRO=linux-x64
export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH

Profil aktualisieren damit die Umgebungsvariable $PATH neu eingelesen wird.

$ . ~/.profile

Die Installation prüfen

Node.js Version:

$ node -v

NPM Version:

$ npm version

NPX Version:

$ npx -v

create-react-app installieren. Es wird benötigt um Rect-Projekte anzulegen.

$ npm install -g create-react-app

Java 8 JDK

Java Development Kit 8 wird von dem Build-Management-Automatisierungs-Tool Gradle zum Erstellen von Android-Apps (APK) benötigt.

Installieren

Alle Pakete hinter openjdk-8-jdk sind optional.

$ sudo apt-get install openjdk-8-jdk openjdk-8-demo openjdk-8-doc openjdk-8-jre-headless openjdk-8-source

Sind auf dem Betriebssystem mehrere Java Versionen installiert, muss Java 8 als Standard gesetzt werden.

Standard Java JRE Version setzen

$ sudo update-alternatives --config java

Die Ausgabe könnte so aussehen:

Es gibt 2 Auswahlmöglichkeiten für die Alternative java (welche /usr/bin/java bereitstellen).

Auswahl Pfad Priorität Status
------------------------------------------------------------
*0 /usr/lib/jvm/java-11-openjdk-amd64/bin/java 1111 automatischer Modus
 1 /usr/lib/jvm/java-11-openjdk-amd64/bin/java 1111 manueller Modus
 2 /usr/lib/jvm/java-8-openjdk-amd64/jre/bin/java 1081 manueller Modus
Drücken Sie die Eingabetaste, um die aktuelle Wahl[*] beizubehalten,
oder geben Sie die Auswahlnummer ein:

Der Stern markiert die benutzte Standard-Java-Version. In diesem Fall die 2 eingeben und mit ENTER bestätigen.

Die Java Standard-Version überprüfen:

$ java -version
openjdk version "1.8.0_222"
OpenJDK Runtime Environment (build 1.8.0_222-8u222-b10-1ubuntu1~18.04.1-b10)
OpenJDK 64-Bit Server VM (build 25.222-b10, mixed mode)

Standard Java JDK setzen

$ sudo update-alternatives --config javac

Die Ausgabe könnte so aussehen:

Es gibt 2 Auswahlmöglichkeiten für die Alternative javac (welche /usr/bin/javac bereitstellen).
Auswahl Pfad Priorität Status
------------------------------------------------------------
*0 /usr/lib/jvm/java-11-openjdk-amd64/bin/javac 1111 automatischer Modus
 1 /usr/lib/jvm/java-11-openjdk-amd64/bin/javac 1111 manueller Modus
 2 /usr/lib/jvm/java-8-openjdk-amd64/bin/javac 1081 manueller Modus
Drücken Sie die Eingabetaste, um die aktuelle Wahl[*] beizubehalten,
oder geben Sie die Auswahlnummer ein:

Der Stern markiert die benutzte Standard-Java-Compiler-Version. In diesem Fall die 2 eingeben und mit ENTER bestätigen.

Die Java Compiler Standard-Version überprüfen:

$ javac -version
javac 1.8.0_222

Umgebungsvariable setzen

In der Datei ~/.bashrc wird die Variable JAVA_HOME gesetzt.

Datei öffnen:

$ gedit ~/.bashrc

Am Ende der Datei hinzufügen:

export JAVA_HOME="/usr/lib/jvm/java-8-openjdk-amd64"

---

---

Android Studio

Android Studio wird benötigt um die Android SDKs und Android Virtual Devices (Emulatoren) zu verwalten.

Android Studio herunterladen

Die Archivdatei nach /opt entpacken:

$ sudo tar xvzf android-studio-ide-191.6010548-linux.tar.gz -C /opt

Den Besitzer ändern:

$ sudo chown -R $USER:$USER /opt/android-studio

Anwendungs-Starter-Verknüpfung erstellen

Damit Android Studio bequem aus dem Anwendungs-Starter-Menü aufgerufen werden kann, wird eine .desktop-Datei angelegt.

$ sudo gedit ~/.local/share/applications/android-studio.desktop

In die Datei einfügen und speichern:

[Desktop Entry]
Comment=Includes Android Development Tools
Exec=/opt/android-studio/bin/studio.sh
GenericName=Android Studio, SDK Manager, AVD
Icon=/opt/android-studio/bin/studio.png
Name=Android Studio
NoDisplay=false
OnlyShowIn=KDE;
Path[$e]=
StartupNotify=false
Terminal=0
Categories=Development;
TerminalOptions=
Type=Application
X-KDE-SubstituteUID=false
X-KDE-Username=

Android SDK einrichten

Android Studio starten über Anwendungs-Starter → Anwendungen → Entwicklung → Android Studio.

Auf dem Welcome-Screen unten rechts Configure und Check for Updates wählen um Android Studio auf Aktualisierungen zu prüfen.

Android SDK Manager öffnen über Android Studio Welcome Screen → Configure → SDK Manager.

Unter Android Platforms das Häckchen unten rechts bei Show Package Details setzen und das Software Development Kit für Android 9.0 (Pie) mit Android SDK Platform 28,  Google Play Intel x86 Atom System Image und Intel x86 Atom_64 System Image installieren.

Auf dem Reiter SDK Tools die Checkbox unten rechts bie Show Package Details aktivieren und unter Android SDK Build-Tools die Version 28.0.3 installieren.

Alles mit OK bestätigen und den Android Studio Welcome Screen schließen.

Umgebungsvariablen setzen

Die ~/.bashrc-Datei öffnen:

$ gedit ~/.bashrc

Am Ende der Datei hinzufügen (ANDROID_HOME und ANDROID_SDK_ROOT Installationspfad anpassen!):

# Android SDK
export ANDROID_HOME="/usr/local/lib/android-sdk-linux"
export ANDROID_SDK_ROOT="/usr/local/lib/android-sdk-linux"
export PATH="${PATH}:${ANDROID_HOME}/emulator:${ANDROID_HOME}/tools:${ANDROID_HOME}/tools/bin:${ANDROID_HOME}/platform-tools"

Die Datei speichern und Systemvariablen aktualisieren:

$ . ~/.bashrc

Visual Studio Code

Visual Studio Code (kurz VS Code) ist ein freier Quelltext-Editor von Microsoft. Visual Studio Code ist plattformübergreifend für die Betriebssysteme Windows, macOS und Linux verfügbar. Der Editor basiert auf dem Framework Electron und ermöglicht u.a. Syntaxhervorhebung, Code-Faltung, Debugging, Autovervollständigung und Versionsverwaltung.

Installstion

VS Code kann auf zweifacher Weise installiert werden.

Variante 1 – Download:

Visual Studio Code hier herunterladen

Die heruntergeladene Installationsdatei ausführen:

$ cd ~/Downloads
$ chmod +x code_1.40.2-1574694120_amd64.deb
$ sudo dpkg -i code_1.40.2-1574694120_amd64.deb

Variante 2 – Snap Store:

Auf der Webseite https://snapcraft.io/code auf Install klicken.

Extras

Zu dem Editor gibt es auch ein kostenloses PDF-Buch Visual Studio Code Tipps & Tricks Vol. 1 in Englisch und Deutsch.

KVM

KVM (Kernel-based Virtual Machine) ist eine vollständige Virtualisierungssoftware die es erlaubt, komplette System Images, wie Windows oder eben Android in einer Virtuellen Maschine laufen zu lassen. Voraussetzung ist die Unterstützung der Virtualisierung-Erweiterung Intel VT oder AMD-V.

Installation überprüfen

Ob der Prozessor KVM unterstützt liefert der cpu-checker die nötigen Informationen. Falls nicht installiert:

$ sudo apt-get install cpu-checker

KVM-Unterstütztung prüfen:

$ kvm-ok

Ausgabe wenn KVM unterstützt und aktiviert:

INFO: Your CPU supports KVM extensions
INFO: /dev/kvm exists
KVM acceleration can be used

Ausgabe wenn unterstützt aber deaktiviert:

INFO: KVM is disabled by your BIOS
HINT: Enter your BIOS setup and enable Virtualization Technology (VT),
and then hard poweroff/poweron your system
KVM acceleration can NOT be used

In diesem Fall muss VT in BIOS aktiviert werden.

Ob die KVM bereits installiert ist, lässt sich mit dem emulator Befehl (Android SDK Tool) feststellen:

$ emulator -accel-check

Die Ausgabe bei vorhandener Installation:

accel:
0
KVM (version 12) is installed and usable.
accel

Installieren

Sollte es nicht der Fall sein, muss KVM nachträglich installiert werden.

$ sudo apt-get install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils ia32-libs-multiarch

Konfiguration

inotify

inotify überwacht ressourcenschonend Dateien und Verzeichnisse auf Veränderungen und gibt diese an das Clientprogramm weiter. Dieses Feature macht sich React Native zu Nutze um nach Änderungen im Quellcode den Hot-Reload auszulösen und die App während der Entwicklung zu aktualisieren. Ist das Limit der inotify-Überwachungen zu niedrig, benötigt inotify mehr Zeit zum Melden der Änderung und es kann zu Verzögerungen bei der App-Aktualisierung kommen.

Das Limit der inotify-Überwachungen erhöhen:

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Oder wenn man nur temporär den Limit der Überwachungen erhöhen möchte:

$ sudo sysctl fs.inotify.max_user_watches=524288
$ sudo sysctl -p

Der aktuelle Wert wird ausgelesen mit:

$ cat /proc/sys/fs/inotify/max_user_watches

KVM einrichten

Nachdem die KVM installiert wurde, muss noch der Benutzer der Gruppe kvm hinzugefügt werden. Nur Mitglieder dieser Gruppe können die Virtuelle Maschine starten.

$ sudo adduser $USER kvm

Auch der Gruppe libvirt (Ubuntu 16.10 oder neuer) hinzufügen.

$ sudo adduser $USER libvirt

oder vor Ubuntu 16.10

$ sudo adduser $USER libvirtd

Gegebenfalls auch noch den Besitzer ändern.

$ sudo chown -R $USER:kvm kvm

Den Benutzer ausloggen und wieder einloggen damit die neue Gruppenzugehörigkeit wirksam wird.

---

---

Android Virtual Device (Emulator)

Android Virtual Device (AVD) ist ein Emulator der die Android-Geräte virtuell nachbildet und mit einem Android Betriebssystem (System Image) ausstattet. Auf diese Weise ist es möglich während der Entwicklung die Anwendungen unter verschiedenen Gerätekonfigurationen zu testen. AVD ist ein Bestandteil vom Android SDK. Android Studio stellt die Benutzeroberfläche (AVD Manager) für die Verwaltung und Konfiguration der virtuellen Geräte zur Verfügung.

Android Studio vorbereiten

Auf einem 64-bit Linux Betriebssystem benötigt Android Studio mksdcard utility zum Erstellen von AVD Emulatoren. Diese Pakete sind standardmäßig nicht vorhanden und müssen nachträglich installiert werden.

$ sudo apt-get install libstdc++6:i386 libgcc1:i386 zlib1g:i386 libncurses5:i386

AVD erstellen

Android Studio starten und aus der Configure-Auswahlbox unten rechts den AVD Manager wählen.

 

Mit dem Klick auf Create Virtual Device unten links ein neues Gerät im Konfigurator erstellen.

Die vorgeschlagen Standardeinstellungen Phone / Pixel 2 mit Next übernehmen.

Das vorgeschlagene System Android 9.0 Pie mit Next bestätigen.

Konfiguration überprüfen. Die Standardeinstellungen behalten. Mit Finish die AVD Konfiguration speichern und beenden.

Den AVD Emulator starten und testen.

 

Android Gerät als Entwicklungsplattform

Für die Nutzung eines Android-Gerätes als Entwicklungsplattform muss dieses den ADB-Port freigeben. Dies geschieht durch das Aktivieren vom USB-Debugging auf dem Gerät.

Das Gerät mit einem USB-Kabel an den Entwicklungs-PC anschliessen. Auf dem Gerät Einstellungen → Entwickleroptionen → USB-Debugging aktivieren.

Falls die Entwickleroptionen nicht vorhanden sind in den Einstellungen, müssen sie aktiviert werden. Dazu sieben Mal tippen auf Einstellungen → Geräteinformationen → Buildnummer.

Die Verbindung überprüfen mit:

$ adb devices

Es wird eine Liste mit angeschlossenen Geräten angezeigt.

List of devices attached
5ae70651 device

Das Gerät wird jetzt bei der Ausführung von React Native die App automatisch installieren und öffnen.

---

---

 

---

---