Anwendungen zu erstellen, die die Muttersprache des Benutzers sprechen, ist kein Luxus mehr – es ist eine Geschäftsnotwendigkeit. Da die mobile Nutzung weltweit weiter explodiert, erwarten die Benutzer, dass sich Apps lokal fühlen, vom Text, den sie lesen, bis hin zur Art und Weise, wie Zahlen und Daten formatiert werden. React Native, das von Meta entwickelte plattformübergreifende Framework, ermöglicht es Entwicklern, performante mobile Apps für iOS und Android aus einer einzigen Codebasis zu erstellen. Das Hinzufügen von mehrsprachiger Unterstützung für solche Apps erfordert jedoch eine sorgfältige Planung und die richtige Werkzeugerstellung. Dieser umfassende Leitfaden führt Sie durch die Grundlagen der Lokalisierung in React Native, stellt die beliebtesten Bibliotheken vor und bietet umsetzbare Schritte zur Erstellung einer produktionsbereiten mehrsprachigen Anwendung.

Lokalisierung vs. Internationalisierung: Definition der Begriffe

Bevor wir uns mit Code beschäftigen, ist es wichtig, zwischen zwei verwandten Konzepten zu unterscheiden. Internationalisierung (i18n) ist der Prozess, bei dem Ihre Anwendung so gestaltet wird, dass sie an verschiedene Sprachen und Regionen angepasst werden kann, ohne dass technische Änderungen erforderlich sind. Es beinhaltet das Extrahieren von Text, die Verwendung von lokal-bewussten Formatierungen für Daten und Zahlen und die Planung für verschiedene Schreibsysteme. Lokalisierung (l10n) ist die tatsächliche Anpassung Ihrer App an eine bestimmte Sprache oder Region - das Übersetzen von Strings, das Anpassen des Layouts für Rechts-nach-Links-Skripte und das Bearbeiten lokaler Konventionen.

React Native selbst bietet nur wenige grundlegende APIs für die Lokalerkennung (z. B. aus dem Modul ), aber die vollständige Lokalisierung erfordert eine dedizierte Bibliothek zur Verwaltung von Übersetzungsressourcen, Sprachumschaltung und Formatierung.

Core Localization Libraries für React Native

Drei Bibliotheken dominieren die Lokalisierungslandschaft von React Native. Ihre Rollen zu verstehen und wie sie sich ergänzen, ist der erste Schritt zu einer robusten Implementierung.

respond‐i18next

Aufbauend auf i18next, einem der beliebtesten Internationalisierungs-Frameworks für JavaScript, ist eine Komplettlösung für Übersetzungsmanagement. Es bietet React-Hooks (), Komponenten höherer Ordnung und eine Übersetzungskomponente, die automatisch neu gerendert wird, wenn sich die Sprache ändert. Die Bibliothek unterstützt Namespacing (Aufteilung von Übersetzungen in separate Dateien), Interpolation, Pluralisierung, kontextspezifische Übersetzungen und anspruchsvolle Spracherkennung.

Zu den Hauptvorteilen von react‐i18next gehören das reichhaltige Plugin-Ökosystem und die Möglichkeit, Übersetzungen auf Abruf zu laden (aufgeteilt nach Route oder Funktion), es funktioniert auch nahtlos mit dem serverseitigen Rendering und kann über die zugrunde liegende i18next-Engine in nicht-React-Teilen Ihres Android- oder iOS-nativen Codes verwendet werden.

React-Native-Lokalisierung

Während respond‐i18next die Übersetzungslogik handhabt, befasst sich mit geräteseitigen Lokale-Informationen. Es zeigt die aktuelle Lokale, Zeitzone, Temperatureinheit, Messsystem und Kalendertyp des Benutzers. Diese Werte sind entscheidend für die korrekte Formatierung von Zahlen, Daten und Währungen. Da React Native Apps auf zwei verschiedenen Plattformen laufen, war der Zugriff auf diese Informationen früher umständlich; umhüllt die nativen APIs und stellt sie als einfaches JavaScript-Objekt zur Verfügung.

React-native-localize kann mit React-i18next kombiniert werden, indem die erkannten Sprachen in die i18next Initialisierung eingespeist werden. Das ermöglicht Ihnen ein nahtloses, gerätegesteuertes Erlebnis: Wenn der Nutzer die Sprache seines Telefons wechselt, wechselt die App automatisch zur entsprechenden Übersetzung.

i18n‐js

