expo xml font

expo-xml-fuente

Use fuentes XML Android fácilmente con este complemento de Expo.

Este complemento desarrolla una guía increíble disponible en https://github.com/jsamr/react-native-font-demo sobre cómo usar fuentes XML en React Native, pero proporciona una API fácil de usar para que no tenga que jugar manualmente con los archivos nativos.

Instalación

Nota

V3 es para Expo 50 <= mientras que V2 es para Expo 49> =

1. Instale el complemento

 # using yarn
yarn add expo-xml-font

# using npm
npm install expo-xml-font

2. Agregue el complemento a la sección plugins de su archivo app.json o app.config.js :

{
  "plugins" : [ " expo-xml-font " ]
}

Uso

Este ejemplo usará Inter como ejemplo, pero puede usar cualquier fuente que desee.

1. Obtenga su fuente y todas sus variantes

 Inter-Thin.ttf (100)
Inter-ExtraLight.ttf (200)
Inter-Light.ttf (300)
Inter-Regular.ttf (400)
Inter-Medium.ttf (500)
Inter-Semibold.ttf (600)
Inter-Bold.ttf (700)
Inter-Extrabold.ttf (800)
Inter-Black.ttf (900)

2. Cambie todos los guiones ("-" S) a subrayadores ("_") y todas las letras mayúsculas a letras minúsculas. Esto se requiere para ser compatible con las restricciones de nombres de activos de Android

 inter_thin.ttf (100)
inter_extraLight.ttf (200)
inter_light.ttf (300)
inter_regular.ttf (400)
inter_medium.ttf (500)
inter_semibold.ttf (600)
inter_bold.ttf (700)
inter_extrabold.ttf (800)
inter_black.ttf (900)

3. Copie estos archivos en una carpeta donde está su proyecto. Puede colocar los archivos de fuentes en una carpeta de assets/fonts por ejemplo.

4. Configurar expo-xml-font en su app.json o app.config.js :

{
  "plugins" : [
    [
      " expo-xml-font " ,
      [
        {
          "name" : " Inter " ,
          "folder" : " assets/fonts " ,
          "variants" : [
            { "fontFile" : " inter_thin " , "fontWeight" : 100 },
            { "fontFile" : " inter_extralight " , "fontWeight" : 200 },
            { "fontFile" : " inter_light " , "fontWeight" : 300 },
            { "fontFile" : " inter_regular " , "fontWeight" : 400 },
            { "fontFile" : " inter_medium " , "fontWeight" : 500 },
            { "fontFile" : " inter_semibold " , "fontWeight" : 600 },
            { "fontFile" : " inter_bold " , "fontWeight" : 700 },
            { "fontFile" : " inter_extrabold " , "fontWeight" : 800 },
            { "fontFile" : " inter_black " , "fontWeight" : 900 }
          ]
        }
      ]
    ]
  ]
}

5. Ejecute expo prebuild para generar las fuentes XML. ¡Ahora puedes usarlos en tu código!

Configuración

Al usar expo-xml-font , debe pasar un objeto que proporcione todos los detalles de la fuente.

 type Options = {
  /**
   * Name of font
   * @example "Inter"
   */
  name : string ;
  /**
   * Path of folder which contains font files. It's alright if the path is relative.
   * @example "assets/fonts"
   */
  folder : string ;
  variants : {
    /**
     * Font file for font. Do NOT include the extension.
     * @example "inter_regular.ttf" -> "inter_regular"
     */
    fontFile : string ;
    /** The font weight of the provided font file */
    fontWeight : 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ;
    /**
     * Specifies whether or not the font file is italic
     * @default false
     */
    italic ?: boolean ;
  } [ ] ;
} [ ] ;

Dado que este complemento recibe una variedad de fuentes, puede especificar tantas familias de fuentes como desee.