Cross-Plattform-Entwicklung: React Native 0.63 liefert übersichtlichere Logs

Die neue LogBox ersetzt die bisherigen Redbox und Yellowbox. Sie soll Entwicklern deutlichere Informationen bei der Fehlersuche anzeigen.

In Pocket speichern vorlesen Druckansicht 5 Kommentare lesen
Cross-Plattform-Entwicklung: React Native 0.63 liefert übersichtlicher Logs
Lesezeit: 4 Min.
Von
  • Rainald Menge-Sonnentag
Inhaltsverzeichnis

Facebook hat Version 0.63 des Cross-Plattform-Frameworks React Native veröffentlicht. Das Release fokussiert sich auf die Unterstützung der Entwickler bei der Fehlersuche mit einem neuen Logging-Interface. Außerdem führt das Release die neue Komponente Pressable ein, die Button und ähnliche Elemente ersetzen kann.

Bisher zeigt React Native im Entwicklungsmodus Fehler und Warnungen in einer RedBox und einer YellowBox an. Es gab dazu wohl zahlreiche Rückmeldungen von Entwicklern, denen die Gestaltung weniger gefallen hat. Zum einen sei die durchgängige rote beziehungsweise gelbe Einfärbung eher hinderlich für die Lesbarkeit und zum anderen zeigten die Komponenten die Meldungen unübersichtlich an. Oft gebe es zu viele und schlecht strukturierte Informationen zu der Fehlerquelle.

Daher hat das React-Native-Team das Logging neu gestaltet und führte bereits in Version 0.62 die LogBox seinerzeit noch als optionale Darstellungsform ein. Roten und gelben Hintergrund weisen dabei lediglich die Titelzeilen der Anzeigebereiche für die Fehlermeldungen und Warnungen im Smartphone-Design auf. Der Rest ist gleichermaßen dunkelgrau bis schwarz.

Wichtiger wiegt die Darstellung des Inhalts. Statt wie bisher unter der eigentlichen Meldung eine Kaskade von Abhängigkeiten und Call-Stacks zu zeigen, konzentriert sich die LogBox auf die wesentlichen Informationen. Diese sind neuerdings zudem formatiert: Die betroffene Komponente steht in großer Schrift und spitzen Klammern über dem Namen der zugehörigen Sourcecodedatei und der Zeilennummer in einer kleineren Schriftart.

Die neue LogBox rechts ist deutlich übersichtlicher als die alte RedBox links.

(Bild: Facebook)

Schließlich steht die Ansicht der tatsächlich betroffenen Stelle im Sourcecode nun über dem Callstack und bietet die aus Entwicklungsumgebungen gewohnte Syntaxhervorhebung. Entwickler können von dort direkt in ihren Sourcecode-Editor springen, um den Fehler oder die Warnung zu beheben. Die LogBox ist in React Native 0.63 standardmäßig aktiviert.

Die YellowBox gilt damit als überholt (depreacted). Entwickler sollten die Befehle zum Deaktivieren von Logausgaben durch passende neue austauschen: LogBox.ignoreLogs() ersetzt YellowBox.ignoreLogs([]) und LogBox.ignoreAllLogs() den bisherigen Aufruf console.disableYellowBox.

Bei den Komponenten hat React Native 0.63 einen wichtigen Neuzugang zu vermelden: Der Wrapper Pressable lässt sich als Ersatz für zahlreiche andere Komponenten wie Button verwenden, die sich in irgendeiner Form drücken lassen. Er bietet Callbacks für die unterschiedlichen Phasen beim Touch, also dem Druck mit dem Finger auf eingebundene Elemente, wie in folgendem einfachen Codeschnipsel:

<Pressable onPress={onPressFunction}>
  <Text>Drück mich!</Text>
</Pressable>

Dabei erkennt er auch langes Drücken: Liegt der Finger länger als 370 Millisekunden auf der Komponente, greift die Callback-Funktion onLongPress. Pressable bringt zudem plattformspezifische Funktionen mit wie android_disableSound zum Unterdrücken von Soundeffekten auf Android-Endgeräten.

Verlauf der Callback-Aufrufe beim kurzen oder langen Druck auf eine Komponente mit dem Finger.

(Bild: Facebook)

Motivation hinter dem neuen Wrapper ist, Nutzern von React-Native-Anwendungen ein natives Gefühl auf der jeweiligen Plattform zu geben. Die bisherigen Komponenten mit Touch-Funktionen, zu denen neben Button die Elemente TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback und TouchableBounce gehören, verraten mit ihrer Darstellung beziehungsweise ihrem Verhalten wohl zu oft, dass eine Anwendung mit dem Cross-Plattform-Framework erstellt wurde und nicht direkt für das Zielsystem.

Ebenfalls auf eine passende Erfahrung für iOS beziehungsweise Android zielt die neue API PlatformColor(), die plattformspezifische Farbinformationen abruft wie labelColor in iOS oder [/ode]colorButtonNormal[/code] auf Android.

Weitere Neuigkeiten in React Native 0.63 lassen sich dem zugehörigen Blogbeitrag entnehmen. Die vollständige Liste der Anpassungen findet sich im Changelog. Das aktuelle Release wirft mit iOS 9 und Node.js 8 zwei Altlasten über Bord. Der Long-term Support für Letzteres ist im Dezember 2019 ausgelaufen, und iOS 9 hat wohl einen Marktanteil von etwa einem Prozent.

(rme)