Documentación React Native y Expo

React Native y Expo

Integre i1n con React Native y Expo utilizando el SDK de i1n o el modo Bridge con i18n-js.

Configuración

Ejecute i1n init en su proyecto de React Native. La CLI detecta automáticamente expo-localization si está presente y configura el formato JSON en el directorio locales/.

Puede utilizar el SDK de i1n en modo independiente o conectarlo a i18n-js mediante el modo Bridge.

Modo independiente

Utilice el SDK de i1n directamente con expo-localization para la detección de la configuración regional del dispositivo. Inicialice con init(), cargue sus recursos y utilice t() en sus componentes.

El patrón de proveedor de React funciona de manera idéntica a los proyectos web de React. Utilice el hook useI1n() para traducciones con seguridad de tipos y cambio de idioma en tiempo de ejecución.

Modo Puente con i18n-js

Si su proyecto utiliza i18n-js, conéctelo con: registerI1n((key, params) => i18n.t(key, params)). La función t() de i1n delega en i18n-js mientras proporciona una verificación de tipos estricta y autocompletado.

i1n gestiona los archivos de traducción y la generación de tipos. i18n-js continúa encargándose de la pluralización e interpolación en tiempo de ejecución. Funciona tanto con flujos de trabajo de Expo gestionados como con los nativos (bare).

Implementación

Ejecute i1n pull antes de compilar su aplicación. Las traducciones se incluyen junto con el binario de la aplicación.

Para actualizaciones de traducción inalámbricas (OTA), combine i1n pull con su estrategia de actualización OTA (por ejemplo, Expo Updates o 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))

Relacionado