React-Native项目矢量图标库（react-native-vector-icons）

系列文章目录

  1. React-Native环境搭建（IOS）
  2. React-Native项目 — 关于IOS知识储备
  3. React-Native项目工程搭建（开发模板搭建）
  4. React-Native项目矢量图标库（react-native-vector-icons）

目录

  • 系列文章目录
  • 前言
  • 一、基本使用
    • 1、下载
    • 2、Ios中使用
    • 3、Android中使用
    • 4、代码中使用
  • 二、自定义图标的使用
    • 1、把iconfont的ttf文件注入Ios中
    • 2、自定义图标组件
    • 3、使用该组件
  • 总结

前言

在一个前端的工程项目中，一个必不可少的功能就是图标库的使用。相比于图片，矢量图标库，有容积小，不失真，减少资源加载等优秀特性。

为了解决图标库的使用，在web领域有一个非常火热的网站叫阿里巴巴矢量图标库—iconfont。

React-Native项目也是一样，它也需要使用矢量图标库，官方推荐的图标库就是 react-native-vector-icons，它集成了市面上大多数 UI 框架的默认 Icon 库，例如：FontAwesome、AntDesign、MaterialCommunityIcons、Entypo 等等。我们使用任何比较知名的开源图标库，在这里都能够友好的使用。

一、基本使用

1、下载

yarn add react-native-vector-icons

2、Ios中使用

修改 Podfile 文件，使用 CocoaPods 对 ios 安装这个字体库

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

在 IOS 目录下执行

pod install

项目重启执行，即可在代码中使用。

3、Android中使用

编辑 android/app/build.gradle

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

4、代码中使用

比如，你要使用 AntDesign 中的 Icon

// react-native-vector-icons
import Icon from "react-native-vector-icons/AntDesign";

// tsx
<Icon name="home" size={30} color="#900" />
<Icon style={styles.icon} name="creditcard" size={30} color="#900" />
<Icon style={styles.icon} name="codesquareo" size={30} color="#900" />
<Icon style={styles.icon} name="book" size={30} color="#900" />

字体图标使用

二、自定义图标的使用

有些时候，我们所使用的图标，不属于某个知名的开源框架，而是由我们团队内部的UI设计师所提供，这个时候，一般就会使用自定义的方式，使用自体图标库。

react-native-vector-icons，提供了createIconSet函数，方便我们自定义我们的图标库。语法格式如下：

createIconSet(glyphMap, fontFamily[, fontFile])

首先，我们需要一个字体图标的文件，一般是后缀为 ttf 的字体文件。假如这个文件的名字为 iconfont。

1、把iconfont的ttf文件注入Ios中

一般而言，我们会使用一个 react-native-asset 的包，进行字体文件的链接。

其文档参考：https://www.npmjs.com/package/react-native-asset

该包相当于把一些公用的资源，同时打包注入到 Android 和 Ios 项目中。

2、自定义图标组件

import {createIconSet} from 'react-native-vector-icons';

const glyphMap = {
  chufang: 59518,
  dizhi: 59519,
  anquan: 59520,
  huiyuan: 59521,
  bianji: 59522,
  baogao: 59523,
};

const CustomIcon = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');

export default CustomIcon;

3、使用该组件

// import
import CustomIcon from '../../components/CustomIcon';
// tsx
<CustomIcon name="chufang" size={30} color="#900" />
<CustomIcon name="dizhi" size={30} color="#900" />
<CustomIcon name="anquan" size={30} color="#900" />
<CustomIcon name="bianji" size={30} color="#900" />

总结

React-Native作为移动开发的一款框架，本身自身不提供基于字体图标的任何组件，但是其社区，提供了非常好的支持，react-native-vector-icons就是字体图标的官方推荐包。

在大多数的情况下，我们使用react-native-vector-icons中自带的字体图标，已经够用了。因为它已经包含了几乎社区所有热门的字体图标库。同时，他也支持自定义的字体图标库，我们只需要提供一个简单的ttf文件，即可实现我们的诉求。

但是，react-native-vector-icons支持的范畴，仅仅限于字体图标，它不支持图片。我们很多web端的图标组件，是支持图片的方式的，这可能就是react-native-vector-icons的不足之处。