React Native: Projekt ausführen und Release kompilieren




Das mit npx react-native init ProjectName angelegte Projekt kann sofort ausgeführt werden. Es enthält eine Standard React Native Vorlage.

App ausführen

Emulator starten

Zuerst muss der Emulator gestartet oder ein Android-Gerät mit aktiviertem USB-Debugging angeschlossen werden. Eine Anleitung zum Einrichten des Emulators ist hier zu finden. Zum Einrichten eines Gerätes als Entwicklungsplattform hier lesen.

Metro Server starten

Im Visual Studio Code den Projektordner öffnen File → Open Folder → ReactNativeDemo.

In der VSCode-Menüleiste Terminal → New Terminal wählen. In dem Terminal-Fenster eingeben:

$ npx react-native start

Warten bis die Meldung „Loading dependency graph, done.“ erscheint.

VSCode_Terminal-Metro-Start [Image]

Hinweis: Der Metro-Server wird mit [STRG+C] angehalten.

App starten

Im VSCode-Terminal-Fenster mit + ein zweites Fenster öffnen und eingeben:

$ npx react-native run-android

VSCode_Terminal-run-android [Image]

Die App wird im Debug-Mode auf dem Entwicklungsgerät installiert und ausgeführt.

Release kompilieren

Hinweis: Es wird ein nicht signiertes Release  erstellt, kann aber manuell auf den Geräten installiert werden. Ein signiertes Release für Google Play Store wird an einer anderen Stelle besprochen.

 

Ein Release kompilieren mit:

$ npx react-native run-android --variant release

Die kompilierte APK befindet sich in android/app/build/outputs/apk/release/app-release.apk.

Für weitere Optionen siehe run-android Befehl.

 

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.





React Native: App-Namen, Version und Icon ändern



Was bisher geschah?

App-Name ändern

Beim Erstellen des Beispielprojektes wurde ein App-Name schon angegeben. Möchte man ihn nachträglich ändern dann sind die folgenden Schritte erforderlich.

Android

In der Datei app.json den displayName-Wert und in android/app/src/main/res/values/strings.xml den Resource-String app_name ändern.

Die App neu erstellen mit npx react-native run-android.

iOS

In der Datei ios/LNReactNativeDemo/Info.plist den Wert von CFBundleDisplayName ändern.

Die App neu erstellen mit npx react-native run-ios.

App-Version ändern

Android

Methode 1:

In der Datei android/app/build.gradle im Abschnitt defaultConfig. Den versionCode und versionName anpassen.

android {
    ...
    defaultConfig {
        ...
        versionCode 1
        versionName "1.0.5"
    }
    ...
}

Methode 2:

Eine andere Möglichkeit ist zwei Variablen in der app.json-Datei zu erstellen:

{
  "name": "LNReactNativeDemo",
  "displayName": "LN React Native Demo",
  "versionCode": 1,
  "versionName": "1.0.5"
}

In der android/app/build.gradle zwei Funktionen vor dem android-Block zum Auslesen der Variablen definieren:

/* Get App version from app.json file */
import groovy.json.JsonSlurper

def getAppVersionName() {
    def inputFile = new File("../app.json")
    def packageJson = new JsonSlurper().parseText(inputFile.text)
    return packageJson["versionName"]
}

def getAppVersionCode() {
    def inputFile = new File("../app.json")
    def packageJson = new JsonSlurper().parseText(inputFile.text)
    return packageJson["versionCode"]
}

In dem android-Block darunter die Werte der Variablen versionCode und versionName ersetzen mit den Funktionsaufrufen:

android {
    ...
    defaultConfig {
        ...
        versionCode getAppVersionCode()
        versionName getAppVersionName()
    }
    …
}

Jetzt wird die Version in der Datei app.json geändert.

iOS

🙄

App-Icon ändern

Android

Die App-Icons liegen in dem Ordner android/app/src/main/res/. Die mipmap-Unterordner enthalten die Icons in unterschiedlichen Größen. Diese werden mit neuen Icons ersetzt.

Ein Icon-Set kann mit diesem Online-Tool Android Asset Studio – Launcher icon generator erstellt werden.

Nach dem Austauschen der Icons die App neu erstellen mit npx react-native run-android.

