How to add custom font in react native android

问题:

I am learning react-native, trying to create some demo apps just for learning. I want to set fontFamily to roboto thin of my toolbar title.

I have added roboto thin ttf in assets/fonts folder of my android project, however it seems that it is creating issues while running app. I am getting this issue while running

react-native start

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) 

When I am removing the font then it is working fine. I am unable to fix this issue, can anyone help me what can be the reason for this.

Thanks in advance.

回答1:

Add your fonts file in

• Project folder/android/app/src/main/assets/fonts/font_name.ttf
• Remember to recompile that is "react-native run-android"
• And then you can use fontFamily: 'font_name' in your style

look here font

回答2:

Put all your fonts in you React-Native project directory

./assets/fonts/ 

Add the following line in your package.json

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

finally run in the terminal from your project directory

$ react-native link 

to use it declare this way in your styles

fontFamily: 'your-font-name without extension' 

If your font is Raleway-Bold.ttf then,

fontFamily: 'Raleway-Bold' 

回答3:

If you're using React Native chances are that you are using Expo as well. If that's the case, then you can load custom fonts using Expo's Font.loadAsync method.

Steps:

1. Put the downloaded font in the ./assets/fonts directory (if the directory doesn't exist, create it)

2. From the target component (for example: App.js) load Expo's Font module:

   import { Font } from 'expo' 

3. Load the custom font using componentDidMount:

   componentDidMount() {   Font.loadAsync({     'Roboto': require('../assets/fonts/Roboto-Regular.ttf'),   })   } 

4. Finally, use the style attribute to apply the desired font on a <Text> component:

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

文章来源: How to add custom font in react native android