Native Android- und iOS-Apps mit React Native erstellen

Inhaltsverzeichnis

React Native erweitert das JavaScript-Framework React um die Fähigkeit, Applikationen für Android und iOS zu erzeugen. Der Name von Facebooks Werkzeug weist bereits darauf hin, dass die Apps keine Kompromisse eingehen, sondern nativ sind.

React Native ist kein klassisches Cross-Platform-Framework, dessen Apps überall gleichermaßen funktionieren. Stattdessen können Entwickler auf die Steuerelemente des jeweiligen Betriebssystems zurückgreifen.

Dieser Artikel stellt die wichtigsten neuen Features auf einer Workstation mit Ubuntu 14.04 vor. Grundlagenkenntnisse von React helfen beim Verständnis. Als Zielplattform dient Android 5.0 - frühere Versionen unterstützen der Befehl adb reverse zur Verbindung der Workstation mit dem Android-Gerät nicht.

React herbei

React setzt Node.js voraus: Facebook empfiehlt das Herunterladen unter Nutzung des NVM-Versionsmanagers. Dazu sind folgende Kommandos notwendig:

sudo apt-get update
sudo apt-get install build-essential libssl-dev
curl \
 https://raw.githubusercontent.com/creationix/nvm/v0.16.1/install.sh \
 | sh

Nach dem Schließen des Terminals sind die Einstellungen aktiviert. Im nächsten Schritt folgt die Eingabe folgender Kommandos:

tamhan@TAMHAN14:~$ nvm install v4.1.1 && nvm alias default v4.1.1
############################################################### 100,0%
Checksums empty
Now using node v4.1.1
default -> v4.1.1
tamhan@TAMHAN14:~$ npm install -g watchman
tamhan@TAMHAN14:~$ npm install -g flow
tamhan@TAMHAN14:~$ npm install -g react-native-cli

Damit entsteht ein neues React-Native-Projekt. Anschließend muss ein Ordner erstellt und der Befehl react-native init HeiseSample ausgeführt werden. Dabei ist eine Internetverbindung zwingend erforderlich.

Sollte der Generatorprozess an fehlenden Rechten scheitern, helfen folgende Befehle:

tamhan@TAMHAN14:~$ sudo npm install -g react-native-cli
tamhan@TAMHAN14:~$ sudo react-native init HeiseSample

Der Lohn der Mühen ist die in Abbildung 1 gezeigte Projektstruktur. Die Verzeichnisse /android und /ios enthalten jeweils vollwertige Projektskelette, die eine native Android- und eine native iOS-Paketapplikation realisieren. Die eigentliche Intelligenz findet sich in den von der Package-Datei zusammengehaltenen js-Dateien.

Für die Programmausführung unter Android ist eine vollwertige Installation des SDKs erforderlich. Als Mindestausstattung schreibt Facebook die folgenden Pakete vor:

• Android SDK Build-tools version 23.0.1
• Android 6.0 (API 23)
• Android Support Repository

Sobald das Smartphone mit der Workstation verbunden ist, setzt der Befehl export ANDROID_HOME=<sdkpfad> das Home-Verzeichnis von Android. Das Kommando sudo react-native run-android startet das Programm. Sollte die App dabei nicht auf dem Android-Gerät landen, weist eine Fehlermeldung wie Object [object Object] has no method 'spawnSync' auf das Vorhandensein einer veralteten Node.js-Version hin. Als Abhilfe kommt erneut der NVM-Befehl auf einer via sudo -s gestarteten Root-Shell zum Einsatz, um die Version zu aktualisieren. Das Resultat präsentiert sich wie in Abbildung 2 gezeigt.

In der Praxis kommt es beim Deployment zu Kommunikationsfehlern, die sich durch einen roten Bildschirm am Smartphone äußern. Ist das der Fall, helfen die folgenden Befehle, um den mit npm ausgelieferten Paketmanager durch eine aktuellere Variante zu ersetzen:

$ npm r -g watchman
$ sudo apt-get install python-dev
$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v3.8.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

Für den nächsten Schritt ist ein weiteres Konsolenfenster erforderlich. Dort weist der Befehl reverse tcp:8081 tcp:8081 adb zur Weiterleitung von TCP-Paketen an; die Eingabe von react-native start startet den für die Auslieferung des JavaScripts notwendigen Server.

Mehr Infos

Mach's alleine

Die JavaScript-Ressourcen lassen sich als Ressource ins Projekt integrieren, um die Abhängigkeit vom Server zu brechen. Das Befolgen der in dieser Vorlage beschriebenen Schritte führt dazu, dass jede Änderung am JavaScript-Code ein komplettes und rund 30 Sekunden dauerndes Redeployment der apk-Datei anfordert.

Aufgrund eines weiteren bekannten Fehlers gibt es an dieser Stelle ebenfalls Hindernisse: Abbildung 3 zeigt die Ergebnisse des nächsten Schritts.

Zur Lösung genügt das Eingeben des folgenden Befehls:

root@TAMHAN14:~/Desktop//HeiseReactNative/sample/HeiseSample/\
  node_modules/react-native/node_modules/react-tools/docs/js#
rm react.js