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

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

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

关于<Text>组件

通过fontFamily可以指定<Text>显示的字体文件，下文将详细说明

代码

  <View style={{backgroundColor:'white',width:width-44,height: 36,marginTop: 2,flexDirection:'row',alignItems: 'center',justifyContent: 'space-around',}} >
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe603;</Text>
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe602;</Text>
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe604;</Text>
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe605;</Text>
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe600;</Text>
  </View>

效果图：
React-Native配置自定义字体文件

下面说重点

从阿里巴巴矢量图标库中选择适合的图标，并打包下载
React-Native配置自定义字体文件

下载后得到如下文件，iconfont.tff即为所需文件
React-Native配置自定义字体文件

在根工程目录下创建assets/fonts/文件夹，导入iconfont.ttf文件
React-Native配置自定义字体文件

1. iOS

把fonts文件夹拖到iOS工程目录下
React-Native配置自定义字体文件
React-Native配置自定义字体文件

另外还需要在info.plist文件key为 Fonts provided by application的Array中添加item fonts/iconfont.ttf，到此为止，已经可以在RN项目中使用对应fontFamily:iconfont中的字体图标了

2. Android

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

3. 使用

<View style={{backgroundColor:'white',width:width-44,height: 36,marginTop: 2,flexDirection:'row',alignItems: 'center',justifyContent: 'space-around',}} >
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
</View>

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

4. 弊端

图标对应的unicode码(如：“““)跟显示的图标没有直接的对应关系
//www.greatytc.com/p/96d5c66791c3