React-Native配置自定义字体文件

阿里巴巴矢量图标库中选择适合的图标,并打包下载

下载后得到如下文件,iconfont.tff
即为所需文件


在根工程目录下创建assets/fonts/
文件夹,导入iconfont.ttf
文件


  1. iOS
    把fonts
    文件夹拖到iOS工程目录下



    注意最终得到的是蓝色的文件夹

修改Info.plist
在info.plist文件中添加key为Fonts provided by application
的Array中添加itemfonts/iconfont.ttf
,到此为止,已经可以在RN项目(iOS端)中使用对应fontFamily
:iconfont
中的字体图标了如下图所示:

  1. Android
    之所以在工程目录下创建assets/fonts
    这样的路径,就是为了iOS和Android统一,因为Android必须要把字体文件放在[project root]/android/app/src/main/assets/fonts/
    文件夹下才能生效,好吧,我们把工程目录下的assets
    拷贝一份(可以通过编写脚本自动执行)到Android/app/src/main
    目录下


  2. 使用
<Text style={{ fontFamily:'iconApp',fontSize:26,color:'gray',marginTop:15}} >&#xe623;</Text>

fontFamily可以设置好几个字体库在文件里面,选择你需要的来添加。

当然,在RN,还可以用react-native-vector-icons
这个插件。

推荐阅读更多精彩内容