本文主要讨论如何在 React Native 中快捷配置 iconfont - 自定义字体文件。
工具类库及网站索引：
最终效果
简单的设置 Icon 组件的 name, color, size 属性来显示自定义的 iconfont（支持 react native vector icons 所有属性）。
<Icon name={"register"} color={'#E5E5E5'} size={20}/>
配置过程
-
安装 react native vector icons
运行
$ npm install react-native-vector-icons --save-
如果你想使用库中的默认字体文件，则需要链接资源库(可选)
- 自动链接：
$ react-native link - 手动链接：请参考 react-native-vector-icons 官方 github 中 Installation 部分有关 iOS 和 Android 的内容
- 自动链接：
重新运行项目
-
测试是否安装成功：在任一组件中引用 Icon 组件，并通过如下方法引用
import Icon from 'react-native-vector-icons/FontAwesome'; <Icon name="rocket" size={30} color="#900" />
-
使用 iconfont-自定义字体
- 从 iconfont - 阿里巴巴矢量图图标 中选择喜欢的自定义字体，然后加入自己的项目中。
-
打包下载项目到本地
download_to_local.jpeg -
解压项目文件，获取项目内容
get_font_files.jpeg - 打开 fontello 网站 拖拽上图文件夹中的 svg 文件至页面。
-
选中需要的自定义字体并打包下载
download_web_font.jpeg - 在下载解压的文件夹中找到 config.json 文件和 font 文件夹下的 fontello.ttf 文件
-
打开 xcode，将 fontello.ttf 文件拖入 RN 项目的 Resource 文件夹，注意必须勾选 ‘Create groups’ 和 ‘Add to targets’ 选项
import_ttf_to_xcode.jpeg -
在 xcode 点击项目名，再点击 Info tab, 手动添加相应字段
link_ttffile.jpeg - Android 平台中只需将 fontello.ttf 文件放入
android/app/src/main/assets/fonts文件夹即可 - 在 RN 项目中合适的位置引入 config.json 文件
- 在项目中生成新组件
import { createIconSetFromFontello } from 'react-native-vector-icons'; import fontelloConfig from './config.json'; export default Icon = createIconSetFromFontello(fontelloConfig);11.在项目中需要使用 Icon 的位置直接引入该组件，通过如下代码显示 iconfont
<Icon name={"register"} color={'#E5E5E5'} size={20}/>
