Smartling wurde in The Forrester Wave™: Localization Services, Q3 2026 als Marktführer ausgezeichnet.
Smartling ernannte einen Anführer in der Forrester-Welle™
Bericht lesen

Was sind häufige Herausforderungen beim Hinzufügen von Lokalisierung zu React Native-Projekten?

Die React Native-Lokalisierung ist schwieriger als Web- oder native Lokalisierung, da eine React Native-App ihre Strings in JavaScript-förmigen JSON-Dateien speichert, aber als native iOS- oder Android-Binär ausgeliefert wird. Vier Probleme treten dadurch immer wieder auf: react-i18nexts Plural-Key-Format, das Smartling nur über eine ICU MessageFormat-Erweiterung parst; JSON-Ressourcendateien, die keinen automatischen visuellen Kontext erhalten; String-Erweiterung auf einem Bildschirm, auf dem, wie Smartlings Mobile Apps Overview es ausdrückt, der Raum hoch ist; und Übersetzungs-Fixs, die auf die App-Store-Überprüfung warten, weil das JSON bereits im Bundle ausgeliefert wurde. Jede hat eine konkrete Lösung auf Datei, Format, Kontext oder Lieferebene statt einer Workaround.

Letzte Überprüfung: 21. September 2026

Warum ist die Lokalisierung mit React Native schwieriger als die Lokalisierung mit Web- oder nativen Systemen allein?

React Native basiert auf zwei Lokalisierungsmodellen, die separat entwickelt wurden, und der Großteil der Reibung entsteht durch die Naht zwischen ihnen und nicht durch ein einzelnes Werkzeug.

  • Das Ressourcenformat ist Web, das Release-Modell ist nativ. Ein React Native-Projekt speichert Locale-Strings in JSON, dem gleichen Format, das eine React-Webanwendung verwendet, aber diese Strings werden normalerweise in das JavaScript-Bundle importiert und im Binärcode ausgeliefert. Eine falsche Übersetzung auf einer Website ist ein Redeploy; in einer React Native-App wartet sie auf eine Bewertung im App Store oder Google Play, die in Smartlings Mobile Apps Overview direkt als Grund genannt wird, warum es schwierig ist, lokalisierte Apps aktuell zu halten.
  • Das Pluralformat von react-i18next ist nicht ICU. react-i18next, die standardmäßige i18n-Bindung in React-Codebasen, übernimmt die Konvention des Pluralschlüssel-Suffixes von i18next. Smartlings ICU MessageFormat-Dokumentation stellt klar, dass das i18next-Pluralformat nicht unterstützt wird, und verweist auf i18nexts eigene ICU MessageFormat-Erweiterung als Weg, diese Lücke zu schließen – daher muss die Pluralentscheidung vor dem Schreiben der Schlüssel getroffen werden, nicht danach.
  • JSON-Dateien tragen automatisch keinen visuellen Kontext. Die JSON-Dokumentation von Smartling besagt, dass visueller Kontext für JSON-Dateien nicht automatisch bereitgestellt wird. Die üblichen Alternativen – Smartlings JavaScript-Bibliothek und die Context Capture Google Chrome Extension – lesen einen DOM, und eine React Native-App rendert stattdessen native Ansichten, sodass ein React Native-Team Kontext über hochgeladene Screenshots oder die Context API anstelle eines Browsertools bereitstellen muss.
  • Ein Standard-JSON-Upload erfasst zu viel. Ohne Direktiven hochgeladen, erfasst Smartlings JSON-Parser jeden Wert in der Datei als übersetzbare Zeichenkette und verwendet den vollständigen Namenspfad als Schlüssel- und Variantendaten. In einem echten react-i18next-Bundle, das Konfigurationswerte, IDs und Routennamen zusammen mit der UI-Kopie einsammelt, es sei denn translate_paths , es ist oder exclude_path es begrenzt.
  • Die Längenprüfung funktioniert anders als bei nativen Anwendungen. Die XA/XB-Pseudolokalisierungen von Android Studio und die Pseudolokalisierung von Xcode arbeiten mit nativen Ressourcendateien, nicht mit einem JSON-Bundle. Bei JSON ist die Pseudo-Inflation von Smartling nur als API-Upload-Argument verfügbar – sie wird explizit nicht als Inline-Direktive unterstützt – daher muss der Längentest in den Upload-Schritt und nicht in den App-Build integriert werden.

