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
Restart the package manager using react-native run-android
Then you can use your font in your style e.g
- fontFamily: 'font_name'

Check here for further examples Custom Font Examples

回答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:

UPDATE

Many answers are here for adding custom font in react-native for version < 0.60.

For those who are using react-native version > 0.60 , 'rnpm' is deprecated and custom fonts will not work.

Now, in order to add custom font in react-native version > 0.60 you will have to :

1- Create a file named react-native.config.js in the root folder of your project.

2- add this in that new file

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

3- run react-native link command in the root project path.

PS Make sure you have the right path for the fonts folder before running react-native link command

回答4:

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:

Put the downloaded font in the ./assets/fonts directory (if the directory doesn't exist, create it)
From the target component (for example: App.js) load Expo's Font module:
```
import { Font } from 'expo'
```

Load the custom font using componentDidMount:

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

Finally, use the style attribute to apply the desired font on a <Text> component:
```
<Text style={{fontFamily: 'Roboto', fontSize: 38}}>Wow Such Title</Text>
```

回答5:

@nitin-anand's answer was the most appropriate and cleaner than the rest, but that method is now deprecated and now we will have to create a react-native.config.js file in our root with the following configuration as an example:

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

回答6:

Adding Custom Font with EXPO

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

Move your font to asset/fonts folder
From the target component (for example: App.js) load Expo's Font module:

import { Font } from 'expo'

Set a state

this.state = {
   fontLoaded: false
}

Load the custom font using componentDidMount:

async componentDidMount() {
   await Font.loadAsync({
       'ComicSansBold': require('../assets/fonts/ComicSansMSBold.ttf'),
   })

   this.setState({fontLoaded: true})
}

Finally, use the style attribute to apply the desired font on a component:

{
  this.state.fontLoaded
  ? <Text style={{
    fontSize: 48,
    fontFamily: 'ComicSansBold'
    }}>Glad to Meet You!</Text>
  : null
}

Enjoy Coding....

My Output:

来源：https://stackoverflow.com/questions/41825276/how-to-add-custom-font-in-react-native-android

标签

android

react-native

react-native-android