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

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

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

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

效果

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

  • 代码

      <View style={styles.container} >
          <Text style={styles.iconStyle}></Text>
          <Text style={styles.iconStyle}></Text>
          <Text style={styles.iconStyle}></Text>
          <Text style={styles.iconStyle}></Text>
          <Text style={styles.iconStyle}></Text>
      </View>
          
      //样式
      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. 使用

<View style={styles.container} >
    <Text style={{fontFamily:'iconfont'}}></Text>
    <Text style={{fontFamily:'iconfont'}}></Text>
    <Text style={{fontFamily:'iconfont'}}></Text>
    <Text style={{fontFamily:'iconfont'}}></Text>
    <Text style={{fontFamily:'iconfont'}}></Text>
</View>

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

4. 弊端

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

更新

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

 Unrecognized font family 'iconfont'

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

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

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

推荐阅读更多精彩内容