Peso de fuente en React Native
En este artículo, aprenderemos a usar diferentes fuentes con diferentes pesos de fuente en React Native.
Peso de fuente en React Native
La propiedad font-weight puede mostrar algunos problemas en la aplicación React Native, por lo que usaremos archivos de fuentes adicionales para replicar lo mismo en la aplicación React Native. Para agregar fuentes personalizadas en React Native, necesitamos descargar los archivos de fuentes, por ejemplo, archivos .ttf.
Después de descargar los archivos de fuentes, debemos realizar pasos específicos para usarlos en nuestra aplicación React Native.
En este artículo de demostración, usamos la fuente OpenSans con tres variantes para mostrar diferentes pesos de fuente, que son OpenSans Regular, OpenSans Bold y OpenSans Italic.
Los pasos para agregar diferentes fuentes para diferentes pesos de fuente se detallan a continuación:
-
Hay muchos sitios web disponibles para descargar archivos de fuentes. Los usuarios pueden seguir el sitio web de fuentes de Google para descargar las fuentes deseadas.
-
Agrega las fuentes en la carpeta
fontsdel directorioassetsdel proyecto React Native. Si no tiene una carpeta defuentesen losactivos, cree una carpeta llamadafuentesy mueva las fuentes descargadas a la carpetafuentes.La imagen de arriba muestra la estructura de carpetas que debería verse después de mover todos los archivos de fuentes a la carpeta
assets/fonts. -
Cree un nuevo archivo llamado
react-native.config.jsen su proyecto React Native. Si su proyecto ya tiene este archivo, no necesita crearlo nuevamente; puedes usar el creado previamente. -
Agregue el siguiente código a este archivo.
module.exports = { project: { ios: {}, android: {}, }, assets: ["./assets/fonts/"], }; -
Para vincular los
activosal proyecto React Native, realice los siguientes comandos en la terminal.Para la versión React Native >= 0.69:
npx react-native-assetPara la versión React Native <0.69:
npx react-native link -
Los ganchos
useFontsinicializan las fuentes para que podamos usarlas en nuestro proyecto. En primer lugar, debemos importar estos ganchosuseFontsdeexpo-font, que toma un objeto en el parámetro, y la clave del objeto define el nombre de la familia de fuentes, que se usará en el proyecto para configurar la fuente. -
El valor del objeto se denomina función
requerirque vincula el archivo de fuente descargado a la clave del objeto. Podemos aplicar los ganchosuseFontsutilizando la sintaxis que se indica a continuación:// using useFonts hooks const [loaded] = useFonts({ OpenSansRegular: require('./assets/fonts/OpenSans-Regular.ttf'), OpenSansBold: require('./assets/fonts/OpenSans-Bold.ttf'), OpenSansItalic: require('./assets/fonts/OpenSans-Italic.ttf'), });
Use diferentes fuentes en el proyecto React Native
Es el paso final para usar las diferentes fuentes para diferentes pesos de fuente. En el archivo App.js de nuestro proyecto React Native, escribiremos el código para usar los ganchos useFonts.
En el siguiente ejemplo, en primer lugar, importamos los componentes necesarios para nuestro proyecto React Native, y esos son StyleSheet para configurar el estilo de nuestro proyecto React Native, Texto para escribir contenido texto, Ver para configurar la vista del proyecto, useFonts para configurar las fuentes.
El enlace useFonts se configura mediante el método discutido anteriormente. Luego, mencionamos algunos estilos para el componente Ver usando StyleSheet.
Finalmente, en los componentes Text, establecemos el estilo fontFamily usando el atributo style y le damos los valores del enlace useFont.
import { StyleSheet, Text, View } from 'react-native';
import { useFonts } from 'expo-font';
export default function App(){
// load fonts
const [loaded] = useFonts({
OpenSansRegular: require('./assets/fonts/OpenSans-Regular.ttf'),
OpenSansBold: require('./assets/fonts/OpenSans-Bold.ttf'),
OpenSansItalic: require('./assets/fonts/OpenSans-Italic.ttf'),
});
if (!loaded) {
return null;
}
// show texts with different fonts
return (
<View style={styles.container}>
<Text style={{ fontFamily: 'OpenSansRegular', fontSize: 30 }}>OpenSans Regular</Text>
<Text style={{ fontFamily: 'OpenSansBold', fontSize: 30 }}>OpenSans Bold</Text>
<Text style={{ fontFamily: 'OpenSansItalic', fontSize: 30 }}>OpenSans Italic</Text>
</View>
);
}
// style for the component
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Producción:
En el resultado anterior, los usuarios pueden ver tres tipos de pesos de fuente de la misma fuente.
Este artículo nos enseñó a usar diferentes fuentes para diferentes pesos de fuente. Es muy fácil, pero los usuarios deben seguir el proceso paso a paso. Los usuarios pueden seguir el ejemplo para entender mejor el proceso.
