最近公司项目要求,入了RN的坑,作为一个初学者,自然是被坑得体无完肤。

今天就遇到了一个大问题,首页需要一个这样的字体,如下图:

然而,官方文档对自定义字体却毫无提及。

那么,直入主题,网上方法很多,最终解决方法是:

解决方法

  • filename.ttf放到<Project Root>/android/app/src/main/assets/fonts文件夹下

  • 在项目目录下使用命令

    1
    2
    3
    4
    rm -rf ./android/.gradle
    rm -rf ./android/app/build
    cd android && ./gradlew clean && cd ..
    // 以上命令极为重要
  • 然后应用字体

    1
    fontFamily:"filename"
  • 最后

    1
    react-native run-android

    就是这么简单,但是却坑了我将近一天

其他

如果上述方法不能成功,还有其他方法尝试,但是其他方法于我无效,仅供参考。

其一(地址)

Put all your fonts in you React-Native project directory

1
./assets/fonts/

Add the following line in your package.json

1
2
3
"rnpm": {
"assets": ["./assets/fonts"]
}

finally run in the terminal from your project directory

1
react-native link

to use it declare this way in your styles

1
fontFamily: 'your-font-name without extension'

If your font is Raleway-Bold.ttf then,

1
fontFamily: 'Raleway-Bold'
其二(地址)

链接中@satya164的回复,代码太长,就不在此贴了,可以跳转过去看。

不过,其方法是对全局的字体进行设置,和我当前需求不符,有此需求的朋友可以试一试。

参考

https://github.com/facebook/react-native/issues/1167

https://stackoverflow.com/questions/33088510/react-native-android-fontfamily-does-not-take-effect/37413939#37413939

BTW

作为一个程序员,一定要使用Google,尽量使用英语。

在这次排坑的过程中,最开始我使用的关键词是React Native 自定义字体 Android,最后搜到的结果是千篇一律,百家争抄的景象,不仅过时已久而且格式混乱,可以说就是些垃圾。

后来,我换成了React Native custom font Android,得到的结果多来自于Medium,stackoverflow或Github,最终也是因为它们而解决。