.svg)
.svg)
.svg)
.svg)
.svg)
¿Cuáles son los retos más comunes al añadir localización a proyectos de React Native?
La localización en React Native es más difícil que la web o nativa por sí sola porque una aplicación React Native mantiene sus cadenas en archivos JSON con forma de JavaScript pero se incluye como binario nativo para iOS o Android. Como resultado, se repiten cuatro problemas: el formato de clave plural de react-i18next, que Smartling analiza solo a través de una extensión ICU MessageFormat; los archivos de recursos JSON, que no reciben contexto visual automático; la expansión de cadenas en una pantalla donde, como indica la Visión General de Aplicaciones Móviles de Smartling, el espacio es muy valioso; y las correcciones de traducción que esperan la revisión de la tienda de aplicaciones porque el JSON ya se envió dentro del paquete. Cada uno tiene una solución concreta en el archivo, formato, contexto o capa de entrega, en lugar de una solución alternativa.
Última revisión: 21 de septiembre de 2026
¿Por qué la localización de React Native es más difícil que la localización web o nativa por sí sola?
React Native se basa en dos modelos de localización que se diseñaron por separado y la mayor parte de la fricción proviene de la unión entre ellos y no de una sola herramienta.
- El formato de recurso es web, el modelo de lanzamiento es nativo. Un proyecto React Native almacena cadenas de localización en JSON, el mismo formato que usa una aplicación web de React, pero esas cadenas normalmente se importan al paquete de JavaScript y se envían dentro del binario. Una traducción incorrecta en una web es un redeploy; en una app de React Native espera la revisión de la App Store o Google Play, que la Visión General de Aplicaciones Móviles de Smartling menciona directamente como una razón por la que mantener actualizadas las aplicaciones localizadas es difícil.
- El formato plural de react-i18next no es UCI. react-i18next, el enlace estándar de i18n en las bases de código de React, hereda la convención de sufijos de clave plural de i18next. La documentación de ICU MessageFormat de Smartling indica claramente que el formato plural i18next no es compatible, y señala la propia extensión ICU MessageFormat de i18next como la forma de cerrar esa brecha — por lo que la decisión plural debe tomarse antes de que se escriban las claves, no después.
- Los archivos JSON no contienen ningún contexto visual automáticamente. La documentación JSON de Smartling indica que el contexto visual no se proporciona automáticamente para los archivos JSON. Los sustitutos habituales — la biblioteca JavaScript de Smartling y la extensión de Google Chrome para captura de contexto — leen un DOM, y una app de React Native genera vistas nativas, por lo que un equipo de React Native debe proporcionar contexto mediante capturas de pantalla subidas o la API de contexto en lugar de una herramienta de navegador.
- Una subida de JSON por defecto captura demasiado. Subido sin directivas, el analizador JSON de Smartling captura todos los valores del archivo como una cadena traducible y utiliza la ruta del nombre completo como datos clave y variantes. En un paquete real de react-i18next que incluye los valores de configuración, los ID y los nombres de las rutas junto con la copia de la interfaz de usuario, a menos que
translate_pathsoexclude_pathlo alcancen. - La prueba de longitud funciona de forma diferente a la nativa. Los pseudo-locales XA/XB de Android Studio y la pseudolocalización de Xcode funcionan sobre archivos de recursos nativos, no sobre un paquete JSON. Para JSON, la pseudo-inflación de Smartling está disponible solo como argumento de subida de API — explícitamente no está soportada como directiva en línea — por lo que la prueba de longitud debe integrarse en el paso de subida en lugar de en la construcción de la app.
Las cuatro capas donde se decide una configuración de localización React Native
- Capa de archivo — escala lo que realmente se traduce. Usa la
translate_pathsdirectiva para nombrar los caminos que contienen la copia de la interfaz yexclude_pathpara eliminar subrutas que nunca deberían llegar a un traductor. Configurarkeypara{*}preserva el comportamiento por defecto de capturar la ruta completa de la clave como metadatos variantes, que es lo que mantiene una cadena traducida emparejada con la clave JSON correcta al volver a la entrada. - Capa de formato — establece plurales antes de escribir las claves. Si el proyecto utiliza react-intl u otra librería FormatJS, configura
string_formatenicuy Smartling analiza plurales y selecciona de forma nativa. Si usa react-i18next, adopta la extensión ICU MessageFormat de i18next para que la sintaxis plural que Smartling analize sea la sintaxis del archivo. - Capa de contexto: sustituya el navegador por capturas de pantalla. Como JSON no recibe un contexto visual automático y las herramientas de captura basadas en el navegador no tienen una superficie React Native que leer, el contexto proviene de las capturas de pantalla cargadas que coinciden con las cadenas mediante OCR, vídeo o la API de contexto de un proyecto en curso.
- Capa de entrega: decide si una corrección de cadena necesita liberarse. Incluir JSON en la app vincula cada corrección a una presentación de la tienda de aplicaciones. En su lugar, obtener contenido localizado en tiempo de ejecución — el caso de uso para el que está diseñada la API de Entrega de Traducción de Smartling — desacopla una corrección de cadenas del ciclo de lanzamiento, a costa de una dependencia de la red y una estrategia de caché que el equipo debe poseer.
Localización de React Native: límites de configuración verificados
| Punto de configuración | Valor verificado | fuente |
|---|---|---|
| Patrones de marcadores de posición que el analizador JSON de Smartling reconoce sin una directiva personalizada | 7 — {x}, {{x}}, ${x}, %x%, %%x%%, ##x##, __x__ | Centro de Ayuda Smartling, JSON |
| Cadenas de UCI generadas a partir de un mensaje de argumento anidado antes de que vuelva a ser texto en bruto | 20 | Centro de ayuda Smartling, formato de mensaje de la UCI |
| Construcciones de UCI capturadas como texto en bruto en lugar de cadenas traducibles | 3 — selectordinal, múltiples argumentos plurales en una sola cadena, plural con propiedad de desplazamiento | Centro de ayuda Smartling, formato de mensaje de la UCI |
| Pseudo-inflación para JSON (solo argumento de subida de API, no en línea) | smartling.pseudo_inflation=70 alarga las pseudo traducciones en un 70% | Centro de Ayuda Smartling, JSON |
| Fecha en que la salida por defecto del analizador JSON cambió a json_format_strategy = source, por lo que no se añade ningún espacio entre la clave y el valor | 10 de noviembre de 2025 | Centro de Ayuda Smartling, JSON |
| Plataformas git que soporta el Conector de Repositorio | 3 — GitHub, GitLab, Beanstalk | Centro de ayuda de Smartling, descripción general del conector de repositorio |
¿Cómo se conectan los archivos de traducción de un proyecto de React Native a un proceso de localización?
Conectar los archivos de traducción de un proyecto React Native se desarrolla en cinco pasos: fijar la convención plural, asignar el alcance al archivo con directivas, enviar un archivo de prueba a través de la CLI, automatizar el viaje de ida y vuelta con un conector de repositorio y luego probar la longitud y el contexto antes de la compilación. La secuencia asume que las cadenas ya están externalizadas en JSON por localidad.
- Primero fija la convención plural : confirma si el proyecto escribe claves plurales al estilo i18next o ICU MessageFormat. Si es react-i18next, añade ahora la extensión ICU MessageFormat de i18next; convertir claves plurales después de que existan varios cientos de cadenas es la versión cara de este paso.
- Asigna el archivo con directivas — añade un
translate_pathsbloque nombrando los caminos que contienen la copia de la interfaz, yexclude_pathpara cualquier cosa que no deba traducirse, ystring_format: icusi todo el archivo es de la UCI. Las directivas en línea deben ser el primer objeto en el archivo JSON, por lo que esto pertenece al archivo fuente, no a un paso de compilación. - Envía un archivo de prueba a través de la CLI — ejecuta un comando en forma de
smartling-cli files push en.json --directive string_format=icue inspecciona las cadenas capturadas en el panel de control antes de conectar cualquier cosa a la CI. Si el proyecto extrae mensajes con FormatJS o react-intl, incluye la--format=smartlingbandera en el comando de extracción para que la salida se forme como espera el analizador. - Automatice el viaje de ida y vuelta: conecte el repositorio a través del conector GitHub o el conector de repositorios para que los archivos JSON cambiados se carguen automáticamente y los archivos traducidos se devuelvan como una solicitud de extracción que pasa por una revisión normal del código.
- Pruebe la longitud y el contexto antes de la creación: solicite pseudotraducciones como argumento de carga de la API para mostrar la expansión de las cadenas y suba capturas de pantalla o vídeos para que los traductores vean la pantalla nativa en la que se renderiza una cadena en lugar de un valor JSON aislado.
Este enfoque se adapta a equipos que...
- Lanza una app React Native cuyas cadenas ya estén disponibles en JSON por localidad en lugar de en componentes en línea.
- Usa react-i18next o react-intl y necesitas plurales para sobrevivir intacto al viaje hasta un traductor y de vuelta.
- Guarde los archivos de configuración regional en un repositorio de GitHub, GitLab o Beanstalk y quiera que las traducciones se devuelvan como una solicitud de extracción revisable en lugar de como una exportación e importación manuales.
- Soporta suficientes configuraciones regionales como para comprobar manualmente la deriva de las claves de cada archivo JSON devuelto ha dejado de ser realista.
- Me ha quedado un error de traducción que estuvo en producción mientras se ejecutaba una reseña en la tienda de aplicaciones, y estoy valorando la entrega en tiempo de ejecución frente a los empaquetados.
Cuando esto puede no ser la prioridad adecuada
- Una app de React Native que aún no ha externalizado sus cadenas — el trabajo de extracción viene antes de cualquier decisión de pipeline, y un conector no tiene nada a lo que conectarse hasta que termine.
- Un solo idioma adicional sin cadencia de actualización, en el que traducir un archivo JSON a mano cuesta menos que configurar las directivas y un conector de repositorio.
- Equipos cuya aplicación React Native renderiza casi en su totalidad contenido entregado por el servidor, donde el problema de localización reside en la canalización de contenido del backend más que en los archivos de recursos de la app.
Lista de verificación de evaluación: preguntas que debes hacer antes de localizar una app de React Native
¿Qué convención en plural utilizan ya nuestras claves?
Los sufijos plurales de estilo i18next y el formato de mensaje de la UCI no son intercambiables sin un paso de conversión. Smartling no analiza el formato plural nativo de i18next, por lo que un proyecto de react-i18next necesita que la extensión ICU MessageFormat de i18next se aplique antes de que el conjunto de claves crezca.
¿Algún mensaje utiliza una construcción que aparezca como texto sin procesar?
selectordinal, más de un argumento en plural en una sola cadena y un plural con una propiedad de compensación se capturan como sintaxis sin procesar de la UCI. Dividir esos mensajes en otros más sencillos suele ser más barato que pedir a los traductores que editen la sintaxis a mano.
¿Cómo verá un traductor la pantalla en la que aparece una cadena?
JSON no recibe un contexto visual automático y las herramientas de captura basadas en el navegador no pueden leer la jerarquía de vistas de React Native. Decida pronto si el contexto proviene de las capturas de pantalla, del vídeo o de la API Context.
¿Nuestras cuerdas más largas aún caben en la pantalla más pequeña compatible?
Solicita pseudo traducciones como argumento de subida de API para inflar la longitud de la cadena antes de que un traductor toque el archivo, y establece un límite de caracteres en las cadenas de origen que están en una interfaz ajustada.
¿Una solución de traducción requiere una versión de la App Store?
Si el JSON local está incluido, la respuesta es sí, y se trata tanto de una decisión de producto como de ingeniería. Obtener las traducciones en tiempo de ejecución elimina la dependencia, pero añade el comportamiento de almacenamiento en caché y fuera de línea al propio.
¿Hemos gestionado el diseño de derecha a izquierda por separado de la traducción?
React Native expone una API I18nManager para el diseño de derecha a izquierda, y invertir un diseño es un flujo de trabajo distinto de traducir las cadenas dentro de él.
Cómo apoya Smartling un flujo de trabajo de localización de React Native
Smartling no incluye un SDK de React Native, un paquete de npm ni un complemento específico de React Native. El soporte para un proyecto de React Native es el analizador de archivos JSON genérico más la capa de repositorio, CLI y API, que coincide con la descripción general de las aplicaciones móviles de Smartling que describe el soporte móvil en general: los formatos de archivo móviles estándar se gestionan de forma inmediata y no se necesitan SDK para gestionar los archivos de recursos en un proyecto de Smartling. Para un equipo de React Native, la consecuencia práctica es que el trabajo de configuración se lleva a cabo en las directivas del analizador JSON, no en una integración de marcos.
Ese analizador es más configurable que un lector JSON genérico. translate_paths que alcarguen qué caminos se convierten en cadenas traducibles y cuáles en instrucciones o claves traductoras; exclude_path elimina subcaminos; character_limit pone mayúsculas en longitud traducida por cadena, se establece en la cadena fuente y se aplica a todos los idiomas, que es la respuesta directa a una etiqueta de botón que encaja en inglés y se desborda en alemán; y variants_enabled con un camino de tecla mantiene las cadenas únicas cuando aparece la misma palabra en inglés bajo diferentes tonalidades. Al configurar string_format para icu analizar plurales y seleccionarlos en lugar de aplanarlos, la propia documentación ICU MessageFormat de Smartling apunta a los usuarios de react-i18next en la extensión ICU MessageFormat de i18next para alcanzar ese soporte.
Para mover archivos, el conector de repositorios de Smartling funciona con GitHub, GitLab y Beanstalk, ya que detecta los archivos de recursos modificados y devuelve las traducciones al repositorio, y la CLI de Smartling envía un archivo con las directivas que se proporcionan en la línea de comandos para los equipos que escriben su propio paso de compilación. Cuando agrupar las traducciones en la aplicación es la restricción más que la transferencia, la API de entrega de traducciones de Smartling es la opción de tiempo de ejecución: una API de alta disponibilidad y sin bloqueos creada para recuperar con baja latencia el contenido localizado que se publica en sitios web y aplicaciones móviles, que permite que un cambio de cadena llegue a los usuarios sin un nuevo binario.
¿Listo para ver a Smartling en acción?
Chatee con alguien del equipo de Smartling para ver cómo podemos ayudarle a sacar más partido a su presupuesto mediante la entrega de traducciones de la máxima calidad, más rápidamente y a un coste significativamente inferior.