react-native
Polices Personnalisées

Étapes pour utiliser des polices personnalisées dans React Native (Android)

1. Collez votre fichier de polices à l'intérieur d' android/app/src/main/assets/fonts/font_name.ttf
2. Recompiler l'application Android en exécutant react-native run-android
3. Maintenant, vous pouvez utiliser fontFamily: 'font_name' dans vos styles natifs React

Étapes pour utiliser des polices personnalisées dans React Native (iOS)

1. Incluez la police dans votre projet Xcode.

2. Assurez-vous qu'ils sont inclus dans la colonne Adhésion cible

Cliquez sur la police du navigateur et vérifiez si la police est incluse.

3. Vérifiez si la police incluse en tant que ressource dans votre bundle

Cliquez sur votre fichier de projet Xcode, sélectionnez "Build Phases, sélectionnez" Copy Bundle Resources ". Vérifiez si votre police est ajoutée.

4. Inclure la police dans Application Plist (Info.plist)

Dans le dossier principal de l'application, ouvrez Info.plist, cliquez sur "Liste des propriétés d'informations", puis sur le signe plus (+). dans la liste déroulante, choisissez "Polices fournies par l'application".

5. Ajouter le nom de la police dans les polices fournies par l'application

Développez Polices fournies par l'application et ajoutez le nom exact de la police à la colonne Valeur

6. Utilisez-le dans l'application

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

Polices personnalisées pour Android et IOS

• Créez un dossier dans votre dossier de projet et ajoutez-y vos polices. Exemple:

  • Exemple: Ici, nous avons ajouté un dossier dans la racine appelé "mystuff", puis "polices", et à l’intérieur nous avons placé nos polices:
    • 

• Ajoutez le code ci-dessous dans package.json .

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

  • Pour l'exemple ci-dessus, notre package.json aurait maintenant un chemin de "mystuff / fonts":

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

• Exécutez la commande de react-native link .

• Utilisation de polices personnalisées sur le projet sous le code

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

  Où FONT-NAME est la plate-forme de préfixe spécifique.

  Android

  FONT-NAME est le mot avant l'extension dans le fichier. Exemple: Le nom de fichier de votre police est Roboto-Regular.ttf , vous devez donc définir fontFamily: Roboto-Regular .

  iOS

  FONT-NAME est "Full Name" trouvé après un clic droit sur le fichier de police, puis en cliquant sur "Get Info". (Source: https://stackoverflow.com/a/16788493/2529614 ), dans la capture d'écran ci-dessous, le nom du fichier est MM Proxima Nova Ultra bold.otf , cependant "Nom complet" est "Proxima Nova Semibold", vous devriez donc fontFamily: Proxima Nova Semibold . Capture d'écran -

• Exécutez react-native run-ios ou react-native run-android (ceci sera recompilé avec les ressources)