Uso i18n-js para fines de traducción en mi aplicación React Native. Pero no puedo obtener ningún estilo como diferentes colores, negrita, etc. para mis traducciones.
Este es mi en.js:
import {Text} from "react-native"; const highlightText = (string) => string.split(" ").map((word, i) => ( <Text key={i}> <Text style={{ backgroundColor: "#ECEAFF", color: "#5F5C7E" }}> {word} </Text> </Text> )); const en = { testTranslation:`This Text has some styling to it: ${highlightText("<h1>Hello</h1>")} isn't that pretty?`,Yo uso la traducción en mi pantalla así:
import i18n from "i18n-js"; import { de } from "../../../locales/de"; import { en } from "../../../locales/en"; import { fr } from "../../../locales/fr"; i18n.fallbacks = true; i18n.translations = { en, de, fr }; ... <Text> {i18n.t("testTranslation")} </Text>El resultado es este:
Este texto tiene algo de estilo: [objeto Objeto] ¿no es bonito?
¡Cualquier ayuda sobre cómo diseñar el texto es muy apreciada!
Puedes usar sintaxis algo como esto
Cree 3 cadenas en el archivo de traducción. Ejemplo
en archivos de traducción
str1: 'this is" str2: 'bold' str3: 'copy'Ahora puedes hacer algo como
<> <Text>{i18n.t(str1)}</Text> <Text className="boldStyle">{i18n.t(str2)}</Text> <Text>{i18n.t(str3)}</Text> <>Hay otros patrones para lo mismo. pero esto es limpio y pequeño