Comme l'utilisation des mobiles continue d'exploser à l'échelle mondiale, les utilisateurs s'attendent à ce que les applications se sentent locales, du texte qu'ils lisent au formatage des numéros et des dates. Réagissez Native, le cadre multiplateforme développé par Meta, permet aux développeurs de construire des applications mobiles performantes pour iOS et Android à partir d'une base de code unique. L'ajout d'un support multilingue à ces applications nécessite toutefois une planification minutieuse et un outillage approprié. Ce guide complet vous permet de découvrir les fondamentaux de la localisation dans React Native, introduit les bibliothèques les plus populaires et fournit des étapes pratiques pour créer une application multilingue prête à la production.

Localisation vs internationalisation: définition des termes

Avant de plonger dans le code, il est important de distinguer deux concepts connexes. L'internationalisation (i18n) est le processus de conception de votre application afin qu'elle puisse être adaptée à différentes langues et régions sans nécessiter de modifications techniques. Elle consiste à extraire du texte, en utilisant le formatage local pour les dates et les numéros et en planifiant différents systèmes d'écriture. Localisation (l10n) est l'adaptation réelle de votre application à une langue ou région donnée – en traduisant des chaînes, en adaptant la disposition pour les scripts de droite à gauche et en manipulant des conventions locales.

React Native elle-même ne fournit que quelques API de base pour la détection locale (p. ex., du module ), mais la localisation complète nécessite une bibliothèque dédiée pour gérer les ressources de traduction, le changement de langue et le formatage. L'écosystème offre plusieurs options matures, chacune avec ses propres forces.

Bibliothèques de localisation de base pour les autochtones réagissent

Trois bibliothèques dominent le paysage de localisation autochtone React. Comprendre leurs rôles et comment ils se complètent est la première étape vers une mise en oeuvre robuste.

Réaction—i18suivant

Construit sur le i18next, l'un des cadres d'internationalisation les plus populaires pour JavaScript, est une solution complète pour la gestion de la traduction. Il fournit des crochets Réact (), des composants de commande supérieure et un composant de traduction qui se re-relève automatiquement lorsque la langue change. La bibliothèque prend en charge le spatio-noms (divisant les traductions en fichiers séparés), l'interpolation, la pluralité, les traductions spécifiques au contexte et la détection sophistiquée des langues.

Les principaux avantages de responsive‐i18next incluent son riche écosystème de plugins et la capacité de charger des traductions sur demande (les fractionner par route ou par fonction). Il fonctionne également en toute transparence avec le rendu côté serveur et peut être utilisé dans des parties non-réaction de votre code natif Android ou iOS via le moteur i18next sous-jacent.

Réaction-native-localisation

Alors que responsive‐i18next gère la logique de traduction, traite des informations locales côté appareil. Il expose la localisation, le fuseau horaire, l'unité de température, le système de mesure et le type de calendrier actuels de l'utilisateur. Ces valeurs sont critiques pour formater correctement les nombres, les dates et les devises. Parce que les applications React Native fonctionnent sur deux plateformes différentes, l'accès à ces informations nativement utilisé pour être encombrant; enveloppe les API natives et les rend disponibles en tant qu'objet JavaScript simple.

Vous pouvez combiner réact‐native‐localize avec réact‐i18next en alimentant la langue détectée dans l'initialisation i18next. Cela vous donne une expérience sans faille, pilotée par appareil : lorsque l'utilisateur change de langue, l'application passe automatiquement à la traduction correspondante.

Les

Pour les petits projets ou développeurs qui préfèrent une approche légère, offre une API minimaliste. Elle fournit des recherches de traduction simples, des règles de pluralité et un formatage de date/numéro. Cependant, elle manque de détection de langue intégrée et ne s'intègre pas au cycle de vie des composants de React. De nombreuses équipes l'utilisent comme module d'utilité pour les traductions non-UI (p. ex., dans les réducteurs Redux ou les helpers API) tout en se fiant sur responsive‐i18next pour les composants.

Une alternative émergente est , qui est inclus dans l'écosystème Expo. Il reflète les capacités de réaction-native-localiser mais est adapté pour les workflows gérés par Expo. Si vous construisez avec Expo, est souvent la façon la plus facile d'obtenir des données locales.

Bâtir une application multilingue: Mise en œuvre étape par étape

