Créer un système de soutien multilingue dans les applications autochtones réagissent

Créer un système de soutien multi-langues dans les applications autochtones de réaction

La construction d'applications mobiles qui supportent plusieurs langues n'est plus facultative, ce qui constitue une exigence pour toute application visant l'adoption mondiale. React Native, avec ses capacités multiplateformes, offre plusieurs approches robustes pour mettre en œuvre l'internationalisation (i18n) et la localisation (l10n). Cet article fournit un guide approfondi pour l'architecture d'un système de soutien multi-langues dans React Native, couvrant les bibliothèques, la configuration, la commutation dynamique, la gestion de règles plurielles complexes, les ajustements de la disposition de droite à gauche (RTL) et les meilleures pratiques de performance.

Concepts fondamentaux de la localisation

La localisation va au-delà de la simple traduction de texte. Elle implique le formatage des nombres, des dates, des devises, la gestion de la direction de texte (LTR vs RTL), la pluralité, les formulaires de genre, et même l'ajustement des mises en page d'interface pour adapter les chaînes traduites.

Principaux défis dans Réagir Native

Choisir la bibliothèque de droite i18n

Bien que plusieurs bibliothèques existent, react-i18next est le choix le plus populaire et le plus complet des fonctionnalités pour React Native. Construit sur i18next, il fournit des crochets, des HOCs et des composants pour une intégration sans faille. Les alternatives incluent i18n-js (simple, mais moins puissant) et react-native-localize[ (pour la détection locale, pas la traduction).

Installation des bibliothèques centrales

Commencez par installer les paquets requis :

npm install react-i18next i18next i18next-http-backend react-native-localize

Ajoute en option i18next-browser-languagedetector pour la détection automatique de la langue en fonction des préférences de l'appareil. Notez que vous devrez peut-être relier des modules natifs pour réactivité-native-localize (en liaison automatique dans RN 0.60+).

Mise en place de l'instance i18n

Créer un fichier de configuration, par exemple :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import en from './translations/en.json';
import es from './translations/es.json';
import fr from './translations/fr.json';

const resources = { en: { translation: en }, es: { translation: es }, fr: { translation: fr } };

const detectionOptions = {
 order: ['localStorage', 'navigator'],
 caches: ['localStorage'],
};

i18n
 .use(initReactI18next)
 .use(require('i18next-browser-languagedetector').default) // for RN, you may replace with custom detector
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 detection: {
 // For RN, we'll override detection manually (see below)
 },
 });

// Detect device language at startup
const detectLanguage = () => {
 const locales = RNLocalize.getLocales();
 if (locales && locales.length > 0) {
 const langCode = locales[0].languageCode;
 const supportedLanguages = Object.keys(resources);
 const lang = supportedLanguages.includes(langCode) ? langCode : i18n.options.fallbackLng[0];
 i18n.changeLanguage(lang);
 }
};
detectLanguage();

// Listen to app focus for locale changes
export default i18n;

En utilisant réaction-native-localize[, votre application respecte les paramètres régionaux de l'appareil. La fonction fonctionne une fois et définit la langue initiale. Pour les mises à jour continues (si l'utilisateur change de langue de l'appareil pendant que l'application est ouverte), vous pouvez vous abonner à modifications.

Structure des fichiers de traduction

Organisez vos traductions dans les fichiers JSON imbriqués par langue et espaces de noms. Exemple pour :

{
 "common": {
 "welcome": "Welcome",
 "greeting": "Hello, {{name}}!"
 },
 "home": {
 "title": "Home Screen",
 "description": "This is a multi-language React Native app."
 },
 "errors": {
 "network": "Network error. Please try again."
 }
}

L'utilisation d'espaces de noms (p. ex. , ) aide à gérer les grandes applications et permet le chargement paresseux des morceaux de traduction.

Utilisation des traductions dans les composants

L'utilisationHook de traduction

Dans tout composant fonctionnel:

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
 const { t, i18n } = useTranslation('common');
 return (
 
 {t('welcome')}
 {t('greeting', { name: 'John' })}
  i18n.changeLanguage('es')}>
 Switch to Spanish
 
 
 );
};

