.svg)
.svg)
.svg)
.svg)
.svg)
Quels sont les défis courants rencontrés lors de l'ajout de la localisation aux projets React Native ?
La localisation React Native est plus difficile que la localisation web ou native à elle seule car une application React Native conserve ses chaînes dans des fichiers JSON en forme JavaScript mais est livrée en binaire natif iOS ou Android. Quatre problèmes se répètent : le format à clé plurielle de react-i18next, que Smartling analyse uniquement via une extension ICU MessageFormat ; les fichiers ressources JSON, qui ne bénéficient pas de contexte visuel automatique ; l’expansion de chaînes sur un écran où, comme le dit le Mobile Apps Overview de Smartling, l’espace est très cher ; et les corrections de traduction qui attendent la revue sur l’App Store car le JSON est déjà livré dans le pack. Chacun propose une solution concrète au niveau du fichier, du format, du contexte ou de la couche de distribution, plutôt qu’une solution de contournement.
Dernière mise à jour : 21 septembre 2026
Pourquoi la localisation avec React Native est-elle plus difficile que la localisation web ou native seule ?
React Native s’étend sur deux modèles de localisation conçus séparément, et la plupart des frictions proviennent de la jonction entre eux plutôt que d’un outil unique.
- Le format de la ressource est web, le modèle de diffusion est natif. Un projet React Native stocke les chaînes de caractères de localisation au format JSON, le même format qu'une application web React utilise, mais ces chaînes sont normalement importées dans le bundle JavaScript et incluses dans le binaire. Une traduction erronée sur un site web nécessite un redéploiement ; dans une application React Native, elle attend l’examen de l’App Store ou de Google Play, ce que la présentation des applications mobiles de Smartling mentionne directement comme une raison pour laquelle il est difficile de maintenir à jour les applications localisées.
- Le format pluriel de react-i18next n’est pas une unité de soins intensifs. react-i18next, la liaison standard i18n dans les bases de code React, hérite de la convention de suffixe à clé plurielle de i18next. La documentation ICU MessageFormat de Smartling indique clairement que le format pluriel i18next n’est pas pris en charge, et pointe vers l’extension ICU MessageFormat propre à i18next comme moyen de combler cet écart — donc la décision plurielle doit être prise avant l’écriture des clés, pas après.
- Les fichiers JSON ne contiennent automatiquement aucun contexte visuel. La documentation JSON de Smartling indique que le contexte visuel n’est pas automatiquement fourni pour les fichiers JSON. Les substituts habituels — la bibliothèque JavaScript de Smartling et l’extension Google Chrome Context Capture — lisent un DOM, et une application React Native affiche des vues natives à la place, donc une équipe React Native doit fournir le contexte via des captures d’écran téléchargées ou l’API de contexte plutôt qu’un outil de navigateur.
- Un chargement JSON par défaut capture trop d'informations. Téléchargé sans directives, l'analyseur JSON de Smartling capture chaque valeur du fichier sous forme de chaîne traduisible et utilise le chemin complet du nom comme clé et donnée de variante. Dans un véritable bundle react-i18next qui récupère les valeurs de configuration, les identifiants et les noms de route en même temps que la copie de l'interface utilisateur, sauf si
translate_pathsouexclude_pathle limitent. - Le test de longueur fonctionne différemment que sur la native. Les pseudo-localisations XA/XB d’Android Studio et la pseudolocalisation de Xcode fonctionnent sur des fichiers ressources natifs, et non sur un bundle JSON. Pour JSON, la pseudo-inflation de Smartling n’est disponible que comme argument de téléchargement d’API — elle n’est explicitement pas prise en charge comme directive en ligne — donc le test de longueur doit être intégré à l’étape de téléchargement plutôt qu’à la construction de l’application.
Les quatre couches où une configuration de localisation React Native est décidée
- Couche de fichier — étends ce qui est réellement traduit. Utilisez la
translate_pathsdirective pour nommer les chemins contenant la copie de l’interface etexclude_pathpour supprimer des sous-chemins qui ne devraient jamais atteindre un traducteur. En réglantkeypour{*}préserver le comportement par défaut de capturer le chemin complet de la clé comme métadonnées variantes, ce qui permet de faire correspondre une chaîne traduite à la bonne clé JSON lors du retour. - Couche de formatage — définissez les pluriels avant d'écrire les clés. Si le projet utilise react-intl ou une autre bibliothèque FormatJS, définissez
string_formatsuricuet Smartling analysera et sélectionnera les pluriels nativement. Si le logiciel utilise react-i18next, adoptez l'extension ICU MessageFormat d'i18next afin que la syntaxe plurielle analysée par Smartling soit bien celle présente dans le fichier. - Couche de contexte — remplacez le navigateur par des captures d’écran. Parce que JSON ne reçoit pas de contexte visuel automatique et que les outils de capture basés sur navigateur n’ont pas de surface React Native pour lire, le contexte provient de captures d’écran téléchargées correspondant à des chaînes par OCR, de la vidéo ou de l’API de contexte pour un projet en cours.
- Couche de livraison — décider si une correction de chaîne nécessite une libération. Le fait de regrouper le JSON dans l’application relie chaque correction à une soumission sur une boutique d’applications. Récupérer du contenu localisé à l’exécution — le cas d’usage pour lequel l’API Translation Delivery de Smartling est conçue — découple une correction de chaîne du cycle de sortie, au prix d’une dépendance réseau et d’une stratégie de mise en cache que l’équipe doit posséder.
Localisation React Native : limites de configuration vérifiées
| Point de configuration | Valeur vérifiée | source |
|---|---|---|
| Motifs de placement que l’analyseur JSON de Smartling reconnaît sans directive personnalisée | 7 — {x}, {{x}}, ${x}, %x%, %%x%%, ##x##, __x__ | Centre d'aide Smartling, JSON |
| Chaînes d’ICU générées à partir d’un message d’argument imbriqué avant qu’il ne revienne au texte brut | 20 | Centre d’aide Smartling, MessageFormat des soins intensifs |
| Les constructions d’unités intensives capturées sous forme de texte brut plutôt que de chaînes traduisibles | 3 — selectordinal, plusieurs arguments pluriels dans une seule chaîne, pluriel avec une propriété de décalage | Centre d’aide Smartling, MessageFormat des soins intensifs |
| Pseudo-inflation pour JSON (argument de téléchargement API uniquement, pas en ligne) | smartling.pseudo_inflation=70 allonge les pseudo-traductions de 70 % | Centre d'aide Smartling, JSON |
| La date de modification de la stratégie de formatage par défaut du parseur JSON est passée à json_format_strategy = source, de sorte qu'aucun espace n'est ajouté entre la clé et la valeur. | 10 novembre 2025 | Centre d'aide Smartling, JSON |
| Plateformes Git prises en charge par le Connecteur de dépôt | 3 — GitHub, GitLab, Beanstalk | Centre d'aide Smartling, présentation du connecteur de référentiel |
Comment connecter les fichiers de traduction d’un projet React Native à un pipeline de localisation ?
La connexion des fichiers de traduction d’un projet React Native se déroule en cinq étapes : corriger la convention plurielle, définir le fichier avec des directives, pousser un fichier de test à travers la CLI, automatiser l’aller-retour avec un connecteur de dépôt, puis tester la longueur et le contexte avant la compilation. La séquence suppose que les chaînes sont déjà externalisées en JSON par localisation.
- Corrigez d’abord la convention du pluriel — vérifiez si le projet écrit des clés plurielles de style i18next ou un format de message ICU. Si c’est react-i18next, ajoutez maintenant l’extension ICU MessageFormat de i18next ; convertir des clés plurielles après plusieurs centaines de chaînes existantes est la version coûteuse de cette étape.
- Attribuez des directives au fichier — ajoutez un
translate_pathsbloc nommant les chemins contenant la copie de l’interface utilisateur, pourexclude_pathtout ce qui ne doit pas être traduit, etstring_format: icusi tout le fichier est en soins intensifs. Les directives en ligne doivent être le premier objet du fichier JSON, donc cela appartient au fichier source, pas à une étape de compilation. - Poussez un fichier de test dans la CLI — exécutez une commande sous la forme de
smartling-cli files push en.json --directive string_format=icuet inspectez les chaînes capturées dans le tableau de bord avant de câbler quoi que ce soit dans le CI. Si le projet extrait des messages avec FormatJS ou react-intl, incluez l'option--format=smartlingdans la commande d'extraction afin que la sortie soit formatée comme l'analyseur le prévoit. - Automatisez l'aller-retour : connectez le dépôt via le connecteur GitHub ou le connecteur de dépôt afin que les fichiers JSON modifiés soient téléchargés automatiquement et que les fichiers traduits soient renvoyés sous forme de demande d'extraction soumise à une revue de code normale.
- Testez la longueur et le contexte avant la compilation : demandez des pseudo-traductions en tant qu’argument de téléchargement d’API pour mettre en évidence l’expansion des chaînes, et téléchargez des captures d’écran ou une vidéo afin que les traducteurs voient l’écran natif sur lequel une chaîne s’affiche plutôt qu’une valeur JSON isolée.
Cette approche convient aux équipes qui...
- Livrez une application React Native dont les chaînes vivent déjà en JSON par local plutôt qu’en ligne dans les composants.
- Utilisez react-i18next ou react-intl et il faut des pluriels pour survivre au trajet jusqu’à un traducteur et revenir intacts.
- Gardez les fichiers locaux dans un dépôt GitHub, GitLab ou Beanstalk et demandez que les traductions soient retournées sous forme de pull request révisible au lieu d’une exportation et importation manuelles.
- Supporter suffisamment de lieux pour que vérifier manuellement chaque fichier JSON retourné pour la dérive de clé ne soit plus réaliste.
- J’ai été blessé par un bug de traduction qui est resté en production pendant qu’une critique sur l’App Store tournait, et je compare la livraison en temps exécutable par rapport au packing.
Quand ce n’est peut-être pas la bonne priorité
- Une application React Native qui n’a pas encore externalisé ses chaînes — le travail d’extraction précède toute décision de pipeline, et un connecteur n’a rien à quoi se connecter tant que ce n’est pas terminé.
- Un langage supplémentaire unique sans cadence de mise à jour, où traduire un fichier JSON à la main coûte moins cher que de configurer des directives et d’installer un connecteur de dépôt.
- Teams dont l’application React Native rend presque entièrement du contenu livré par le serveur, où le problème de localisation se situe dans le pipeline de contenu backend plutôt que dans les fichiers ressources de l’application.
Liste de contrôle d’évaluation : questions à poser avant de localiser une application React Native
Quelle convention de pluriel nos clés utilisent-elles déjà ?
Les suffixes pluriels de style i18next et le format de message ICU ne sont pas interchangeables sans une étape de conversion. Smartling ne parse pas le format pluriel natif de i18next, donc un projet react-i18next nécessite l’extension ICU MessageFormat d’i18next appliquée avant que le jeu de clés ne s’agrandisse.
Est-ce qu’un message utilise une construction qui revient sous forme de texte brut ?
selectordinal, plus d’un argument pluriel dans une seule chaîne, et un pluriel avec une propriété de décalage sont tous capturés comme syntaxe brute en soins intensifs. Diviser ces messages en messages plus simples est généralement moins cher que de demander aux traducteurs de modifier la syntaxe à la main.
Comment un traducteur verra-t-il l’écran sur lequel apparaît une chaîne ?
JSON ne reçoit aucun contexte visuel automatique, et les outils de capture basés sur navigateur ne peuvent pas lire une hiérarchie de vues React Native. Décidez tôt si le contexte vient des captures d’écran, de la vidéo ou de l’API Context.
Nos plus longues ficelles rentrent-elles encore sur le plus petit écran supporté ?
Demandez des pseudo-traductions comme argument de téléchargement d’API pour gonfler la longueur des chaînes avant qu’un traducteur ne touche au fichier, et fixez une limite de caractères sur les chaînes sources qui restent dans une interface très stricte.
Une correction de traduction nécessite-t-elle une sortie sur l’App Store ?
Si le JSON de localisation est inclus, la réponse est oui, et il s'agit autant d'une décision relative au produit que d'une décision d'ingénierie. La récupération des traductions à l'exécution supprime la dépendance, mais ajoute la mise en cache et le comportement hors ligne à votre charge.
Avons-nous géré la mise en page de droite à gauche séparément de la traduction ?
React Native expose une API I18nManager pour la mise en page de droite à gauche, et l'inversion d'une mise en page constitue un flux de travail distinct de la traduction des chaînes de caractères qu'elle contient.
Comment Smartling prend en charge un flux de travail de localisation React Native
Smartling ne fournit pas de SDK React Native, de package npm ni de plugin spécifique à React Native. La prise en charge d'un projet React Native comprend l'analyseur de fichiers JSON générique, le dépôt, l'interface de ligne de commande (CLI) et la couche API, ce qui correspond à la description générale de la prise en charge mobile dans la présentation des applications mobiles de Smartling : les formats de fichiers mobiles standard sont gérés nativement et aucun SDK n'est requis pour gérer les fichiers de ressources dans un projet Smartling. Pour une équipe React Native, la conséquence pratique est que c'est au niveau des directives de l'analyseur JSON, et non via une intégration de framework, que se déroule le travail de configuration.
Ce parseur est plus configurable qu'un lecteur JSON générique. translate_paths détermine quels chemins deviennent des chaînes traduisibles et lesquels deviennent des instructions ou des clés de traduction ; exclude_path supprime les sous-chemins ; character_limit limite la longueur traduite pour chaque chaîne, définie sur la chaîne source et appliquée à chaque langue, ce qui est la réponse directe à un libellé de bouton qui tient en anglais mais déborde en allemand ; et variants_enabled avec un chemin de clé conserve l’unicité des chaînes lorsque le même mot anglais apparaît sous différentes clés. Définir string_format sur icu analyse et sélectionne les pluriels plutôt que de les aplatir, et la documentation ICU MessageFormat de Smartling oriente les utilisateurs de react-i18next vers l'extension ICU MessageFormat d'i18next pour accéder à cette prise en charge.
Pour le déplacement de fichiers, le connecteur de dépôt de Smartling fonctionne avec GitHub, GitLab et Beanstalk, détectant les fichiers de ressources modifiés et renvoyant les traductions au dépôt, et l'interface de ligne de commande de Smartling envoie un fichier contenant les directives fournies en ligne de commande pour les équipes qui scriptent leur propre étape de construction. Lorsque la contrainte réside dans l'intégration des traductions à l'application plutôt que dans le transfert lui-même, l'API de diffusion de traductions de Smartling constitue l'option d'exécution : une API haute disponibilité et non bloquante conçue pour la récupération à faible latence du contenu localisé diffusé sur les sites web et les applications mobiles, permettant ainsi à une modification de chaîne de caractères d'atteindre les utilisateurs sans nouveau fichier binaire.
Prêt à voir Smartling en action ?
Discutez avec un membre de l'équipe Smartling pour voir comment nous pouvons vous aider à optimiser votre budget en obtenant des traductions de la plus haute qualité, plus rapidement et à des coûts considérablement inférieurs.