Für kleinere Projekte oder Entwickler, die einen leichtgewichtigen Ansatz bevorzugen, bietet eine minimalistische API. Es bietet einfache Übersetzungs-Lookups, Pluralisierungsregeln und Formatierung von Datum/Zahlen. Es fehlt jedoch an eingebauter Spracherkennung und ist nicht in den Komponentenlebenszyklus von React integriert. Viele Teams verwenden es als Hilfsmodul für Übersetzungen außerhalb der Benutzeroberfläche (z. B. in Redux-Reduzierern oder API-Helfern), während sie sich auf react-i18next für Komponenten verlassen.

Eine neue Alternative ist , die in das Expo-Ökosystem integriert ist. Sie spiegelt die Möglichkeiten der React-Native-Lokalisierung wider, ist aber auf die von Expo verwalteten Workflows zugeschnitten. Wenn Sie mit Expo bauen, ist oft der einfachste Weg, um lokale Daten zu erhalten.

Aufbau einer mehrsprachigen App: Schritt-für-Schritt-Implementierung

Lassen Sie uns den Prozess des Hinzufügens von Lokalisierung zu einem neuen React Native-Projekt mit dem gängigsten Stack durchgehen: react‐i18next für Übersetzungen und react‐native‐localize für die Lokalisierung von Geräten.

1. Abhängigkeiten installieren

Führen Sie den folgenden Befehl aus, um sowohl Bibliotheken als auch deren Peers hinzuzufügen:

npm install react-i18next i18next react-native-localize

Wenn Sie Expo verwenden, installieren Sie anstelle von und fügen Sie die und Pakete hinzu.

2. Konfiguration von i18next

Erstellen Sie eine -Datei (oder für TypeScript) in der Stammversion Ihres Projekts.Diese Datei richtet die i18next-Instanz ein, importiert Übersetzungsressourcen und integriert den Locale-Detektor.

Unten ist eine typische Konfiguration:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { getLocales } from 'react-native-localize';

import en from './locales/en.json';
import es from './locales/es.json';
import fr from './locales/fr.json';
import de from './locales/de.json';

// Detect device language
const languageDetector = {
 type: 'languageDetector',
 async: false,
 detect: () => {
 const locales = getLocales();
 return locales[0]?.languageCode ?? 'en';
 },
 init: () => {},
 cacheUserLanguage: () => {},
};

i18n
 .use(languageDetector)
 .use(initReactI18next)
 .init({
 resources: {
 en: { translation: en },
 es: { translation: es },
 fr: { translation: fr },
 de: { translation: de },
 },
 fallbackLng: 'en',
 interpolation: {
 escapeValue: false, // React already safes from XSS
 },
 });

export default i18n;

Diese Konfiguration verwendet die FLT:16 von respond-native-localize, um die primäre Gerätesprache abzurufen. Die Fallback-Sprache stellt sicher, dass fehlende Übersetzungen die Benutzeroberfläche nicht stören.

3. Erstellen von Übersetzungs-JSON-Dateien

Erstellen Sie in einem -Ordner separate JSON-Dateien für jede unterstützte Sprache, zum Beispiel:

{
 "welcome": "Welcome",
 "greeting": "Hello, {{name}}!",
 "notifications": {
 "new_message": "You have {{count}} new message",
 "new_message_plural": "You have {{count}} new messages"
 }
}

{
 "welcome": "Bienvenido",
 "greeting": "¡Hola, {{name}}!",
 "notifications": {
 "new_message": "Tienes {{count}} mensaje nuevo",
 "new_message_plural": "Tienes {{count}} mensajes nuevos"
 }
}

Beachten Sie, dass das Suffix – i18next automatisch mehrere Formulare verarbeitet, basierend auf der Anzahl, die beim Aufruf der Übersetzungsfunktion bereitgestellt wird.

4. Verpacken Sie die App mit einem i18next-Anbieter

Importieren Sie in Ihrer Root-Komponente (z. B. ) die i18n-Konfiguration und wickeln Sie alles mit (optional, aber zur Testbarkeit empfohlen) ein. In den meisten Fällen genügt es, einfach zu importieren, weil es mit dem Kontext von React registriert.

import React from 'react';
import { SafeAreaView } from 'react-native';
import './i18n'; // Ensure i18n is initialized before any component
import MainScreen from './screens/MainScreen';

const App = () => (
 <SafeAreaView style={{ flex: 1 }}>
 <MainScreen />
 </SafeAreaView>
);

export default App;

5. Verwenden Sie Übersetzungen in Komponenten

Innerhalb einer beliebigen Funktionskomponente, verwenden Sie den Hook, um auf die Funktion zuzugreifen:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';

const MainScreen = () => {
 const { t, i18n } = useTranslation();

 const changeLanguage = (lng) => {
 i18n.changeLanguage(lng);
 };

 return (
 <View>
 <Text>{t('welcome')}</Text>
 <Text>{t('greeting', { name: 'Maria' })}</Text>
 <Button title="Español" onPress={() => changeLanguage('es')} />
 <Button title="Français" onPress={() => changeLanguage('fr')} />
 </View>
 );
};