iOS

Aus dem Mac App Store den Icon Set Creator installieren.

Icon Sets erstellen und zu den Platzhaltern in ios/ReactNativeDemo/Images.xcassets/AppIcon.appiconset hinzufügen.
 

Wie geht es weiter?

 

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.




React Native: Programmieren




Das Programmieren mit React Native wird von Grund auf anhand eines Beispielprojektes “ReactNativeDemo” erklärt. Schritt für Schritt wird das Projekt modifiziert und erweitert.

Die Voraussetzung ist eine eingerichtete Entwicklungsumgebung. Eine Anleitung ist hier zu finden.

Das Beispielprojekt erstellen

In einem lokalen Ordner (z.B. ~/Development/REACT-NATIVE) den Terminal öffnen und das Projekt initialisieren:

$ npx react-native init ReactNativeDemo --template react-native-template-typescript --title "RN Demo"

Es wurde ein Projektordner ~/Development/REACT-NATIVE/ReactNativeDemo angelegt, der den Quellcode der React Native App mit TypeScript und Node Modulen enthält. Der App-Titel, der auf dem Geräte-Display erscheint, wurde auf “RN Demo” gesetzt.

Das Projekt testen

Den Emulator starten (siehe Android Virtual Device) oder ein Android-Gerät anschliessen (siehe Android Gerät als Entwicklungsplattform).

Im Terminal in den Projektordner wechseln und den Metro-Server starten.

$ cd ~/Development/REACT-NATIVE/ReactNativeDemo
$ npx react-native start

Nach der Meldung: “Loading dependency graph, done.” ein zweites Terminal-Fenster öffnen und die App erstellen und starten.

$ cd ~/Development/REACT-NATIVE/ReactNativeDemo
$ npx react-native run-android

Nach einer Weile sollte auf dem Emulator-Display die “Welcome to ReactSeite erscheinen.

AVD-Welcome_to_React [Image]

Das Beispielprojekt einrichten

Es werden noch weitere Pakete wie Internationalisierung, App-Zustandspeicherung und UI-Komponente  installiert und eingerichtet. Dazu wie in Projekt einrichen beschrieben vorgehen.

Das Projekt ist jetzt für die weitere Arbeit vorbereitet. Der Projektordner kann in Visual Studio Code geöffnet werden (File → Open Folder → ReactNativeDemo).

Hier geht es weiter!

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.





React Native: Projekt anlegen




React Native besitzt eine eingebaute Befehleszeilenschnittstelle, die mit dem von Node.js geliefertem Befehl npx (Node Package Execute) aufgerufen wird. Mit diesem Befehl und react-native CLI werden auch die Projekte erstellt.

Hinweis: Der Projektname darf keine Leer- und/oder Sonderzeichen enthalten.

Einfaches Projekt

Ein einfaches Projekt wird ohne zusätzliche Argumente erstellt.

$ npx react-native init ProjectName

Projekt mit einer bestimmten React Native Version

Mit der Option ––version kann man ein Projekt mit einer bestimmten React Native Version anlegen.

$ npx react-native init ProjectName --version X.XX.X

Projekt aus einer Vorlage

Mit der Option ––template wird ein Projekt aus einer Vorlage, z.B. TypeScript erstellt.

$ npx react-native init ProjectName --template react-native-template-typescript

Projekt mit einem App-Titel

Standardmäßig wird das Projekt mit dem gleichen App-Titel wie der Projektname erzeugt. Der Projektname darf aber keine Leer- und Sonderzeichen enthalten. Bei langen, aus mehreren Wörtern zusammengesetzten Namen sieht der App Titel ungewöhnlich aus. Man kann ihn später ändern in der android/app/src/main/res/values/strings.xml bzw. ios/ProjectName/Info.plist Datei. Den Titel kann man aber auch schon beim Anlegen des Projektes vergeben, z.B.:

$ npx react-native init ReactNativeDemo --title "RN Demo App"

Siehe auch: React Native CLI Befehle – init

Projekt-Struktur

Die Struktur eines neu angelegten Projektes ist in drei Bereiche aufzuteilen: gemeinsamer JavaScript Code mit den Node-Modulen, Android-spezifischer und iOS-spezifischer Code.

