React-Native使用自定义字体文件iconfont

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

今天主要说说如何通过字体文件加载应用中的一些图标

首先推荐一个网站iconfont-阿里巴巴矢量图标库，这里有海量的图标，可以下载你想要的各种矢量图标，你也可以在注册并登陆账号后，把自己想要的图标打包、下载为文件

效果

• 关于组件
  通过fontFamily可以指定显示的字体文件，下文将详细说明

• 代码

    
        
        
        
        
        
    
        
    //样式
    const styles = StyleSheet.create({
        container:{
            backgroundColor:'white',
            width:width-44,
            height: 36,
            marginTop: 2,
            flexDirection:'row',
            alignItems: 'center',
            justifyContent: 'space-around'
        },
        iconStyle: {
            color: 'red',
            fontFamily:'iconfont',
            fontSize: 30 
        }
    })
  

• 效果图：

  

  用字体文件加载图标

解释

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

  

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

  

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

  

1. iOS

• 把iconfont.ttf文件拖到iOS工程目录下

• 修改Info.plist

  在info.plist文件中添加key为 Fonts provided by application的Array中添加item iconfont.ttf，到此为止，已经可以在RN项目（iOS端）中使用对应fontFamily:iconfont中的字体图标了
  如下图所示：
  

  

2. Android

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

3. 使用

    
    
    
    
    

效果就是文章开篇的效果图了

4. 弊端

图标对应的是unicode码，不够直观， (如："", "")跟显示的图标没有直接的对应关系

更新

最近注意到有评论反映在iOS端运行报错

 Unrecognized font family 'iconfont'

通过跟@_MinYa_的沟通，发现了一种导致上述问题的可能性

在阿里巴巴矢量图标库中新建项目的时候注意FontClass/Symbol前缀和Font Family
默认值是icon和iconfont
如果这里有自定义的情况的话，在代码中引用的时候fontFamily:'自定义FontFamily'

鉴于上述问题，强烈建议创建字体文件项目的时候使用默认名称