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.
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.
War diese Seite für dich informativ? Hat sie dir gefallen und geholfen?
Dann unterstütze die Weiterentwicklung mit einer kleinen Spende!
Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.