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

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

example

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

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

解决方法

  • 把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，最终也是因为它们而解决。