Project_Structure [Image]

index.js

Der Einstiegspunkt der App befindet sich in dieser Datei.

App.tsx

Die App-Hauptdatei, die den Screen-View enthält.

app.json

App-Einstellungen.

package.json

Pakete-Konfiguration und Abhängigkeiten.

package-lock.json

Garantiert, dass die mit npm install hinzugefügte Pakete die gleiche, im Projekt benutzte Version haben. Diese Datei soll manuell nicht editiert werden.

tsconfig.json

TypeScript-Konfiguration.

metro.config.js

Metro-Server-Konfiguration.

babel.config.js

Babel-Konfiguration.

.watchmanconfig

Watchman-Konfiguration.

.prettierrc.js

Prettier-Konfiguration.

.gitignore

Dateien und Verzeichnisse die nicht versioniert werden sollen. Siehe: https://git-scm.com/docs/gitignore

.gitattributes

Git-Attribute. Siehe: https://git-scm.com/docs/gitattributes

.eslintrc.js

ESLint-Konfiguration.

.buckconfig

Buck-Konfiguration.

node_modules

Dieser Ordner enthält die Node Module, die von der App benutzt werden.

ios

Der iOS-spezifische und native Code, Builds und Releases.

android

Der Android-spezifische und native Code, Builds und Releases.

__test__

Dieser Ordner enthält die Jest-Testdateien.

 

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.





React Native CLI Befehle




React Native besitzt ein eingebautes Command Line Interface (CLI), das mit dem von Node.js mitgeliefertem Befehl npx aufgerufen wird (npx react-native  <cli-command>).

Liste der React Native CLI Befehle

bundle

react-native bundle <flag>

Erstellt ein JavaScript-Bundle für die Offline-Nutzung.

Optionen:

––entry-file <path>

Pfad zu der Einstiegs-JS-Datei. Absolut oder relativ zu dem Hauptordner.

––platform [string]

Entweder “ios” oder “android”. Standard: ios

––transformer [string]

Gibt den benutzerdefinierten Transformer an.

––dev [boolean]

Wenn false, die Warnungen werden deaktiviert und das Bundle wird minimiert. Standard: true

––minify [boolean]

Erlaubt das Minimieren des Bundles. Dieser Wert wird false wenn der Parameter ––dev auf true gesetzt wird und true wenn ––dev false. Deaktivieren der Minimierung kann die Erstellung von Produktion-Builds zu Testzwecken beschleunigen.

––bundle-output <string>

Der Dateiname, wo das Bundle gespeichert wird, z.B. /tmp/groups.bundle.

Siehe: https://github.com/react-native-community/cli/blob/master/docs/commands.md#bundle

––bundle-encoding [string]

