web-dev-qa-db-fra.com

Comment ajouter une police personnalisée dans react native android

J'apprends react-native, en essayant de créer des applications de démonstration juste pour apprendre. Je souhaite définir fontFamily sur roboto thin dans le titre de ma barre d'outils.

J'ai ajouté roboto thin ttf dans assets/fonts dossier de mon Android, mais il semble qu'il crée des problèmes lors de l'exécution de l'application. J'obtiens ce problème lors de l'exécution

démarrage réactif

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 ne peux pas résoudre ce problème. Quelqu'un peut-il m'aider pour quelle raison?.

Merci d'avance.

androidreact-nativereact-native-android
14
N Sharma

  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'

Vérifiez ici pour d'autres exemples Exemples de polices personnalisées

15
Sport

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 à partir de votre répertoire de projet

$ react-native link

pour l'utiliser, déclarez de cette façon dans vos styles

fontFamily: 'your-font-name without extension'

Si votre police est Raleway-Bold.ttf alors,

fontFamily: 'Raleway-Bold'
27
Nitin Anand

De nombreuses réponses sont là pour ajouter une police personnalisée en react-native pour la version <0.60.

Pour ceux qui utilisent version native de réaction> 0,6, 'rnpm' is deprecated et les polices personnalisées ne fonctionneront pas.

Maintenant, pour ajouter une police personnalisée dans la version native native> 0.60, vous devrez:

1- Créez un fichier nommé react-native.config.js dans le dossier racine de votre projet.

2- ajoutez ceci dans ce nouveau fichier

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

3- exécuter react-native link commande dans le chemin racine du projet.

PS Assurez-vous d'avoir le bon chemin pour le dossier des polices avant d'exécuter react-native link commande

6
Harshit Agrawal

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

Pas:

  1. Mettez la police téléchargée dans le ./assets/fonts répertoire (si le répertoire n'existe pas, créez-le)

  2. Depuis le composant cible (par exemple: App.js) charger le module Font d'Expo:

    import { Font } from 'expo'

  3. Chargez la police personnalisée en utilisant 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 <Text> composant:

    <Text style={{fontFamily: 'Roboto', fontSize: 38}}>Wow Such Title</Text>
4
Juan Marco

Ajout d'une police personnalisée avec EXPO

Si vous utilisez React Native, vous utilisez é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 asset/fonts
  2. À partir du composant cible (par exemple: App.js), chargez le module Police d'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: How to add custom font in react native

0
Chhay Rith Hy

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 allons maintenant devoir créer un react-native.config.js fichier dans notre racine avec la configuration suivante comme exemple:

module.exports = {
 project: {
  ios: {},
  Android: {},
 },
 assets: ['./assets/fonts'], 
};
0
Muhammad Ovi