Was ist React Native?

Was ist React Native?

React Native ist ein Open-Source-Framework von Meta, mit dem Sie iOS- und Android-Apps in JavaScript (oder TypeScript) und React entwickeln. Sie schreiben Komponenten einmal, und React Native stellt sie als die eigenen nativen Ansichten der Plattform dar, nicht als Webseite in einer Hülle. Ihre App-Logik läuft in einer JavaScript-Engine, standardmäßig Hermes, und spricht mit der nativen Seite, um die Oberfläche zu zeichnen und Gerätefunktionen wie die Kamera zu nutzen. Deshalb sieht eine React-Native-App aus und scrollt wie eine native App, obwohl der größte Teil des Codes auf beiden Plattformen geteilt wird.

So funktioniert React Native

• JavaScript-Ebene. Hier laufen Ihre Komponenten, der Zustand und die Geschäftslogik, auf der Hermes-Engine. Hermes ist der Standard, und Release-Builds kompilieren Ihr JavaScript vorab zu Bytecode, um den Start zu beschleunigen.
• Native Ebene. Ansichten und APIs der Plattform: UIKit unter iOS, Android Views unter Android.
• JSI. Das JavaScript Interface erlaubt es JavaScript, einen nativen C++-Objektverweis zu halten und direkt aufzurufen. Es ersetzt die alte asynchrone Bridge, die serialisierte Nachrichten zwischen beiden Welten übertrug.
• Fabric und TurboModules. Fabric ist der Renderer, TurboModules sind die auf JSI aufbauenden nativen Module. Zusammen mit JSI bilden sie die New Architecture, die in React Native 0.76 für neue Projekte zum Standard wurde. Ab 0.68 war sie optional verfügbar, und bestehende Apps können sie weiterhin abschalten. Allein das Aktivieren macht eine App nicht schneller, und manche Codestellen müssen angepasst werden, um davon zu profitieren.
• Native Module. Bietet das Framework eine Plattformfunktion nicht an, schreiben Sie Swift, Kotlin oder C++ und rufen es aus JavaScript auf oder nutzen eine Community-Bibliothek, die das tut.

React Native und Expo

Sie können React Native allein einsetzen, aber die offizielle Dokumentation empfiehlt, neue Apps mit einem Framework zu starten, und stellt Expo in den Vordergrund. Expo bringt dateibasiertes Routing, gepflegte Bibliotheken und Config-Plugins mit, die native Projekte verändern, ohne dass Sie native Dateien bearbeiten. Ein neues Projekt startet mit npx create-expo-app@latest. Ohne Framework setzen Sie Navigation, native APIs und Build-Konfiguration selbst zusammen. Expo ersetzt React Native nicht: Ihre App bleibt eine React-Native-App.

Beispiel

Ein Lieferdienst-Startup mit einem React-Web-Team baut seine Kunden-App in React Native. Das Team übernimmt TypeScript-Modelle, API-Client und Zustandslogik, schreibt Bildschirme mit React-Native-Komponenten und veröffentlicht in beiden Stores. Karte und Bezahlfenster nutzen native Module. In der Startwoche trifft dann eine Welle von Anfragen dasselbe Backend, das auch die Web-App bedient, das eigentliche Risiko liegt also hinter den Bildschirmen, in der API.

Wofür React Native gut ist

• Eine Codebasis für zwei Plattformen. Der Großteil der Logik und viele Bildschirme werden geteilt.
• Teams, die React schon kennen. Komponenten, Hooks und Zustand lassen sich von React im Web übernehmen.
• Schnelle Iteration. Änderungen erscheinen in der laufenden App ohne vollständigen nativen Neubau.
• Typische Produkt-Apps. Inhalte, Shops, soziale Apps und Produktivitätswerkzeuge passen gut.

Wo es an Grenzen stößt