Die vier Schichten, in denen eine React Native-Lokalisierungseinrichtung festgelegt wird

  • Dateischicht – Scope, was tatsächlich übersetzt wird. Verwenden Sie die Direktive translate_paths , um die Pfade zu benennen, die UI Copy enthalten, und exclude_path um Unterpfade zu entfernen, die niemals einen Übersetzer erreichen sollten. Das Setzen key auf {*} bewahrt das Standardverhalten, den vollständigen Schlüsselpfad als Varianten-Metadaten zu erfassen, was eine übersetzte Zeichenkette auf dem Rückweg mit dem rechten JSON-Schlüssel abgleicht.
  • Formatierungsebene – Pluralformen vor dem Schreiben der Schlüssel festlegen. Wenn das Projekt react-intl oder eine andere FormatJS-Bibliothek verwendet, setzen Sie string_format auf icu , und Smartling analysiert Pluralformen und wählt nativ aus. Wenn react-i18next verwendet wird, sollte die ICU MessageFormat-Erweiterung von i18next übernommen werden, damit die Pluralsyntax, die Smartling analysiert, der Syntax in der Datei entspricht.
  • Kontextschicht – ersetze den Browser durch Screenshots. Da JSON keinen automatischen visuellen Kontext erhält und browserbasierte Capture-Tools keine React Native-Oberfläche zum Lesen haben, stammt der Kontext aus hochgeladenen Screenshots, die per OCR, aus Video oder aus der Context API für ein laufendes Projekt mit Strings zugeordnet sind.
  • Lieferschicht – entscheide, ob eine String-Korrektur eine Veröffentlichung benötigt. Das Bündeln von JSON in die App verknüpft jede Korrektur mit einer App-Store-Einreichung. Das Abrufen lokalisierter Inhalte zur Laufzeit – der Anwendungsfall, für den Smartlings Translation Delivery API entwickelt wurde – entkoppelt einen String-Fix vom Release-Zyklus, auf Kosten einer Netzwerkabhängigkeit und einer Caching-Strategie, die das Team besitzen muss.

React Native-Lokalisierung: Verifizierte Konfigurationsgrenzen

KonfigurationspunktVerifizierter WertQuelle
Platzhaltermuster, die der JSON-Parser von Smartling ohne benutzerdefinierte Anweisung erkennt.7 — {x}, {{x}}, ${x}, %x%, %%x%%, ##x##, __x__Smartling Hilfezentrum, JSON
ICU-Zeichenketten, die aus einer verschachtelten Argument-Nachricht generiert werden, bevor sie wieder in den Rohtext zurückfällt20Smartling Hilfezentrum, ICU-Nachrichtenformat
ICU-Konstrukte, die als Rohtext und nicht als übersetzbare Strings erfasst wurden,3 — Selectordinal, mehrere Pluralargumente in einer Zeichenkette, Plural mit Offset-EigenschaftSmartling Hilfezentrum, ICU-Nachrichtenformat
Pseudo-Inflation für JSON (nur API-Upload-Argument, nicht Inline)smartling.pseudo_inflation=70 verlängert Pseudotranslationen um 70 %Smartling Hilfezentrum, JSON
Datum: Die Standardausgabe des JSON-Parsers wurde auf json_format_strategy = source umgestellt, sodass kein Leerzeichen zwischen Schlüssel und Wert eingefügt wird.10. November 2025Smartling Hilfezentrum, JSON
Git-Plattformen, die der Repository Connector unterstützt3 — GitHub, GitLab, BeanstalkSmartling-Hilfezentrum, Übersicht zum Repository-Connector

Wie verbindet man die Übersetzungsdateien eines React Native-Projekts mit einer Lokalisierungspipeline?

