Was ist React Native? | Eine Codebase für nahtlose mobile Anwendungen

React Native ist ein JavaScript-Framework zur Erstellung nativer mobiler Anwendungen. Es basiert auf React und wird aktiv von Meta (ehemals Facebook) gepflegt. Viele beliebte Apps nutzen React Native, darunter Facebook, Microsoft Teams, Discord und viele mehr. Um herauszufinden, warum das so ist, werfen wir einen Blick auf die Architektur von React Native.

Während die Komponenten in React geschrieben werden, erfolgt das eigentliche Rendering über die nativen APIs der jeweiligen Plattform und nicht über Webviews. Dies sorgt für eine deutlich schnellere und reaktionsfreudigere Benutzererfahrung.

Die React Native Bridge wandelt React Native-Komponenten, die in React geschrieben wurden, in ihre plattformspezifischen nativen Äquivalente um, wie zum Beispiel Android.View (Android), UIView (iOS) und div (HTML).

React Native stellt einige grundlegende Komponenten wie View , Text , Image und ScrollView bereit, die direkt auf die nativen Komponenten der jeweiligen Plattform abgebildet werden. Darüber hinaus sind auf npm viele Drittanbieter-Bibliotheken verfügbar, die zusätzliche Komponenten und Funktionalitäten bieten.

Komponentenzusammensetzung einer React Native-App

Als React-Entwickler ist man meist bereits vertraut mit den Grundlagen des State- Managements, React Hooks und JSX. Die gute Nachricht ist, dass dieses Wissen die Grundlage für das Erlernen von React Native ist. Der Weg, um Komponenten oder Views in React Native zu schreiben, benötigt etwas Eingewöhnung wenn man aus der Webentwicklung kommt, ist aber nicht all zu kompliziert. Während in React reguläre HTMLElemente wie <div> , <p> oder <img> verwendet werden, benutzt man in React Native Komponenten wie <View> , <Text> oder <Image> . Die folgende Tabelle bietet einen guten Überblick über die gängigsten Komponenten in React Native, ihre entsprechenden Android- und iOS-Komponenten sowie ihre Entsprechungen in der Webentwicklung:

Da React Native nicht in einer Browserumgebung, sondern direkt auf dem Gerät ausgeführt wird, ist es nicht möglich, CSS zur Gestaltung der Komponenten zu verwenden. Stattdessen wird die StyleSheet-API bereitgestellt, die CSS ähnelt. Mit dieser API können Stile für Komponenten definiert werden, indem ein StyleSheet - Objekt erstellt und über die style-Eigenschaft an die jeweilige Komponente übergeben wird. Im folgenden Beispiel wird gezeigt, wie eine einfache React Native-App unter Verwendung der StyleSheet-API erstellt werden kann:

React Native ist eine beliebte Wahl für die Entwicklung plattformübergreifender mobiler Anwendungen. Einer der Hauptgründe dafür ist das umfangreiche Ökosystem von Paketen und Bibliotheken, die den Entwicklungsprozess vereinfachen, indem sie einfache und schnell nutzbare Lösungen für häufige Aufgaben bieten. Zusätzlich sorgen die umfassende, gut gepflegte Dokumentation und zahlreiche Community-Ressourcen dafür, dass Entwickler schnell Antworten auf ihre Fragen finden und Best Practices befolgen können. Weitere Gründe, warum React Native eine gute Wahl für die Entwicklung einer App ist:

• Open-Source-Bibliothek, unterstützt von Meta.
• Höhere Effizienz und geringere Kosten, da weniger Personen für das Projekt benötigt werden.
• React Native empfiehlt standardmäßig die Verwendung von TypeScript.
• Eine einzige Codebase zur Entwicklung von sowohl mobilen Apps als auch Desktop-Apps.
• Einfache Integration von nativen Modulen.

Die Entwicklung mobiler Apps mit React Native bringt einige Herausforderungen mit sich. Diese resultieren größtenteils daraus, dass es sich um die Entwicklung einer mobilen Anwendung und nicht um eine Webanwendung handelt. Das bedeutet, dass mit unterschiedlichen Bildschirmgrößen, variierenden Geräteleistungen und verschiedenen Ökosystemen umgegangen werden muss. Zudem erfordert das Testen der App die Verwendung von Simulatoren oder Emulatoren, die manchmal langsam sein können. Auch die Bereitstellung und das Debuggen der App gestalten sich komplexer als in der Webentwicklung. Ein weiteres Problem besteht im verzögerten Zugriff auf neue Funktionen oder APIs, die in Android oder iOS eingeführt werden. Diese stehen in React Native häufig nicht sofort zur Verfügung. Es ist jedoch möglich, Bibliotheken in den nativen Sprachen zu schreiben und sie in das React Native-Projekt zu integrieren, um neue Funktionen sofort zu nutzen.

Darüber hinaus bietet React Native nur die Grundstruktur für die Entwicklung mobiler Apps. Um eine vollständig funktionale Anwendung zu erstellen, müssen Tools und Bibliotheken manuell kombiniert werden. Hier hilft Expo, das eine Reihe von Werkzeugen bereitstellt, um diesen Prozess zu vereinfachen.

Bei Peerigon haben wir React Native als plattformübergreifende Technologie in unseren Tech-Stack integriert. Wir haben es genutzt, um die App unseres eigenen Abstimmungstools Konsens zu entwickeln, und sind begeistert, wie reibungslos bisher alles funktioniert hat. React Native übernimmt viele sich wiederholende Entwicklungsaufgaben, bietet robuste Unterstützung und ein weitreichendes Ökosystem, das den Prozess vereinfacht. All das hat es uns ermöglicht, uns auf das Produkt und die Benutzererfahrung zu konzentrieren, anstatt uns mit den mühsamen Details plattformspezifischer APIs oder der aktiven Entwicklung zweier Apps für iOS und Android zu beschäftigen. Neugierig, Konsens live zu sehen und selbst auszuprobieren? Hier geht es zum Download von Konsens!

Wir haben teamintern nach fairen Möglichkeiten der demokratischen Mitbestimmung im Unternehmen gesucht und kurzerhand eine App dafür entwickelt. Unser Abstimmungstool Konsens erleichtert Gruppenentscheidungen, ob im Büro oder von zu Hause aus. Entscheidungswege damit werden für alle einsichtig, während die einzelnen Stimmen anonym bleiben. Wir haben Konsens als Onlineapp in Deutschland gehostet und für andere Unternehmen oder Privatpersonen frei und kostenlos zugänglich gemacht.

Check out the online voting tool