Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Bridging in React Native erklärt

Bridging in React Native

~8 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

Die "Bridge" ist der Mechanismus, über den Ihr JavaScript-Code mit dem nativen iOS-/Android-Code kommuniziert – ein zentrales Konzept, um zu verstehen, warum React Native manche Dinge anders handhabt als eine normale Webseite.

1. Beschreibung

JavaScript und der native Code laufen in getrennten Umgebungen und können sich nicht direkt gegenseitig aufrufen wie normale Funktionsaufrufe. Die Bridge überträgt stattdessen SERIALISIERTE Nachrichten (als JSON) ASYNCHRON zwischen beiden Seiten – ein Klick-Event auf der nativen Seite wird zu einer JSON-Nachricht, die zum JS-Thread geschickt wird; ein setState()-Aufruf, der das UI ändern soll, wird umgekehrt zu einer JSON-Nachricht an die native Seite.

2. Kurzes Beispiel: was "über die Bridge geht"

function App() {
  return (
    <TouchableOpacity onPress={() => console.log('Geklickt!')}>
      <Text>Drücken</Text>
    </TouchableOpacity>
  );
}
// 1. Der Touch wird nativ erkannt (Native-Thread)
// 2. Eine Nachricht "Touch-Event aufgetreten" geht über die Bridge zum JS-Thread
// 3. Der JS-Thread führt onPress aus, console.log läuft im JS-Thread

Die neue Architektur: JSI statt Bridge

Seit React Native 0.68+ gibt es die "New Architecture" mit dem JSI ("JavaScript Interface") – statt asynchroner JSON-Nachrichten können JavaScript und native Seite sich jetzt teilweise DIREKT und SYNCHRON aufrufen, ähnlich wie ein direkter Funktionsaufruf. Das reduziert Verzögerungen bei sehr performance-kritischen Interaktionen (z. B. Gesten-Animationen). Für die allermeisten Alltagsanwendungen (auch alle Beispiele in dieser Referenz) bleibt der konzeptionelle Unterschied für Sie als Entwickler unsichtbar – Sie schreiben denselben React-Code.

Achtung: Die Bridge/JSI direkt selbst zu benutzen, ist nur relevant, wenn Sie eigene NATIVE Module in Swift/Kotlin schreiben (z. B. Zugriff auf eine spezielle Hardware-Funktion, die kein existierendes Paket abdeckt) – für alle Themen in dieser Referenz genügt vorhandener JavaScript-Code.