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

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

2020/05/14更新

接入第三方字体ttf

AirbnbCereal-Bold.ttf
AirbnbCereal-Light.ttf

Android

字体文件放在android/app/src/main/assets/fonts/文件目录下就行了
使用的时候在style中指定fontFamily即可

fontFamily: 'AirbnbCerealApp-Bold',

iOS

1、把字体文件拖到iOS工程目录下

Copy items if needed
Create groups

确保在xcode中的TARGETS->PROJECT->Build Phases->Copy Bundle Resources中包含这些字体文件

2、修改Info.plist:
加入以下代码（本质上是添加 Fonts provided by application项）

<key>UIAppFonts</key>
<array>
    <string>AirbnbCereal-Bold.ttf</string>
    <string>AirbnbCereal-Light.ttf</string>
</array>

3、输出iOS系统支持的所有字体

-(void)logFont {
    // 输出所有的字体名称，搜索是否有刚加入的字体文件名
    for (NSString *familyName in [UIFont familyNames]) {
       NSArray *familyNameArr = [UIFont fontNamesForFamilyName:familyName];
       NSLog(@"----------------");
       NSLog(@"familyName: %@", familyName);
       NSInteger tempCount = [familyNameArr count];
       for (NSString *fontName in familyNameArr) {
           NSLog(@"fontName: %@", fontName);
       }
    }
}

在输出的结果中搜索包含Airbnb的项
familyName: Airbnb Cereal App
fontName: AirbnbCerealApp-Bold
fontName: AirbnbCerealApp-Light

因此iOS端不能在代码中直接使用AirbnbCereal-*，而应该使用AirbnbCerealApp-*

//以使用 AirbnbCereal-Bold.ttf 为例
❌
fontFamily: 'AirbnbCereal-Bold',
✅
fontFamily: 'AirbnbCerealApp-Bold',

接下来说的是使用iconfont，字体文件 —> 图标

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

首先推荐一个网站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
默认值是icon和iconfont
如果这里有自定义的情况的话，在代码中引用的时候fontFamily:'自定义FontFamily'

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

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