expo xml font

expo-xml-force

Utilisez facilement les polices XML Android avec ce plugin Expo.

Ce plugin construit un guide génial disponible sur https://github.com/jsamr/react-native-font-demo sur la façon d'utiliser des polices XML dans React Native, mais fournit une API facile à utiliser afin que vous n'ayez pas à jouer manuellement avec les fichiers natifs.

Installation

Note

V3 est pour Expo 50 <= tandis que V2 est pour Expo 49> =

1. Installer le plugin

 # using yarn
yarn add expo-xml-font

# using npm
npm install expo-xml-font

2. Ajoutez le plugin à la section plugins de votre fichier app.json ou app.config.js :

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

Usage

Cet exemple utilisera Inter comme exemple, mais vous pouvez utiliser n'importe quelle police que vous aimez.

1. Obtenez votre police et toutes ses 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. Changez tous les tirets ("-" s) en soulignements ("_") et toutes les lettres majuscules aux lettres minuscules. Cela doit être compatible avec les restrictions des noms d'actifs d'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. Copiez ces fichiers dans un dossier où se trouve votre projet. Vous pouvez mettre par exemple les fichiers de police dans un dossier assets/fonts .

4. Configurez expo-xml-font dans votre app.json ou 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. Exécutez expo prebuild pour générer les polices XML. Vous pouvez maintenant les utiliser dans votre code!

Configuration

Lorsque vous utilisez expo-xml-font , vous devez passer dans un objet fournissant tous les détails de la police.

 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 ;
  } [ ] ;
} [ ] ;

Étant donné que ce plugin prend un tableau de polices, vous pouvez spécifier autant de familles de polices que vous le souhaitez.