Estoy usando i18n-js para configuraciones regionales y traducciones. Estoy tratando de representar un componente nativo de reacción mediante interpolación.
A continuación se muestra el código de referencia,
// Translate function (exposed using custom hooks) const translate = useCallback((key, config) => i18n.t(key, config), []); // locale key with variables to be interpolated "tnc_text": "Accept {{topUpTnC}} and {{dealsTnC}} to proceed" // Code which uses translate <Text> {translate( 'tnc_text', { topUpTnC: <Text style={{color: 'blue'}} onPress={() => Linking.openURL('https://google.com')}> Top-Up Terms and Conditions* </Text>, dealsTnC: <Text style={{color: 'blue'}} onPress={() => Linking.openURL('https://example.com')}> Deals Terms and Conditions </Text>, })} </Text>Estoy esperando algo como esto:
Acepte los Términos y condiciones de recarga* y los Términos y condiciones de las ofertas para continuar
Pero en cambio, estoy recibiendo esto:
Acepte [objeto Objeto] y [objeto Objeto] para continuar
No se pudo encontrar nada en la documentación. ¿Hay alguna forma de reemplazar variables con componentes en i18n-js?
Tengo la misma pregunta y no pude encontrar una respuesta todavía...
tal vez el Trans-Componente podría ayudar:
https://react.i18next.com/latest/trans-component
Editar: esta es quizás una buena explicación React-i18n Trans Component con traducciones que contienen etiquetas HTML que no funcionan
Segunda edición: pude resolver el problema con el siguiente código:
// render <Trans i18nKey="yourTranslationKey" components={{ link: <Text onPress={() => console.log('do something')}}} /> }} /> // translationFile {... "yourTranslationKey": "Please <link>Click me</link>", ...}Lo encontré en github :)
Esta es la documentación oficial al respecto.