Wie React Native funktioniert: JS-Thread, Bridge, native Views
Funktionsweise von React Native
~9 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Wie wird aus JavaScript-Code, den Sie schreiben, ein echtes iOS- oder Android-UI-Element? Dieses Thema erklärt den Weg vom JSX bis zum Bildschirm, ohne dass Sie später jeden Baustein einzeln blind anwenden müssen.
1. Beschreibung
React Native führt Ihren JavaScript-Code NICHT in einer Webview aus (das wäre eine "Hybrid-App", z. B. mit Cordova/Ionic) – stattdessen läuft er in einer eigenen JavaScript-Engine (historisch JavaScriptCore, inzwischen meist Hermes) NEBEN der eigentlichen nativen App, und beide Seiten kommunizieren asynchron über eine Nachrichtenschicht (die "Bridge", siehe eigenes Thema). Das UI selbst besteht aus ECHTEN nativen Komponenten (UIView unter iOS, android.view.View unter Android) – keine gerenderten HTML-Elemente.
Die drei wichtigsten Threads
- JS-Thread: führt Ihren React-Native-JavaScript-Code aus – Komponenten-Logik, State-Updates, Event-Handler.
- Native-(UI-)Thread: zeichnet die eigentlichen nativen Views und verarbeitet Touch-Events auf iOS/Android.
- Shadow-Thread: berechnet das Layout (Flexbox-Positionierung) über die Yoga-Layout-Engine, bevor Views tatsächlich gezeichnet werden.
Vom JSX zum Bildschirm: der Ablauf
- Sie schreiben JSX (
<View><Text>Hallo</Text></View>). - Babel übersetzt JSX zur Entwicklungszeit in normale JavaScript-Funktionsaufrufe.
- React berechnet einen virtuellen Baum aus Komponenten (nicht direkt UI-Elemente).
- Dieser Baum wird über die Bridge an die native Seite gesendet.
- Die native Seite erzeugt daraus ECHTE
UIView-/View-Objekte und zeigt sie an.
Tipp: Genau WEIL das Ergebnis echte native Views sind (nicht HTML in einer Webview), fühlt sich eine React-Native-App wie eine "richtige" App an – Scroll-Verhalten, Animationen und Tastatur-Handling nutzen dieselben nativen Mechanismen wie eine komplett in Swift/Kotlin geschriebene App.