Passons par le processus d'ajout de localisation à un nouveau projet React Native en utilisant la pile la plus courante : responsive‐i18next pour les traductions et responsive‐native‐localize pour la détection locale des appareils.

1. Installer les dépendances

Exécutez la commande suivante pour ajouter les bibliothèques et leurs pairs :

npm install react-i18next i18next react-native-localize

Si vous utilisez Expo, installez au lieu de et ajoutez les paquets et .

2. Configurer i18suivant

Créez un fichier (ou pour TypeScript) dans la racine de votre projet. Ce fichier va configurer l'instance i18next, importer des ressources de traduction et intégrer le détecteur local.

Voici une configuration typique :

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;

Cette configuration utilise le [réaction-native-localize] pour récupérer le langage primaire de l'appareil.

3. Créer des fichiers JSON de traduction

Dans un dossier , créez des fichiers JSON séparés pour chaque langue prise en charge. Par exemple:

{
 "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"
 }
}

Notez le suffixe – i18next gère automatiquement les formulaires pluriels en fonction du nombre fourni lors de l'appel à la fonction de traduction.

4. Enveloppez l'application avec un fournisseur i18next

Dans votre composant racine (p. ex., ), importez la configuration i18n et enveloppez tout avec le (facultatif mais recommandé pour la testabilité). Dans la plupart des cas, importez simplement est suffisant parce que l'enregistre dans le contexte de React.

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. Utiliser les traductions à l'intérieur des composants

À l'intérieur de tout composant fonctionnel, utilisez le crochet pour accéder à la fonction :

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;

La fonction réévalue automatiquement lorsque la langue change, et le composant se rallume grâce à l'intégration du contexte React.

Caractéristiques avancées de localisation

Au-delà de la simple traduction à valeur clé, les applications de production nécessitent une prise en charge pour la pluralité, le formatage de la date/numéro et l'adaptation de la mise en page de droite à gauche (RTL).

Pluralisation et contexte

i18next utilise le format de message de l'unité de mesure pour gérer les règles plurielles. L'exemple ci-dessus avec et démontre le cas le plus simple. Pour les langues avec des règles plurielles plus complexes (par exemple, arabe, russe), vous pouvez fournir des formulaires supplémentaires comme , , ou utiliser la variable à l'intérieur de l'interpolation.

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

Pour formater les dates et les numéros, vous pouvez utiliser l'API (disponible dans les moteurs JavaScript modernes) ou utiliser une bibliothèque comme Luxon[ ou date-fns. Un modèle commun est de créer des fonctions d'utilité qui acceptent une chaîne locale et de retourner des valeurs formatées, puis les utiliser avec vos traductions.

Soutien à la mise en page du droit à gauche (RTL)

React Native a intégré le support des langues RTL comme l'arabe et l'hébreu. Activez-le en définissant les directions et dans votre fichier racine, en fonction de la langue courante. Lorsque l'utilisateur passe à une locale RTL, toutes les directions flexbox basculent automatiquement. Cependant, vous devez vous assurer que vos styles utilisent des propriétés logiques (p. ex. ] au lieu de ) pour éviter les directions codées en dur.

import { I18nManager } from 'react-native';

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

Sachez que le basculement RTL nécessite un redémarrage complet de l'application sur certaines versions Android. Vous pouvez avertir l'utilisateur ou implémenter un redémarrage en utilisant .

Meilleures pratiques pour la localisation de la production–Prêt

Obtenir les bases de travail est une chose; construire un système de localisation durable et évolutive est une autre. Les meilleures pratiques suivantes vous permettront de gagner du temps et d'éviter les bogues frustrants.

Organisez les fichiers de traduction par fonction

Les grandes applications devraient éviter un seul fichier JSON monolithique par langue. Utilisez plutôt la fonctionnalité namespace d'i18next pour diviser les traductions par fonction ou écran. Par exemple, , . Cela maintient les fichiers petits et facilite la fusion des requêtes de tirage. Chargez les espaces de noms sur demande avec l'appel crochet .

Toujours fournir une langue de repli

Votre application ne devrait jamais s'écraser car une clé de traduction est manquante. Définissez une langue de repli (généralement l'anglais) qui contient toutes les clés utilisées dans l'application. Si une clé n'existe pas dans la langue de l'utilisateur, i18next affichera la valeur de repli. Ceci est particulièrement important lors du développement précoce lorsque toutes les traductions ne sont pas terminées.

