Skip to main content

Cómo Conectar Una Fuente En React Native: Instrucciones Paso A Paso

  • Nicolás Galvez Casal
  • Software

Las Fuentes juegan un papel importante en el desarrollo m vil, ayudando a crear una interfaz de usuario m s atractiva y nica. Las aplicaciones React Native tambi n tienen la capacidad de conectar y usar Fuentes especiales.

Conectar Fuentes en React Native no es particularmente dif cil si conoce algunos pasos b sicos. El primer paso es preparar la fuente, es decir, cargarla y colocarla en su proyecto. Por lo general, las Fuentes se proporcionan en un formato .ttf o .otf.

Una vez que haya colocado la fuente en la ubicaci n correcta del proyecto, el siguiente paso es configurar el archivo Info.plist para iOS y el archivo AndroidManifest.xml para Android. Debe agregar una configuraci n para conectar la fuente especificando su nombre y ruta de archivo.

Despu s de configurar los archivos del proyecto, es necesario compilar la aplicaci n para que los cambios surtan efecto. Esto puede requerir ejecutar una compilaci n para iOS y volver a compilar los archivos fuente para Android.

Ahora est listo para usar su fuente en aplicaciones React Native. Puede especificar su nombre en los estilos de componentes o usarlo directamente en el texto. Recuerde que algunos componentes de React Native tienen sus propias caracter sticas para cambiar la fuente, as que consulte la documentaci n relacionada.

  1. Conexi n de Fuentes en React Native
  2. Uso de Fuentes preinstaladas
  3. Conectar Fuentes personalizadas
  4. Paso 1: Crear una carpeta de activos
  5. Paso 2: Crear una carpeta de Fuentes
  6. Paso 3: Copiar archivos de fuente
  7. Paso 4: Importar fuente
  8. Paso 5: Usando una fuente personalizada
  9. Seleccionar y cargar la fuente deseada
  10. Conexi n de una fuente a un proyecto
  11. Uso de Fuentes en componentes

Conexi n de Fuentes en React Native

React Native tiene varias formas de conectar Fuentes a su aplicaci n. En este art culo, veremos las dos formas m s comunes: usar Fuentes preinstaladas y conectar Fuentes personalizadas.

Uso de Fuentes preinstaladas

React Native viene con algunas Fuentes preinstaladas que puede usar sin configuraci n adicional. Estas Fuentes incluyen Roboto, Arial, San Francisco y muchos m s. Para usar una fuente preestablecida, solo necesita especificar su nombre en la propiedad de estilo del componente.

import React from 'react';
import { Text, StyleSheet } from 'react-native';
const App = () => {
 
return (
Este es un texto con una fuente preinstalada

                        
                    
);
};
const styles = StyleSheet.create({
text: {
fontFamily: 'Roboto',
fontSize: 16,
export default App;
Si necesita usar una fuente personalizada, primero debe agregar los archivos de fuente al proyecto. Por lo general, los archivos de fuente tienen una extensi n .ttf o .otf. Puede agregar estos archivos a cualquier carpeta de proyecto, como la carpeta assets/fonts.
Una vez que los archivos de fuente se agregan al proyecto, debe seguir los siguientes pasos para conectar una fuente personalizada a su aplicaci n:
Paso 1: Crear una carpeta de activos
En la carpeta ra z de su proyecto, cree una carpeta llamada assets si a n no existe.
  1. Paso 2: Crear una carpeta de Fuentes
  2. Dentro de la carpeta assets, cree una carpeta llamada fonts. En esta carpeta, almacenar  los archivos de fuente.
  3. Paso 3: Copiar archivos de fuente
  4. Copie los archivos de fuente en la carpeta fonts. Aseg rese de que los nombres de archivo de fuente no contengan espacios ni caracteres especiales.
  5. Paso 4: Importar fuente
Importe la fuente y as gnele un nombre que usar  en las propiedades de estilo del componente.
import * as Font from 'expo-font';
//...
const loadFonts = async () => {
  1. await Font.loadAsync({
  2. CustomFontRegular: require('./assets/fonts/CustomFont-Regular.ttf'),
  3. CustomFontBold: require('./assets/fonts/CustomFont-Bold.ttf'),
});
};
export default function App() {
useEffect(() => {
  1. loadFonts();
  2. }, []);
  3. //...
}
  1. Paso 5: Usando una fuente personalizada
Ahora puede usar Fuentes personalizadas en la propiedad de estilo del componente especificando el nombre de fuente especificado en el paso 4.

                        
                    
import React from 'react';
import { Text, StyleSheet } from 'react-native';
const App = () => {
return (
Este es un texto con una fuente personalizada
const styles = StyleSheet.create({
text: {
},
Ahora ya sabes c mo conectar Fuentes en React Native. Puede usar Fuentes preinstaladas o conectar Fuentes personalizadas para un dise o m s personalizado de su aplicaci n.
Seleccionar y cargar la fuente deseada

                        

                    
                

                    

                        

                            
Read also