La fonction t interpole les variables et gère les pluriels. Pour changer de langage, appelez – cela déclenche un retour de tous les composants souscrits.

Utilisation du composant Trans

Pour les chaînes complexes avec des composants de balisage ou de React intégrés :

import { Trans } from 'react-i18next';
// In translations: "welcome_html": "Welcome, {user}!"

 Welcome, {user}!

Gestion des pratiques, des genres et du contexte

i18next supporte les règles plurielles avancées hors de la boîte. Définissez les touches avec suffixe ou utilisez contexte. Exemple :

{
 "item": "{{count}} item",
 "item_plural": "{{count}} items",
 "item_other": "{{count}} items"
}

Utilisation : sélectionne automatiquement le bon formulaire en fonction de la localisation. Le genre et les autres contextes peuvent être traités via l'option .

Changement de langage dynamique et persistance

Pour conserver la préférence de langue de l'utilisateur, entreposez la langue sélectionnée dans AsyncStorage (ou react-native-mmkv) et chargez-la au démarrage de l'application.

import AsyncStorage from '@react-native-async-storage/async-storage';

const languageDetector = {
 type: 'languageDetector',
 async: true,
 detect: async (callback) => {
 const storedLang = await AsyncStorage.getItem('user-language');
 callback(storedLang || 'en');
 },
 init: () => {},
 cacheUserLanguage: async (lng) => {
 await AsyncStorage.setItem('user-language', lng);
 },
};

i18n.use(initReactI18next).use(languageDetector).init({
 fallbackLng: 'en',
 resources,
 interpolation: { escapeValue: false },
});

Maintenant, lorsque l'utilisateur change de langue, la préférence est sauvegardée et automatiquement restaurée lors du prochain lancement.

Soutien du droit au gauche (RTL)

React Native prend en charge RTL via le module . Lorsque la langue est arabe, hébreu ou persan, force RTL:

import { I18nManager } from 'react-native';

const changeLanguage = async (lng) => {
 await i18n.changeLanguage(lng);
 const isRTL = i18n.dir(lng) === 'rtl';
 I18nManager.forceRTL(isRTL);
 // On Android, you may need to restart the app for full RTL effect
};

Pour une expérience complète de RTL, utilisez et avec soin. Envisagez d'utiliser une bibliothèque comme [réaction-native-restyle[ pour une direction thématique.

Chargement des traductions depuis un serveur (en direct)

Pour les applications qui doivent ajouter des langues sans mises à jour de l'app store, récupérer la traduction JSONs à partir d'un moteur de recherche. Utilisez i18next-http-backend avec un moteur de recherche personnalisé pour React Native:

import HttpBackend from 'i18next-http-backend';

i18n.use(HttpBackend).init({
 backend: {
 loadPath: 'https://your-api.com/locales/{{lng}}/{{ns}}.json',
 },
 fallbackLng: 'en',
 ns: ['common', 'home'],
 defaultNS: 'common',
});

Cache les traductions récupérées dans AsyncStorage pour éviter les requêtes répétées. Combinez avec un mécanisme de version pour télécharger uniquement les fichiers mis à jour.

Considérations relatives aux performances

Test de fonctionnalité multi-langue

Ecrire des tests unitaires pour vos fichiers de traduction : assurez-vous qu'aucune clé manquante, tous les supports sont fournis, et les pluriels fonctionnent correctement. Utilisez avec une instance mock i18n. Pour les tests d'intégration, simulez les commutateurs de langage et vérifiez que les composants affichent le texte correct.

Récapitulation des pratiques exemplaires

Avec des bibliothèques comme react-i18next et react-native-localize[, vous pouvez construire un système robuste qui s'échelle avec votre base d'utilisateurs. Pour plus de détails, consultez la documentation officielle react-i18next, le i18next core guide[ et le react-native-localize archive. Commencez petit, itéré, et votre application parlera le langage de l'utilisateur – littéralement.