• Aufwendige Grafik und Echtzeit. AR, Spiele und anspruchsvolle Animationen brauchen oft nativen Code.
• Neue Plattformfunktionen. Neue iOS- oder Android-APIs erfordern meist ein natives Modul oder ein Bibliotheks-Update, bevor JavaScript sie nutzen kann.
• Schwankende Bibliotheksqualität. Prüfen Sie, ob ein Paket gepflegt wird und die New Architecture unterstützt, bevor Sie sich darauf verlassen.
• Fehlersuche über mehrere Ebenen. Ein Absturz kann JavaScript, die native Ebene und die Plattform betreffen.

React Native, Flutter und nativ im Vergleich

• React Native: JavaScript oder TypeScript mit React, dargestellt mit den nativen Ansichten der Plattform. Eine natürliche Wahl für React-Teams.
• Flutter: Dart mit eigener Rendering-Engine, die die Oberfläche selbst zeichnet und so auf beiden Plattformen gleich aussieht. Siehe Flutter.
• Nativ (Swift und Kotlin): zwei Codebasen, am ersten Tag voller Zugriff auf jede Plattformfunktion und der höchste Wartungsaufwand.

Häufige Fehler

• Annehmen, iOS und Android verhielten sich gleich. Textdarstellung, Scrollen, Berechtigungen und Tastaturverhalten unterscheiden sich. Testen Sie auf beiden.
• Release-Builds nicht testen. Debug-Builds sind deutlich langsamer und verdecken echtes Start- und Speicherverhalten.
• Ungepflegte Bibliotheken einbinden. Eine verwaiste Abhängigkeit kann ein Upgrade blockieren.
• Keine Source Maps an den Crash-Reporter senden. Ohne sie sind Stacktraces unlesbar.
• Nur die Oberfläche testen. Langsame oder fehlerhafte APIs lassen die beste Oberfläche kaputt wirken.

Das Backend einer React-Native-App testen

UI-Werkzeuge wie Detox und Maestro testen die App selbst. Die Netzwerkseite ist eine eigene Aufgabe. Mobile Clients wiederholen Anfragen, erzeugen beim Start Lastspitzen und laufen über langsame Verbindungen, und alle treffen Ihre API. Das API-Monitoring von LoadFocus prüft Ihre Endpunkte regelmäßig von mehreren Standorten und alarmiert Sie bei Verlangsamung oder Ausfall, die früheste Warnung für eine App, deren Nutzer der App die Schuld geben. Vor einem Launch oder einer Kampagne zeigen Lasttests, wie sich dieses Backend bei vielen gleichzeitigen Nutzern verhält. Nutzen Sie API-Monitoring als dauerhafte Kontrolle und Lasttests für geplante Spitzen. Praxisbeispiele (auf Englisch): die Fallstudie zu Ladezeiten mobiler Apps und warum Performance-Tests für Mobile-First-Unternehmen wichtig sind.

Häufige Fragen: React Native

Ist React Native dasselbe wie React?

Beide teilen die Grundideen: Komponenten, Props, Zustand und Hooks. React rendert in das DOM des Browsers, React Native in native mobile Ansichten, daher unterscheiden sich die Bausteine (View und Text statt div und span).

Ist die New Architecture der Standard?

Ja, für neue Projekte seit React Native 0.76. Bestehende Apps können sie per Einstellung in den Android- und iOS-Projektdateien weiterhin abschalten, wie in der React-Native-Dokumentation beschrieben.

Brauche ich Expo, um React Native zu nutzen?

Nein, aber die React-Native-Dokumentation empfiehlt für neue Apps ein Framework und stellt Expo vor. Sie können React Native auch ohne Framework nutzen, wenn Sie die nativen Projekte selbst verwalten möchten.

Erzeugt eine React-Native-App echte native Apps?

Ja. Das Ergebnis ist eine installierbare iOS- oder Android-App, die native Ansichten darstellt. Ihr JavaScript läuft darin auf der Hermes-Engine.

Kann ich Code zwischen einer React-Web-App und einer React-Native-App teilen?

Geschäftslogik, Hooks, API-Clients und Typen lassen sich leicht teilen. UI-Komponenten unterscheiden sich meist, weil Web und Mobile andere Grundbausteine nutzen, es sei denn, Sie setzen eine Schicht wie React Native Web ein.