Die Bundle-Zeichen-Kodierung (https://nodejs.org/api/buffer.html#buffer_buffer). Standard: utf8

––max-workers [number]

Maximale Anzahl der Worker, die der Worker-Pool für die Dateitransformation erzeugen kann. Standardmäßig gleicht die Anzahl der verfügbaren Prozessorkerne.

––sourcemap-output [string]

Der Name der Bundle-Sourcemap-Datei, z.B. /tmp/groups.map.

––sourcemap-sources-root [string]

Der Pfad, zu dem die Sourcemap-Einträge relativ geschrieben werden, z.B. /root/dir.

––sourcemap-use-absolute-path

Benutzt absoluten Pfad für den SourceMapURL Report. Standard: false

––assets-dest [string]

Verzeichnis wo die Assets gespeichert werden sollen, die im Bundle referenziert sind.

Zum Erstellen eines Debug-APK, das ohne Packager laufen soll, siehe (–bundle-output).

Siehe: https://github.com/react-native-community/cli/blob/master/docs/commands.md#bundle

––reset-cache

Entfernt Dateien aus dem Cache. Standard: false

––read-global-cache

Wenn konfiguriert, versucht den transformierten JS-Code aus dem globalen Cache zu holen. Standard: false

––config [string]

CLI-Konfigurationsdateipfad.

config

react-native config

Projekt- und Abhängigkeitenkonfiguration in JSON-Fromat zum stdout ausgeben.

init

react-native init <projectName> [options]

Initialisiert ein neues React Native Projekt in einem neuem Ordner mit dem Projektnamen.

Optionen:

––version [string]

Eine bestimmte, gültige React Native Version als Vorlage nutzen.

––directory [string]
Benutzerdefiniertes Verzeichnis anstatt von <projectName>.

––title [string]
Benutzerdefinierter App-Titel anstatt von <projectName>.

––template [string]
Benutzerdefinierte Vorlage. Akzeptiert werden:

  • ein npm Paket Name
  • der absolute Pfad im lokalen Verzeichnis
  • der absolute Pfad zum TAR-Archiv, erstellt mit npm pack

Siehe: https://github.com/react-native-community/cli/blob/master/docs/commands.md#init
––npm

Erzwingt die npm-Verwendung während der Initialisierung.

info

react-native info

Liefert Informationen über das Betriebssystem, Toolchain und Bibliotheken. Nützlich beim Senden von Fehlerberichten.

install

react-native install <packageName>

Installiert einzelne Pakete aus npm und verlinkt die nativen Abhängigkeiten. Wenn die Installationsprozedur yarn.lock in dem Projekt findet, wird yarn als Package Manager benutzt. Sonst npm.

react-native link [packageName]

Verlinkt Assets und optionale native Module.

Optionen:

––all

Verlinkt alle nativen Module und Assets.

––platforms [list]

Übergibt eine komma-separierte Liste der Plattformen zu den verlinkt werden soll.

log-android

react-native log-android

Startet logkitty und zeigt Android Logs.

log-ios

react-native log-ios

Startet iOS syslog.

ram-bundle

react-native ram-bundle [options]

Erstellt JavaScript als ein “Random Access Module” Paket zur Offline-Nutzung.

Optionen:

Alle bundle-Optionen und

––indexed-ram-bundle

Erzwingt das “Indexed RAM”-Paket-Dateiformat.

run-android

react-native run-android [options]

Erstellt die App und startet sie auf dem Android-Emulator oder Gerät.

Optionen:

––root [string]

Überschreibt das Hauptverzeichnis für das Android Build, welches das android-Verzeichnis enthält.

––variant [string]

Gibt die Build-Variante (release oder debug) vor. Standard: debug.

––appFolder [string]

Gibt anderen Ordnernamen für Android Anwendung-Quellcode an. Standard: app.

––appId [string]

Gibt eine applicationId einer Anwendung an, die nach dem Erstellen gestartet werden soll.

––appIdSuffix [string]

Gibt eine applicationIdSuffix einer Anwendung an, die nach dem Erstellen gestartet werden soll.

––main-activity [string]

Der Name der Activity, die gestartet werden soll. Standard: MainActivity.

––deviceId [string]

Startet die App auf dem mit deviceId vorgegebenen Gerät oder Simulator. deviceId kann mit adb devices ausgelesen werden.

––no-packager

Packager wird während der Kompilierung nicht ausgeführt.

––port [number]

Der Metro-Server-Port. Standard: process.env.RCT_METRO_PORT || 8081

––terminal [string]

Startet den Metro Bundler in neuem Fenster mit einem als Pfad angegebenen Terminal. Standard: process.env.REACT_TERMINAL || process.env.TERM_PROGRAM

––tasks [list]

Startet benutzerdefinierte gradle-Aufgaben. Ist dieser Parameter vorhanden, wird die ––variant Option ignoriert. Beispiel: npx react-native run-android –tasks clean,installDebug. Standard: installDebug

––no-jetifier

jetifier (AndroidX Übersetzungstool) nicht ausführen – Standardmäßig wird es vor Gradle ausgeführt, um leichter mit Bibliotheken zu arbeiten, die AndroidX noch nicht unterstützen.

run-ios

react-native run-ios [options]

Erstellt eine App und startet sie auf einem iOS-Simulator.

Optionen:

––simulator [simulator_name]

Der Simulator, der gestartet werden soll. Optional kann auch die iOS-Version in Anführungsstrichen angegeben werden. z.B.. “iPhone 6 (10.0)”. Standard: iPhone 11

Siehe: https://github.com/react-native-community/cli/blob/master/docs/commands.md#run-ios

––configuration [string]

Setzt die Schema-Konfiguration. Standard: Debug.

––scheme [string]

Xcode-Schema, das benutzt werden soll.

––project-path [string]

Der Pfad, relativ zum Projektordner, wo das Xcode-Projekt (.xcodeproj) platziert ist. Standard: ‘ios’.

––device [string]

Der Name des Gerätes, das benutzt werden soll. Nicht notwendig wenn nur ein Gerät verbunden.

––udid [string]

Die udid des Gerätes, das benutzt werden soll.

––no-packager

Packager wird während der Kompilierung nicht ausgeführt.

––verbose

xcpretty nicht benutzen.

––port [number]

Packager Port. Standard: process.env.RCT_METRO_PORT || 8081

start

react-native start [option]

Startet den Server, der mit dem verbundenen Gerät / Emulator kommuniziert.

Optionen:

––port [number]

Server Port Nummer.

––projectRoot [path]

Benutzerdefinierter Projektordnerpfad.

–watchFolders [list]

Zusätzliche Ordner, die auf Änderungen überwacht werden sollen.

––assetExts [list]

Zusätzliche Asset-Erweiterungen, die vom Packager benutzt werden sollen.

––sourceExts [list]

Zusätzliche Quellen-Erweiterungen, die vom Packager benutzt werden sollen.

––platforms [list]

Zusätzliche Plattformen, die vom Packager benutzt werden sollen.

––providesModuleNodeModules [list]

Gibt npm-Pakete an, die mit providesModule Abhängigkeiten importieren.

––max-workers [number]

Gibt die maximale Anzahl der Worker an, die der Worker-Pool für die Dateitransformation erzeugen kann. Standardmäßig gleicht die Anzahl der verfügbaren Prozessorkerne.

––transformer [string]

Benutzerdefinierter Transformer.

––reset-cache, ––resetCache

Dateien aus dem Cache entfernen.

––custom-log-reporter-path, ––customLogReporterPath [string]

Der Dateipfad zum JavaScript, das einen Log-Reporter als Ersatz für TerminalReporter exportiert.

––verbose

Aktiviert Logging.

––https

Aktiviert HTTPS-Verbindung zum Server.

––key [path]

Der SSL-Schlüssel-Pfad.

––cert [path]

Der Zertifikatspfad.

––config [string]

Der Pfad zu der  CLI-Konfigurationsdatei.

uninstall

react-native uninstall <packageName>

Entfernt die nativen Abhängigkeiten-Links eines einzelnen Paketes und deinstalliert es in package.json. Wenn die Deinstallationsprozedur yarn.lock in dem Projekt findet, wird yarn als Package Manager benutzt. Sonst npm.

react-native unlink <packageName> [options]

Entfernt native Abhängigkeiten-Links, die mit dem link-Befehl hinzugefügt wurden.

Optionen:

––platforms [list]

Entferne Links von bestimmten, aufgelisteten Plattformen.

upgrade

react-native upgrade [npm-version]

Aktualisiert die App-Template-Dateien zu einer bestimmten oder letzten npm-Version.

Siehe: https://github.com/react-native-community/cli/blob/master/docs/commands.md#upgrade


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.





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.

Android_Studio_Welcome_Screen [Image]

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

Android_Studio_Check_for_Updates [Image]

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

Android_Studio-Configure-SDK-Manager [Image]

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 28Google Play Intel x86 Atom System Image und Intel x86 Atom_64 System Image installieren.

Android_Studio_SDK_Platforms [Image]

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.

Android_Studio_SDK_Tools [Image]

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 [Image]

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.

Android_Studio-Configure-AVD-Manager [Image]

 

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

Android_Studio_AVD-Virtual_Devices [Image]

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

Android_Studio_AVD-Select_Hardware [Image]

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

Android_Studio_AVD-System_Image [Image]

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

Android_Studio_AVD-Verify_Configuration-1 [Image]

Android_Studio_AVD-Verify_Configuration-2 [Image]

Android_Studio_AVD-Verify_Configuration-3 [Image]

Den AVD Emulator starten und testen.

Android_Studio_AVD-Virtual_Devices-2 [Image]

Android_Studio_AVD-Pixel-2-Emulator [Image]

 

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.