Listing 1
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
textHeader: {
marginBottom: 20,
color: '#000000',
fontSize: 14,
lineHeight: 19,
textAlign: 'center',
},
text: {
marginBottom: 20,
color: '#000000',
fontSize: 30,
lineHeight: 40,
textAlign: 'left',
},
WelcomeText: {
marginBottom: 20,
color: '#000000',
fontSize: 30,
lineHeight: 40,
textAlign: 'center',
},
filler: {
lineHeight: 120,
},
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#eeeeee',
},
textInfo:{
marginBottom: 20,
marginLeft:10,
color: '#000000',
fontSize: 20,
lineHeight: 25,
textAlign: 'left',
},})
Ein weiterer wichtiger Teil der Anwendung ist der Infoscreen. Er ruft den REST-Service auf und stellt dessen Daten auf der Seite dar. Der constructor definiert alle Variablen, die wir später in this.state verwenden. Die render()-Methode erlaubt den Zugriff auf die einzelnen Variablen.
Das Beladen mit Werten erfolgt in der getInfo()-Methode, die den REST-Call absetzt. Aus dem Ergebnis werden die für uns relevanten Informationen herausgelesen und in die Variablen geschrieben, die state definiert. Die getInfo() Methode rufen Sie durch einen Druck auf den Button auf.
Damit der erste Aufruf der Seite auch aktuelle Daten darstellt, rufen wir getInfo() auch aus der Methode componentDidMount() heraus auf, die wiederum beim Laden einer React-Native-Komponente automatisch aufgerufen wird. Das komplette Programm für den Infoscreen zeigt Listing 2.
Listing 2
import React from 'react';
import { ScrollView, StyleSheet, View, Text, Button } from 'react-native';
import { ExpoLinksView } from '@expo/samples';
import styles from '../styles';
export default class LinksScreen extends React.Component {
constructor(props){
super(props);
this.state = {
stateOfCharge: null,
temperatureBattery: null,
powerACOut:null,
};
}
static navigationOptions = {
title: 'Info',
};
render() {
return (
<View>
<View>
<Text style={styles.textInfo}></Text>
<Text style={styles.textInfo}>Battery Charge: {this.state.stateOfCharge}%</Text>
<Text style={styles.textInfo}>Battery Temperature: {this.state.temperatureBattery}°C</Text>
<Text style={styles.textInfo}>Power AC Out: { parseInt(this.state.powerACOut)}W</Text>
</View>
<Button onPress={this.getInfo} title="Refresh" color="#888888" accessibilityLabel=""/>
</View>
);
}
getInfo=()=>{
fetch('http://192.168.3.220/rest/kiwigrid/wizard/devices')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
stateOfCharge: responseJson.result.items[1].tagValues.StateOfCharge.value,
temperatureBattery: responseJson.result.items[1].tagValues.TemperatureBattery.value,
powerACOut: responseJson.result.items[5].tagValues.PowerACOut.value,
})
})
}
componentDidMount(){
this.getInfo();
} //methode
}//class
Es gibt für React Native als eigenes Projekt eine sehr mächtige Navigationskomponente, die es erlaubt, alle üblichen Navigationsmodelle einfach aufzubauen [4]. Die dafür zuständige Datei MainTabNavigation.js befindet sich im navigation-Ordner unseres Projekts. Wie Listing 3 zeigt, werden die einzelnen Teile der Navigationsleiste als Konstanten definiert und am Ende der Datei alle zusammen exportiert. Wenn man sich etwas in den Code vertieft, sieht man schnell, wie sich die einzelnen Navigationselemente verändern lassen und wie man zusätzliche hinzufügt.
Interessant ist der Bereich TabBarIcon, der die Icons für die Navigation erzeugt, die aus der Bibliothek React Native Vector Icon stammen. Eine Übersicht aller verfügbaren Icons finden Sie auf der Internet-Seite des Projekts [5]. Für Android vorgesehene Icons erkennen Sie am Präfix md-, die für iOS nutzen als Endung sinnvollerweise ios-.
Innerhalb der einzelnen Tabs der Anwendung aus Listing 2 gilt es, Konstanten zu definieren, damit React Navigation sie zuordnen kann. Das Programm für den Willkommensbildschirm ist recht leicht zu verstehen, daher gehen wir nicht weiter darauf ein. Das Programm für den Settings-Reiter versteht sich als eine Art Platzhalter: Hier lassen sich später benutzerspezifische Einstellungen verwalten, etwa die URL auf den REST-Service.
Normalerweise klappt das automatische Neubauen und Verteilen der App mit Expo wirklich gut. Es kommt aber vor, dass der Reload mal nicht sauber funktioniert. In diesem Fall hilft es, das Mobilgerät ordentlich zu schütteln. Das aktiviert das Menü, mit dem sich der Reload der App manuell auslösen lässt. Darüber hinaus enthält es noch weitere interessante Funktionen von Expo.
In den Beispielprogrammen finden sich hin und wieder Kommas an Stellen, wo sie eigentlich nicht hingehören. Der Interpreter toleriert sie normalerweise. Die Kommas helfen tatsächlich oft auch, Fehler zu verhindern – gerade, wenn man Codebereiche wie Styles kopiert und wieder einfügen will, um sie anzupassen.
Während einer längeren Entwicklungsphase kommt es manchmal vor, dass unter Linux wie aus heiterem Himmel ein schwer einzugrenzender Filewatcher Error auftritt. Der betrifft aber nicht den Code. Er bedeutet vielmehr, dass die maximale Anzahl der Filewatcher auf Betriebssystemebene aufgebraucht ist. Darüber, wie genau es dazu kommt, kann man nur spekulieren.
Um das Problem zu vermeiden, hilft es, die maximale Anzahl der Filewatcher auf einen höheren Wert zu setzen. Dazu müssen Sie die Datei /etc/sysctl.conf als Root editieren. Suchen Sie innerhalb der Datei nach dem Schlüssel fs.inotify.max_user_watches und setzen Sie ihn auf einen größeren Wert, etwa 524288, dann speichern Sie die Änderung ab.
Mit dem Kommandozeilenbefehl sysctl -p veranlassen Sie das Betriebssystem dazu, die geänderten Werte zu übernehmen. Den Erfolg des Unterfangens überprüfen Sie mit der Eingabe von sysctl --all | grep fs.inotify.max_user_watches. Es sollte den neuen, von Ihnen gesetzten Wert mit ausgeben (fs.inotify.max_user_watches = 524288).
Die App bauen
Die Expo-Umgebung eignet sich hervorragend zum Entwickeln und Testen von Apps. Die starten aber nur, wenn der Metro Builder läuft. Daher gibt es eine Möglichkeit, die Apps für verschiedene Zielgeräte zu bauen. Die gebauten Versionen lassen sich dann über einen der bekannten Stores verteilen.
Um eine App für ein Android-Gerät zu bauen, bedarf es nur weniger Schritte. Der Bau für iOS läuft prinzipiell genauso ab, deswegen gehen wir an dieser Stelle nur auf die Android-Variante ein. Die Webseite Docs.expo.io [6] beschreibt alle Schritte für beide Betriebssysteme.
