.svg)
.svg)
.svg)
.svg)
.svg)
¿Cuáles son los desafíos más comunes al agregar localización a proyectos de React Native?
La localización en React Native es más difícil que el sitio 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 en React Native es más difícil que la localización sitio web o nativa por separado?
React Native se encuentra en dos modelos de localización diseñados por separado, y la mayor parte de la fricción proviene de la unión entre ellos más que de una herramienta concreta.
- El formato del recurso es sitio web, el modelo de lanzamiento es nativo. Un proyecto de React Native almacena las cadenas de configuración regional en formato JSON, el mismo formato que emplea una aplicación sitio web de React, pero esas cadenas normalmente se importan al paquete de JavaScript y se incluyen dentro del binario. Una mala traducción en un sitio web implica una nueva implementación; en una aplicación React Native, se espera la revisión de la App Store o Google Play, lo que Smartling menciona directamente en su reporte sobre aplicaciones móviles como una de las razones por las que resulta difícil mantener actualizadas las aplicaciones localizadas.
- 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 tomar antes de que se escriban las claves, no después.
- Los archivos JSON no contienen 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.
- La carga JSON predeterminada captura demasiada información. Si se carga sin directivas, el analizador JSON de Smartling captura cada valor del archivo como una cadena traducible y emplea la ruta completa del nombre como clave y datos variantes. En un paquete real de react-i18next que recoge los valores de configuración, los ID y los nombres de las rutas junto con el texto de la interfaz de usuario, a menos que
translate_pathsoexclude_pathlo especifiquen. - 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 integrar 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: defina los plurales antes de escribir las claves. Si el proyecto emplea react-intl u otra biblioteca FormatJS, configure
string_formatenicuy Smartling analizará los plurales y las selecciones de forma nativa. Si emplea react-i18next, adopte la extensión ICU MessageFormat de i18next para que la sintaxis plural que Smartling analiza sea la misma que la del archivo. - Capa de contexto: sustituya el navegador por capturas de pantalla. Dado que JSON no obtiene un contexto visual automático y las herramientas de captura basadas en el navegador no tienen una superficie de React Native para leer, el contexto proviene de capturas de pantalla cargadas que coinciden con cadenas mediante OCR, de video o de la API de Contexto para un proyecto en curso.
- Capa de entrega: decide si una corrección de cadena necesita liberar. 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 marcador de posición que el analizador JSON de Smartling reconoce sin directiva personalizada | 7 — {x}, {{x}}, ${x}, %x%, %%x%%, ##x##, __x__ | Centro de Ayuda Smartling, JSON |
| Cadenas de la UCI generadas a partir de un mensaje con argumentos anidados antes de que vuelva a ser texto sin formato. | 20 | Centro de Ayuda Smartling, Formato de Mensaje en UCI |
| Construcciones de UCI capturadas como texto en bruto en lugar de cadenas traducibles | 3 — selectordinal, múltiples argumentos plurales en una cadena, plural con una propiedad de desplazamiento | Centro de Ayuda Smartling, Formato de Mensaje en 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 la que la salida predeterminada del analizador JSON cambió a json_format_strategy = source, por lo que no se agrega 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 del repositorio |
¿Cómo conectas los archivos de traducción de un proyecto React Native a una canalización 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, corrija la convención de plurales : confirme si el proyecto escribe claves de plurales al estilo i18next o en formato de mensaje ICU. Si se trata de react-i18next, agregue ahora la extensión ICU MessageFormat de i18next; convertir claves plurales después de que existan varios cientos de cadenas es la versión costosa de este paso.
- Asigna el archivo con directivas — agrega un
translate_pathsbloque nombrando los caminos que contienen la copia de la interfaz, yexclude_pathpara cualquier cosa que no deba traducir, 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 proceso de ida y vuelta : conecte el repositorio a través del Conector de GitHub o del Conector de Repositorio para que los archivos JSON modificados se carguen automáticamente y los archivos traducidos se devuelvan como una solicitud de extracción que pase por la revisión de código habitual.
- Pruebe la longitud y el contexto antes de la compilación : aplicar pseudotraducciones como argumento de carga de API para mostrar la expansión de cadenas y cargue capturas de pantalla o videos para que los traductores vean la pantalla nativa en la que se muestra 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.
- Almacena archivos locales en un repositorio de GitHub, GitLab o Beanstalk y quieres que las traducciones se devuelvan como pull request revisable en lugar de una exportación e importación manual.
- Soportan suficientes localizaciones como para que comprobar manualmente cada archivo JSON devuelto en busca de la deriva de clave dejó de ser realista.
- Me quedó 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 externalizó 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 único idioma adicional sin periodicidad de actualización, donde traducir un archivo JSON manualmente cuesta menos que configurar 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 debe hacer antes de localizar una aplicación React Native.
¿Qué convención de plurales emplean ya nuestras claves?
Los sufijos plurales al estilo i18next y el formato de mensaje ICU no son intercambiables sin un paso de conversión. Smartling no analiza el formato plural nativo de i18next, por lo que un proyecto react-i18next necesita la extensión ICU MessageFormat de i18next aplicada antes de que el conjunto de claves crezca.
¿Algún mensaje usa una construcción que vuelva como texto en bruto?
selectordinal, más de un argumento plural en una sola cadena y un plural con propiedad de desplazamiento se capturan como sintaxis en bruto de la UCI. Dividir esos mensajes en mensajes más simples suele ser más barato que pedir a los traductores que editen la sintaxis manualmente.
¿Cómo verá un traductor la pantalla en la que aparece una cadena de texto?
JSON no obtiene un contexto visual automático, y las herramientas de captura basadas en el navegador no pueden leer una jerarquía de vistas de React Native. Decida con anticipación si el contexto proviene de capturas de pantalla, video o la API de Contexto.
¿Nuestras cuerdas más largas siguen cabiendo en la pantalla más pequeña soportada?
Aplicar 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.
¿Es necesario lanzar una aplicación en la tienda para corregir una corrección de traducción?
Si el JSON de localización está incluido, la respuesta es sí, y esa es una decisión tanto de producto como de ingeniería. La obtención de traducciones en tiempo de ejecución elimina la dependencia, pero agrega almacenamiento en caché y comportamiento sin conexión a la propia.
¿Gestionamos 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, e invertir un diseño es un flujo de trabajo distinto de traducir las cadenas dentro de él.
Cómo Smartling admite un flujo de trabajo de localización de React Native
Smartling no distribuye un SDK para React Native, un paquete npm ni un complemento específico para React Native. La compatibilidad con un proyecto de React Native consiste en el analizador genérico de archivos JSON, además del repositorio, la interfaz de línea de comandos (CLI) y la capa de API, lo que coincide con la descripción general de la compatibilidad móvil de Smartling en su sección de aplicaciones móviles: los formatos de archivo móviles estándar se gestionan de forma predeterminada y no se requieren 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 realiza en las directivas del analizador JSON, y no en la integración con un framework.
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 Repository Connector de Smartling funciona con GitHub, GitLab y Beanstalk, detectando archivos de recursos modificados y devolviendo traducciones al repositorio, y la CLI de Smartling impulsa un archivo con directivas suministradas en la línea de comandos para que los equipos programen su propio paso de compilación. Donde agrupar traducciones en la app es la limitación más que la transferencia, la API de Entrega de Traducción de Smartling es la opción en tiempo de ejecución: una API de alta disponibilidad y no bloqueante, diseñada para la recuperación de baja latencia de contenido localizado servido a sitios web y aplicaciones móviles, que permite que un cambio de cadena llegue a los usuarios sin necesidad de un nuevo binario.
¿Listo para ver a Smartling en acción?
Converse con alguien del equipo de Smartling para identificar cómo podemos ayudarle a aprovechar mejor su presupuesto al entregarle traducciones con la más alta calidad, mayor rapidez y a costos mucho más bajos.