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的不足之处。