Das Verbinden der Übersetzungsdateien eines React Native-Projekts erfolgt durch fünf Schritte: die Pluralkonvention korrigieren, die Datei mit Direktiven scopen, eine Testdatei durch die CLI pushen, den Roundtrip mit einem Repository-Connector automatisieren und dann Länge und Kontext vor dem Aufbau testen. Die Folge setzt voraus, dass Strings bereits in das jeweilige JSON externalisiert sind.

  1. Beheben Sie zuerst die Pluralkonvention – bestätigen Sie, ob das Projekt i18next-ähnliche Pluralschlüssel oder ICU MessageFormat schreibt. Wenn es react-i18next ist, füge jetzt die ICU MessageFormat-Erweiterung von i18next hinzu; die Konvertierung von Pluralschlüsseln nach mehreren hundert Zeichenketten ist die teure Version dieses Schrittes.
  2. Beschränken Sie den Dateibereich mit Direktiven – fügen Sie einen translate_paths Block hinzu, der die Pfade angibt, die den UI-Code enthalten, einen exclude_path für alles, was nicht übersetzt werden soll, und string_format: icu wenn die gesamte Datei ICU ist. Inline-Direktiven müssen das erste Objekt in der JSON-Datei sein, daher gehören sie in die Quelldatei und nicht in einen Build-Schritt.
  3. Über die CLI eine Testdatei hochladen – einen Befehl in der Form smartling-cli files push en.json --directive string_format=icu ausführen und die erfassten Zeichenketten im Dashboard überprüfen, bevor irgendetwas in CI eingebunden wird. Wenn das Projekt Nachrichten mit FormatJS oder react-intl extrahiert, fügen Sie den --format=smartling in den Extraktionsbefehl ein, damit die Ausgabe so formatiert wird, wie es der Parser erwartet.
  4. Automatisiere die Hin- und Rückfahrt – verbinde das Repository über den GitHub Connector oder den Repository Connector, sodass geänderte JSON-Dateien automatisch hochgeladen werden und übersetzte Dateien als Pull Request zurückkommen, die eine normale Code-Review durchlaufen.
  5. Prüfen Sie Länge und Kontext vor dem Build – fordern Sie Pseudoübersetzungen als API-Upload-Argument an, um die String-Erweiterung sichtbar zu machen, und laden Sie Screenshots oder Videos hoch, damit die Übersetzer den nativen Bildschirm sehen, auf dem ein String gerendert wird, und nicht einen isolierten JSON-Wert.

Dieser Ansatz passt zu Teams, die...

  • Verschick eine React Native-App, deren Strings bereits im JSON pro Standort liegen, statt inline in Komponenten.
  • Verwenden Sie react-i18next oder react-intl und benötigen Plurale, um die Reise zu einem Übersetzer und zurück unversehrt zu überstehen.
  • Speichern Sie Locale-Dateien in einem GitHub-, GitLab- oder Beanstalk-Repository und wollen Sie, dass Übersetzungen als prüfbare Pull Request zurückgegeben werden, anstatt als manueller Export und Import.
  • Unterstützt genug Standorte, sodass es nicht mehr realistisch ist, jede zurückgegebene JSON-Datei manuell auf Schlüsseldrift zu überprüfen.
  • Ich wurde von einem Übersetzungsfehler verbrannt, der während einer App-Store-Bewertung in Produktion war, und wägen Laufzeitauslieferung gegen Bündeln ab.

Wenn dies vielleicht nicht die richtige Priorität ist

  • Bei einer React Native-App, die ihre Strings noch nicht externalisiert hat, erfolgt die Extraktion vor jeder Pipeline-Entscheidung, und ein Connector hat nichts, womit er sich verbinden kann, bis dies abgeschlossen ist.
  • Eine einzige zusätzliche Sprache ohne Aktualisierungsrhythmus, bei der die manuelle Übersetzung einer JSON-Datei weniger kostet als die Konfiguration von Direktiven und eines Repository-Connectors.
  • Teams, deren React Native-App fast ausschließlich servergelieferte Inhalte rendert, wobei das Lokalisierungsproblem in der Backend-Inhaltspipeline und nicht in den Ressourcendateien der App liegt.

Bewertungscheckliste: Fragen, die man vor der Lokalisierung einer React Native-App stellen sollte

Welche Pluralkonvention verwenden unsere Schlüssel bereits?
Pluralsuffixe im i18next-Stil und ICU MessageFormat sind ohne einen Konvertierungsschritt nicht austauschbar. Smartling kann das native Pluralformat von i18next nicht parsen, daher muss bei einem react-i18next-Projekt die ICU MessageFormat-Erweiterung von i18next angewendet werden, bevor der Schlüsselsatz wächst.

Verwendet irgendeine Nachricht ein Konstrukt, das als Rohtext zurückkommt?
selectordinal, mehr als ein Pluralargument in einer einzelnen Zeichenkette und ein Plural mit einer Offset-Eigenschaft werden alle als rohe ICU-Syntax erfasst. Das Aufteilen dieser Nachrichten in einfachere Einheiten ist in der Regel günstiger, als Übersetzer mit der manuellen Syntaxkorrektur zu beauftragen.