Utiliser une convention sur la désignation des noms clés

Adopter une structure cohérente pour vos clés de traduction. Les conventions communes comprennent l'utilisation de la notation de points (, ) ou l'imitation de la hiérarchie des composants ([). Les clés doivent être suffisamment descriptives pour que vous puissiez localiser leur utilisation rapidement.

Traductions de texte séparées du contenu

Tout ce qui apparaît dans l'interface utilisateur n'est pas une chaîne statique. Le contenu généré par l'utilisateur, les noms de produits ou les données dynamiques ne doivent pas être transmis par la fonction , mais ils ont besoin de leur propre logique de stockage et de formatage.

Automatiser les flux de travail de la traduction

Pour les équipes avec des traducteurs professionnels, envisagez de vous intégrer à un système de gestion de la traduction (TMS) comme Lokalise, Crowdin, ou Phrase. Ces plateformes se connectent à votre dépôt de code, poussent les chaînes de source mises à jour et retirent les fichiers traduits. Cette automatisation empêche les traductions discontinues et réduit l'effort manuel.

Essais d'applications localisées

Tester des applications multilingues nécessite plus que de simplement vérifier que le texte change. Vous devez vérifier que tous les éléments s'ajustent correctement, que les mises en page ne se cassent pas, et que le formatage des données correspond à la localité de l'utilisateur.

Simuler différentes zones sur les simulateurs

Xcode et Android Studio vous permettent de définir la région et la langue de l'appareil. Pour iOS, vous pouvez modifier la langue dans les options de l'exécution du schéma; pour Android, vous pouvez créer un nouvel émulateur avec une locale personnalisée. Testez chaque langue prise en charge sur les deux plateformes pour découvrir des quirks spécifiques à la plate-forme (par exemple, les sélectionneurs de dates peuvent ne pas respecter votre locale choisie sur les versions Android plus anciennes).

Recherches sur la traduction des tests unitaires

Utilisez un cadre de test comme Jest pour charger la configuration et appeler pour chaque langue. Une clé manquante apparaîtra comme dans la sortie, ce qui la rendra facile à détecter.

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);
 });
});

Essai de régression visuelle

Utilisez des tests d'instantanés (par exemple, des instantanés Jest avec différentes configurations locales) ou des outils de régression visuelle dédiés comme Percy pour attraper la rupture de l'interface utilisateur. Simulez le mode RTL en forçant dans votre environnement de test.

Considérations relatives aux performances

Localisation ne devrait pas compromettre les performances de l'application. Voici quelques conseils pour garder votre application snappy.

  • Load translations lazly: Utilisez l'option de i18next ou des importations dynamiques pour récupérer les fichiers de langue seulement lorsque nécessaire.
  • Éviter de réenregistrer les ressources:[ Initialiser votre instance i18n une fois au démarrage de l'application. Changer la langue ne devrait pas nécessiter de recharger tous les fichiers de traduction du réseau.
  • Mesure des valeurs formatées:[ Si vous effectuez un formatage coûteux de date ou de nombre dans une boucle de rendu, enveloppez le résultat dans pour éviter les recalculs sur chaque rendu.
  • Considérer en utilisant un cache de traduction:[ Pour les applications qui permettent le changement de langue hors ligne, stocker les traductions dans AsyncStorage ou une base de données locale similaire.

Conclusion

La création d'une application Native React multilingue implique plus que de simples échanges de chaînes. Elle nécessite une architecture réfléchie qui gère la détection locale des périphériques, la gestion de la traduction, la pluralité, le formatage numéro/date et la mise en page RTL. En choisissant une bibliothèque robuste comme responsive-i18next associée à responsive-native-localize, vous pouvez construire une expérience qui se sent native aux utilisateurs dans tous les coins du monde.

Rappelez-vous que la localisation est un processus continu – les traductions ont besoin de mises à jour, de nouvelles langues peuvent être ajoutées et les nuances culturelles doivent être respectées.Investir dans l'outillage tôt, établir des flux de travail clairs avec votre équipe de traduction, et tester sans relâche.

Pour plus de détails, consultez la documentation officielle de react‐i18next et react‐native‐localize. Vous trouverez peut-être aussi la liste des plugins i18next utile pour étendre la fonctionnalité.