export default MainScreen;

Die Funktion FLT:31 wird automatisch neu bewertet, wenn sich die Sprache ändert, und die Komponente wird dank der React-Kontextintegration neu gerendert.

Erweiterte Lokalisierungsfunktionen

Neben der einfachen Schlüsselwertübersetzung benötigen Produktions-Apps Unterstützung für Pluralisierung, Datums-/Zahlenformatierung und Rechts-nach-Links-Layoutanpassung (RTL).

Pluralisierung und Kontext

i18next verwendet das Format der ICU-Nachrichten, um mit mehreren Regeln umzugehen. Das obige Beispiel mit und zeigt den einfachsten Fall. Für Sprachen mit komplexeren mehreren Regeln (z. B. Arabisch, Russisch) können Sie zusätzliche Formulare wie , oder die -Variable innerhalb der Interpolation verwenden.

// Example for Russian
{
 "unread_messages": "{{count}} непрочитанное сообщение",
 "unread_messages_few": "{{count}} непрочитанных сообщения",
 "unread_messages_many": "{{count}} непрочитанных сообщений"
}

Um Daten und Zahlen zu formatieren, können Sie entweder die -API (verfügbar in modernen JavaScript-Engines) verwenden oder sich auf eine Bibliothek wie Luxon oder date-fns verlassen. Ein gängiges Muster besteht darin, Dienstprogrammfunktionen zu erstellen, die eine Locale-Zeichenfolge akzeptieren und formatierte Werte zurückgeben und diese dann neben Ihren Übersetzungen verwenden.

React Native hat eingebaute Unterstützung für RTL-Sprachen wie Arabisch und Hebräisch. Aktivieren Sie sie, indem Sie die und in Ihrer Stammdatei basierend auf der aktuellen Sprache festlegen. Wenn der Benutzer zu einem RTL-Locale wechselt, drehen sich alle Flexbox-Richtungen automatisch um. Sie müssen jedoch sicherstellen, dass Ihre Stile logische Eigenschaften verwenden (z. B. anstelle von ), um fest codierte Richtungen zu vermeiden.

import { I18nManager } from 'react-native';

// Inside your language switch handler:
if (newLanguage === 'ar') {
 I18nManager.forceRTL(true);
} else {
 I18nManager.forceRTL(false);
}

Beachten Sie, dass das Umschalten von RTL bei einigen Android-Versionen einen vollständigen App-Neustart erfordert.

Best Practices für die produktionsbereite Lokalisierung

Die Grundlagen zum Laufen zu bringen ist eine Sache; ein wartbares, skalierbares Lokalisierungssystem zu bauen ist eine andere. Die folgenden Best Practices sparen Zeit und verhindern frustrierende Fehler.

Organisieren Sie Übersetzungsdateien nach Feature

Große Apps sollten eine einzelne monolithische JSON-Datei pro Sprache vermeiden. Verwenden Sie stattdessen die Namespace-Funktion von i18next, um Übersetzungen nach Feature oder Bildschirm aufzuteilen. Zum Beispiel , . Dadurch werden Dateien klein gehalten und das Zusammenführen von Pull-Anfragen erleichtert. Namespaces bei Bedarf mit dem -Hook-Aufruf laden.

Immer eine Fallback-Sprache bereitstellen

Wenn ein Schlüssel in der Sprache des Benutzers nicht vorhanden ist, wird i18next den Fallback-Wert anzeigen. Dies ist besonders wichtig während der frühen Entwicklung, wenn nicht alle Übersetzungen abgeschlossen sind.

Verwenden Sie eine Key Naming Convention

Die gängigen Konventionen beinhalten die Verwendung von Punktnotationen (, ) oder die Nachahmung der Komponentenhierarchie ().

Separate Textübersetzungen vom Inhalt

Nicht alles, was in der Benutzeroberfläche erscheint, ist ein statischer String. Benutzergenerierte Inhalte, Produktnamen oder dynamische Daten sollten nicht durch die Funktion FLT: 51 übertragen werden - sie benötigen eine eigene Speicher- und Formatierungslogik. Bewahren Sie Übersetzungsressourcen nur für Anwendungsetiketten, Fehler und Nachrichten auf.

Automatisieren von Übersetzungs-Workflows

Für Teams mit professionellen Übersetzern sollten Sie die Integration in ein Translation Management System (TMS) wie Lokalise, Crowdin oder Phrase in Betracht ziehen. Diese Plattformen verbinden sich mit Ihrem Code-Repository, schieben aktualisierte Quellzeichenfolgen und ziehen übersetzte Dateien zurück. Diese Automatisierung verhindert veraltete Übersetzungen und reduziert den manuellen Aufwand.

