Dokumentation React Native & Expo

React Native & Expo

Integrieren Sie i1n mit React Native und Expo unter Verwendung des i1n SDK oder des Bridge-Modus mit i18n-js.

Einrichtung

Führen Sie i1n init in Ihrem React Native-Projekt aus. Die CLI erkennt expo-localization automatisch, falls vorhanden, und konfiguriert das JSON-Format im Verzeichnis locales/.

Sie können das i1n SDK im Standalone-Modus verwenden oder es über den Bridge-Modus mit i18n-js verbinden.

Eigenständiger Modus

Verwenden Sie das i1n SDK direkt mit expo-localization zur Erkennung der Gerätesprache. Initialisieren Sie mit init(), laden Sie Ihre Ressourcen und verwenden Sie t() in Ihren Komponenten.

Das React Provider-Muster funktioniert identisch zu React-Webprojekten. Verwenden Sie den useI1n()-Hook für typsichere Übersetzungen und die Laufzeit-Lokalisierungswechsel.

Bridge-Modus mit i18n-js

Wenn Ihr Projekt i18n-js verwendet, verbinden Sie es mit: registerI1n((key, params) => i18n.t(key, params)). Die i1n t()-Funktion delegiert an i18n-js und bietet gleichzeitig strenge Typüberprüfung und Autovervollständigung.

i1n verwaltet die Übersetzungsdateien und die Typengenerierung. i18n-js kümmert sich weiterhin um die Laufzeit-Pluralisierung und -Interpolation. Funktioniert sowohl mit Expo-verwalteten als auch mit Bare-React-Native-Workflows.

Bereitstellung

Führen Sie i1n pull aus, bevor Sie Ihre App erstellen. Übersetzungen werden mit der Anwendungsdatei gebündelt.

Kombinieren Sie für Over-the-Air-Übersetzungsaktualisierungen i1n pull mit Ihrer OTA-Update-Strategie (z. B. Expo Updates oder CodePush).

App.tsx
import * as Localization from 'expo-localization'
import { I18n } from 'i18n-js'

const i18n = new I18n(translations)
i18n.locale = Localization.locale

<Text>{i18n.t('welcome')}</Text>
Bridge Mode — src/i18n.ts
import { registerI1n } from 'i1n'
import { I18n } from 'i18n-js'

const i18n = new I18n(translations)
registerI1n((key, params) => i18n.t(key, params))

Verwandt