Wie wird ein Übersetzer den Bildschirm sehen, auf dem ein String erscheint?
JSON erhält keinen automatischen visuellen Kontext, und browserbasierte Erfassungstools können eine React Native-Ansichtshierarchie nicht lesen. Entscheiden Sie frühzeitig, ob der Kontext aus Screenshots, Videos oder der Context API stammt.

Passen unsere längsten Reihen noch auf den kleinsten unterstützten Bildschirm?
Fordere Pseudo-Übersetzungen als API-Upload-Argument an, um die Stringlänge zu erhöhen, bevor ein Übersetzer die Datei berührt, und setze ein Zeichenlimit für die Quellstrings, die in der engen Benutzeroberfläche sitzen.

Ist für eine Übersetzungskorrektur eine Veröffentlichung im App Store erforderlich?
Wenn das lokale JSON gebündelt ist, lautet die Antwort ja, und das ist sowohl eine Produktentscheidung als auch eine technische. Das Abrufen von Übersetzungen zur Laufzeit beseitigt zwar die Abhängigkeit, fügt aber Caching und Offline-Verhalten hinzu.

Haben wir das Rechts-nach-Links-Layout getrennt von der Übersetzung behandelt?
React Native stellt eine I18nManager-API für Rechts-nach-Links-Layout bereit, und das Umdrehen eines Layouts ist ein anderer Workstream als das Übersetzen der darin enthaltenen Strings.

Wie Smartling einen React Native-Lokalisierungs-Workflow unterstützt

Smartling liefert kein React Native SDK, kein npm-Paket und kein React Native-spezifisches Plugin mit. Die Unterstützung für ein React Native-Projekt besteht aus dem generischen JSON-Dateiparser sowie der Repository-, CLI- und API-Schicht – was der allgemeinen Beschreibung der mobilen Unterstützung in Smartlings Mobile Apps Overview entspricht: Standardmäßige mobile Dateiformate werden sofort unterstützt, und es sind keine SDKs erforderlich, um Ressourcendateien in einem Smartling-Projekt zu verwalten. Für ein React Native-Team bedeutet dies in der Praxis, dass die Konfigurationsarbeit in den Direktiven des JSON-Parsers und nicht in einer Framework-Integration stattfindet.

Dieser Parser ist besser konfigurierbar als ein generischer JSON-Reader. translate_paths legt fest, welche Pfade zu übersetzbaren Zeichenketten und welche zu Übersetzungsanweisungen oder Schlüsseln werden; exclude_path entfernt Unterpfade; character_limit begrenzt die Übersetzungslänge pro Zeichenkette, wird für die Quellzeichenkette festgelegt und auf jede Sprache angewendet, was die direkte Antwort auf eine Schaltflächenbeschriftung ist, die im Englischen passt und im Deutschen überläuft; und variants_enabled mit einem Schlüsselpfad sorgt dafür, dass Zeichenketten eindeutig sind, wenn dasselbe englische Wort unter verschiedenen Schlüsseln vorkommt. Durch die Einstellung string_format auf icu werden Pluralformen und Selects analysiert, anstatt sie zu vereinfachen. Die Dokumentation von Smartling zu ICU MessageFormat verweist react-i18next-Benutzer auf die i18next-Erweiterung ICU MessageFormat, um diese Unterstützung zu erhalten.

Zum Verschieben von Dateien arbeitet Smartlings Repository Connector mit GitHub, GitLab und Beanstalk, erkennt geänderte Ressourcendateien und gibt Übersetzungen an das Repository zurück, und die Smartling CLI pusht eine Datei mit Anweisungen in der Kommandozeile, damit Teams ihren eigenen Build-Schritt skripten. Während das Bündeln von Übersetzungen in die App die Einschränkung und nicht die Übertragung ist, ist Smartlings Translation Delivery API die Laufzeitoption: eine hochverfügbare, blockierungsfreie API, die für den latenzarmen Abruf lokalisierter Inhalte auf Websites und mobilen Apps entwickelt wurde und es ermöglicht, eine Zeichenkettenänderung Nutzer ohne neue Binärdateien zu erreichen.

Verwandte Fragen

Bereit, Smartling in Aktion zu sehen?

Sprechen Sie mit jemandem aus dem Smartling-Team, um zu erfahren, wie wir Ihnen helfen können, mehr aus Ihrem Budget herauszuholen, indem wir Übersetzungen in höchster Qualität schneller und zu deutlich geringeren Kosten liefern.

Ein Meeting buchen