Testen lokalisierter Apps

Mehrsprachige Anwendungen zu testen erfordert mehr als nur zu überprüfen, ob sich der Text ändert. Sie müssen überprüfen, ob alle Elemente korrekt angepasst sind, dass Layouts nicht kaputt gehen und dass die Datenformatierung mit dem Gebietsschema des Benutzers übereinstimmt.

Simulieren Sie verschiedene Lokalitäten auf Simulatoren

Sowohl Xcode als auch Android Studio ermöglichen es Ihnen, die Region und Sprache des Geräts festzulegen. Für iOS können Sie die Sprache in den Ausführungsoptionen des Schemas ändern; für Android können Sie einen neuen Emulator mit einem benutzerdefinierten Gebietsschema erstellen. Testen Sie jede unterstützte Sprache auf beiden Plattformen, um plattformspezifische Macken aufzudecken (z. B. Datumsauswahl respektiert möglicherweise nicht Ihre gewählte Regionsschema bei älteren Android-Versionen).

Unit Test Translation Looks

Schreibe Unit-Tests für deine i18n-Konfiguration, um sicherzustellen, dass alle Tasten für die Basis- und Fallback-Sprachen korrekt aufgelöst werden. Verwenden Sie ein Test-Framework wie Jest, um die Konfiguration zu laden und rufen Sie für jede Sprache auf. Ein fehlender Schlüssel wird als in der Ausgabe erscheinen, wodurch er leicht zu erkennen ist.

import i18n from '../i18n';

test('all translation keys exist in English', () => {
 const keys = ['welcome', 'greeting', 'notifications.new_message'];
 keys.forEach(key => {
 expect(i18n.t(key)).not.toBe(key);
 });
});

Visuelle Regressionstests

Lange Textzeichenfolgen in Sprachen wie Deutsch oder Finnisch können zu einem Überlauf des Layouts führen. Verwenden Sie Snapshot-Tests (z. B. Jest-Snapshots mit unterschiedlichen Lokalkonfigurationen) oder dedizierte visuelle Regressionswerkzeuge wie Percy, um UI-Bruch zu erfassen. Simulieren Sie den RTL-Modus, indem Sie in Ihrer Testumgebung erzwingen.

Leistungsbetrachtungen

Lokalisierung sollte die Leistung der App nicht beeinträchtigen. Hier sind ein paar Tipps, um Ihre App bissig zu halten.

  • Übersetzungen faul laden: Verwenden Sie i18nexts Option oder dynamische Importe, um Sprachdateien nur bei Bedarf abzurufen.
  • Vermeiden Sie die erneute Registrierung von Ressourcen: Initialisieren Sie Ihre i18n-Instanz einmal beim App-Start.
  • Memoize formatierte Werte: Wenn Sie teure Datums- oder Zahlenformatierung in einer Renderschleife durchführen, wickeln Sie das Ergebnis in ein, um Neuberechnungen bei jedem erneuten Rendern zu vermeiden.
  • Betrachten Sie die Verwendung eines Übersetzungs-Caches: Für Apps, die einen Offline-Sprachwechsel ermöglichen, speichern Sie Übersetzungen in AsyncStorage oder einer ähnlichen lokalen Datenbank.

Schlussfolgerung

Die Erstellung einer mehrsprachigen React Native App beinhaltet mehr als nur das Austauschen von Strings. Es erfordert eine durchdachte Architektur, die die Lokalisierung von Geräten, Übersetzungsmanagement, Pluralisierung, Zahlen-/Datumsformatierung und RTL-Layout übernimmt. Durch die Auswahl einer robusten Bibliothek wie react‐i18next gepaart mit react‐native‐localize können Sie ein Erlebnis aufbauen, das sich für Benutzer in jeder Ecke der Welt nativ anfühlt.

Denken Sie daran, dass Lokalisierung ein fortlaufender Prozess ist – Übersetzungen müssen aktualisiert werden, neue Sprachen können hinzugefügt werden und kulturelle Nuancen müssen respektiert werden. Investieren Sie frühzeitig in die Werkzeugerstellung, erstellen Sie klare Workflows mit Ihrem Übersetzungsteam und testen Sie unermüdlich. Der Aufwand zahlt sich in der Benutzerzufriedenheit, höheren Bindung und erweiterter Marktreichweite aus.

Für weitere Informationen lesen Sie bitte die offizielle Dokumentation von react‐i18next und react‐native‐localize und finden Sie vielleicht auch die i18next Plugin-Liste hilfreich, um die Funktionalität zu erweitern. Mit der richtigen Strategie kann Ihre React Native App jede Sprache fließend sprechen.