Estoy tratando de cambiar la familia de fuentes para el texto árabe en la aplicación. Estoy usando i18Next para la traducción. La traducción funciona perfectamente, pero estoy tratando de agregar una fuente personalizada solo para el idioma árabe.
const {t} = useTranslation({fontNames: [`${GLOBAL_APP_ARABIC_FONT}`]});
No tengo idea de cómo funciona eso en reaccionar, pero suponiendo que el atributo lang cambie correctamente, podría hacer esto en CSS:
html { font-family: your-latin-font } html[lang*=ar] { font-family: your-arabic-font }No creo que pueda establecer una familia de fuentes global, tenemos algo similar en nuestra aplicación, acabamos de crear un componente personalizado para el texto para que no tengamos que establecer una familia de fuentes en cada componente de texto.
Estoy compartiendo la codificación de nuestro componente, puede modificarlo para usarlo en JS y usarlo en lugar de Texto si le gusta esta solución.
import { observer } from 'mobx-react'; import React from 'react'; import { Text, TextProps } from 'react-native'; import { useStores } from '../stores/rootStore'; type OwnProps = { RTLAlign?: boolean; }; export const AppText = observer((props: TextProps & OwnProps) => { const { settingsStore } = useStores(); const { style, ...rest } = props; return ( <Text allowFontScaling={false} // eslint-disable-next-line react/jsx-props-no-spreading {...rest} style={[ { fontFamily: settingsStore.font // Set condition for font family based on language }, style ]} /> ); });