Usar fuente personalizada en React-Native

Estate atento porque en este post vas a hallar el resultado que buscas.

Solución:

1. Cree un nuevo grupo Fuentes dentro de su proyecto Xcode

2. Arrastre y suelte las fuentes desde Finder al grupo Fuentes que acaba de crear y verifique el nombre de su proyecto en Agregar a la lista de objetivos

3. Expanda la carpeta del nombre de su proyecto dentro del directorio principal de su proyecto y abra Info.plist

4. Agregar Fonts provided by application como nuevo key

5. Agregar un nuevo elemento debajo Fonts provided by applicationy establezca el valor del elemento en el nombre completo de la fuente con la extensión para cada fuente que haya agregado a la carpeta de fuentes

   • es decir, si el nombre del archivo de fuente es OpenSans-ExtraBold.ttfentonces ese debería ser el valor del artículo.

6. Para usar la fuente en React Native, simplemente configure el fontFamily estilo attribute para el elemento (ver esto). Tenga en cuenta que el estilo debe utilizar el nombre de la fuente en lugar del nombre del archivo.

   • por ejemplo, en el ejemplo anterior, el estilo attribute sería fontFamily: 'Open Sans'

7. Ejecute Shift + Command + K para limpiar la última compilación

8. Luego Comando + B para comenzar una nueva compilación

9. Y finalmente Comando + R para ejecutar la aplicación

Si aún ve el error Familia de fuentes no reconocida, reinicie su empaquetador de reacción.

https://github.com/alucic/react-native-cheat-sheet

¡Espero eso ayude!

ACTUALIZAR

No necesita instalar rnpm manualmente ahora. Después del paso uno, en el paso dos, puede usar el comando react-native link y todos sus activos estarán vinculados. rnpm ahora se fusiona con react-naitve. Consulte este compromiso en RN https://github.com/facebook/react-native/commit/e8b508144fdcdea436cf4d80d99daec757505c70

---

Hay una manera más fácil de hacer las cosas a través de `rnpm. Agrega fuentes tanto para Android como para iOS. Coloque la fuente que desea agregar en una ubicación adecuada dentro del directorio de su proyecto. En su paquete.json simplemente agregue lo siguiente:

paso 1

...
    "rnpm": 
          "assets": ["path/to/your/font/directory"]
    ,
...

paso 2

Luego desde la línea de comando haz: rnpm link

ahora puede usar felizmente sus fuentes en su aplicación.

Nota: debe tener instalado rnpm para que esto funcione. Solo haz npm install -g rnpm

Aquí está la documentación: https://github.com/rnpm/rnpm#advanced-usage

La respuesta de Aakash es correcta.

Método:

1. Agregue su fuente a una carpeta en su proyecto nativo de reacción
2. Agregue a package.json lo siguiente

 "rnpm": 
    "assets": ["./your/fonts/folder"]
  

3. correr react-native link en tu terminal

Opcionalmente:

1. agregar rnpm usando npm install -g rnpm
2. correr rnpm link

Ejemplo de uso

1. Puse myFont.ttf en una carpeta cuya ruta (relativa a package.json) es ./src/assets/fonts
2. Puse el siguiente código en el archivo package.json

  "rnpm": 
    "assets": ["./src/assets/fonts"]
  

3. corro en la terminal

enlace nativo de reacción

4. Lo uso en un elemento de texto en react-native como este: (sin el espacio después del primer < and without the space before the last > )

< Text style= fontFamily: myFont > ¡Hola MyFont! < /Text >

Imágenes:
enlace paquete.json

Gracias por la gran respuesta Aakash, ¡espero que no te importe el nuevo desglose para los novatos como yo!

Comentarios y puntuaciones

Si te gusta la invitación, tienes la opción de dejar una noticia acerca de qué te ha impresionado de este tutorial.

---

---

Utiliza Nuestro Buscador