J'apprends react-native, j'essaie de créer des applications de démonstration juste pour apprendre. Je veux définir fontFamily pour supprimer le titre de ma barre d'outils.

J'ai ajouté roboto thin ttf dans le dossier assets/fonts de mon projet Android, mais il semble que cela crée des problèmes lors de l'exécution de l'application. Je reçois ce problème lors de l'exécution

démarrage natif de réaction

ERROR  EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\gener
ated\source\r\debug\android\support\v7\appcompat'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"E:\\Myntra\\android\\app
\\build\\generated\\source\\r\\debug\\android\\support\\v7\\appcompat"}
Error: EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\genera
ted\source\r\debug\android\support\v7\appcompat'
    at Error (native)

Lorsque je supprime la police, cela fonctionne bien. Je suis incapable de résoudre ce problème, quelqu'un peut-il m'aider quelle peut en être la raison.

Merci d'avance.

16
N Sharma 24 janv. 2017 à 13:05

6 réponses

Meilleure réponse
  1. Ajoutez votre fichier de polices dans

    • Project folder/android/app/src/main/assets/fonts/font_name.ttf
  2. Redémarrez le gestionnaire de packages à l'aide de react-native run-android
  3. Ensuite, vous pouvez utiliser votre police dans votre style, par exemple
    • fontFamily: 'font_name'

Consultez ici d'autres exemples Exemples de polices personnalisées

22
Moso Akinyemi 22 avril 2019 à 23:23

Si vous utilisez React Native, il y a de fortes chances que vous utilisiez également Expo. Si tel est le cas, vous pouvez charger des polices personnalisées à l'aide de {{ Méthode X0}}.

Pas:

  1. Mettez la police téléchargée dans le répertoire ./assets/fonts (si le répertoire n'existe pas, créez-le)
  2. À partir du composant cible (par exemple: App.js), chargez le module Font d'Expo:

    import { Font } from 'expo'
    
  3. Chargez la police personnalisée à l'aide de componentDidMount:

    componentDidMount() {
      Font.loadAsync({
        'Roboto': require('../assets/fonts/Roboto-Regular.ttf'),
      })  
    }
    
  4. Enfin, utilisez l'attribut style pour appliquer la police souhaitée sur un composant <Text>:

    <Text style={{fontFamily: 'Roboto', fontSize: 38}}>Wow Such Title</Text>
    
5
Juan Marco 1 déc. 2017 à 17:03

La réponse de @ nitin-anand était la plus appropriée et la plus propre que les autres, mais cette méthode est maintenant obsolète et nous devrons maintenant créer un fichier react-native.config.js dans notre racine avec la configuration suivante comme exemple:

module.exports = {
 project: {
  ios: {},
  android: {},
 },
 assets: ['./assets/fonts'], 
}; 
0
Muhammad Ovi 2 août 2019 à 11:06

Mettez toutes vos polices dans votre répertoire de projet React-Native

./assets/fonts/

Ajoutez la ligne suivante dans votre package.json

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

Enfin exécuter dans le terminal depuis le répertoire de votre projet

$ react-native link

Pour l'utiliser, déclarez-le dans vos styles

fontFamily: 'your-font-name without extension'

Si votre police est Raleway-Bold.ttf ,

fontFamily: 'Raleway-Bold'
36
Nitin Anand 13 juin 2017 à 10:19

Ajout d'une police personnalisée avec EXPO

Si vous utilisez React Native, il est probable que vous utilisiez également Expo. Si tel est le cas, vous pouvez charger des polices personnalisées à l'aide de la méthode Font.loadAsync d'Expo.

Pas

  1. Déplacez votre police dans le dossier actifs / polices
  2. À partir du composant cible (par exemple: App.js), chargez le module Font de l'Expo:
import { Font } from 'expo'
  1. Définir un état
this.state = {
   fontLoaded: false
}
  1. Chargez la police personnalisée à l'aide de componentDidMount:
async componentDidMount() {
   await Font.loadAsync({
       'ComicSansBold': require('../assets/fonts/ComicSansMSBold.ttf'),
   })

   this.setState({fontLoaded: true})
}
  1. Enfin, utilisez l'attribut style pour appliquer la police souhaitée sur un composant:
{
  this.state.fontLoaded
  ? <Text style={{
    fontSize: 48,
    fontFamily: 'ComicSansBold'
    }}>Glad to Meet You!</Text>
  : null
}

Profitez du codage ....

Ma sortie: Comment ajouter une police personnalisée dans React native

0
Chhay Rith Hy 4 sept. 2019 à 09:11

Mise à jour:

À partir de la cli docs, "rnpm" est obsolète et sa prise en charge sera supprimée dans la prochaine version majeure de l'interface de ligne de commande.

À la place, créez un react-native.config.js dans le dossier de votre projet

module.exports = {
  assets: ['./assets/fonts'],
};

Mettez vos polices dans ./assets/fonts. Faites référence à vos polices (par exemple McLaren-Regular.ttf) dans le prop styles, {fontFamily: 'McLaren-Regular'}. Si vous utilisez des composants stylisés, alors font-family: McLaren-Regular

Aucun paramètre de liaison ou de génération hérité requis pour les deux plates-formes Si cela ne fonctionne pas (parfois ce n'est pas le cas pour moi), exécutez npx react-native link, même si vous utilisez la liaison automatique.

2
Ben Butterworth 13 janv. 2020 à 05:45