Documents React Native et Expo

React Native et Expo

Intégrez i1n avec React Native et Expo en utilisant le SDK i1n ou le mode Bridge avec i18n-js.

Configuration

Exécutez i1n init dans votre projet React Native. L'interface de ligne de commande détecte automatiquement expo-localization si présent et configure le format JSON dans le répertoire locales/.

Vous pouvez utiliser le SDK i1n en mode autonome ou le connecter à i18n-js via le mode Bridge.

Mode autonome

Utilisez le SDK i1n directement avec expo-localization pour la détection de la locale de l'appareil. Initialisez avec init(), chargez vos ressources et utilisez t() dans vos composants.

Le modèle de fournisseur React fonctionne de manière identique aux projets web React. Utilisez le hook useI1n() pour des traductions typées et le changement de locale à l'exécution.

Mode Pont avec i18n-js

Si votre projet utilise i18n-js, connectez-le avec : registerI1n((key, params) => i18n.t(key, params)). La fonction i1n t() délègue à i18n-js tout en fournissant une vérification de type stricte et une complétion automatique.

i1n gère les fichiers de traduction et la génération de types. i18n-js continue de gérer la pluralisation et l'interpolation à l'exécution. Fonctionne avec les flux de travail React Native gérés par Expo et les flux de travail React Native nus.

Déploiement

Exécutez i1n pull avant de compiler votre application. Les traductions sont incluses dans le binaire de l'application.

Pour les mises à jour de traduction sans fil, combinez i1n pull avec votre stratégie de mise à jour OTA (par exemple, Expo Updates ou 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))

Associé