react-native
Fuentes personalizadas

Pasos para usar fuentes personalizadas en React Native (Android)

1. Pegue su archivo de fuentes en android/app/src/main/assets/fonts/font_name.ttf
2. Recompila la aplicación de Android ejecutando react-native run-android
3. Ahora, puedes usar fontFamily: 'font_name' en tus React Native Styles

Pasos para usar fuentes personalizadas en React Native (iOS)

1. Incluye la fuente en tu proyecto Xcode.

2. Asegúrese de que estén incluidos en la columna de membresía de destino

Haga clic en la fuente del navegador y compruebe si la fuente está incluida.

3. Compruebe si la fuente incluida como recurso en su paquete

haga clic en el archivo de proyecto de Xcode, seleccione "Crear fases, seleccione" Copiar recursos del paquete ". Compruebe si se ha agregado la fuente.

4. Incluir la fuente en Application Plist (Info.plist)

desde la carpeta principal de la aplicación, abra Info.plist, haga clic en "Lista de propiedades de información" y luego haga clic en el signo más (+). De la lista desplegable, elija "Fuentes proporcionadas por la aplicación".

5. Añadir el nombre de la fuente en las fuentes proporcionadas por la aplicación

expanda las fuentes proporcionadas por la aplicación y agregue el nombre de la fuente exactamente a la columna de valor

6. Utilízalo en la aplicación.

    <Text style={{fontFamily:'IndieFlower'}}>
      Welcome to React Native!
    </Text>
   

Fuentes personalizadas tanto para Android como para iOS

• Cree una carpeta en la carpeta de su proyecto y agregue sus fuentes a ella. Ejemplo:

  • Ejemplo: Aquí agregamos una carpeta en la raíz llamada "mystuff", luego "fuentes", y dentro de ella colocamos nuestras fuentes:
    • 

• Agregue el siguiente código en package.json .

  {
      ...
  
      "rnpm": {
          "assets": [
            "path/to/fontfolder"
          ]
      },
  
      ...
  }
  

  • Para el ejemplo anterior, nuestro package.json ahora tendría una ruta de "mystuff / fonts":

    "rnpm": {
      "assets": [
        "mystuff/fonts"
      ]
    }
    

• Ejecutar el comando de react-native link .

• Usando fuentes personalizadas en el proyecto debajo del código

  <Text style={{ fontFamily: 'FONT-NAME' }}>
      My Text
  </Text>
  

  Donde FONT-NAME es el prefijo específico de la plataforma.

  Androide

  FONT-NAME son las palabras antes de la extensión en el archivo. Ejemplo: el nombre de archivo de su fuente es Roboto-Regular.ttf , por lo que debe establecer fontFamily: Roboto-Regular .

  iOS

  FONT-NAME es el "Nombre completo" que se encuentra después de hacer clic derecho, en el archivo de fuente, y luego hacer clic en "Obtener información". (Fuente: https://stackoverflow.com/a/16788493/2529614 ), en la captura de pantalla siguiente, el nombre del archivo es MM Proxima Nova Ultra bold.otf , sin embargo "Nombre completo" es "Proxima Nova Semibold", por lo que set fontFamily: Proxima Nova Semibold . Captura de pantalla -

• Ejecute react-native run-ios o react-native run-android nuevamente (esto se volverá a compilar con los recursos)