react-native-vector-icons 入门

2018-08-24 本文已影响0人 boyrt

关于rn项目如何添加react-native-vector-icons，不进行说明，请参照react-native-vector-icons 。

1. iconfont

react-native-vector-icons是rn项目采用iconfont的工具库。那么问题来了，iconfont是什么？（肯定很多人都知道了，这里我还是提下）
简单说，就是我们平时用的字体，不再是我们传统认知上的“文字”，而是一个个的图标。

iconfont
一次搞懂 IconFont 是什么

2. react-native-vector-icons使用

2.1 Component

Icon

You can either use one of the bundled icons above or roll your own custom font.
您可以使用上面的捆绑图标之一，或者滚动您自己的自定义字体

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)

Icon.Button

A convenience component for creating buttons with an icon on the left side.
一个组件，该组件方便创建一个左侧有icon的按钮。

import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998" onPress={this.loginWithFacebook}>
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text>
  </Icon.Button>
);

2.2 Usage as PNG image/source object

Icon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));

3. Custom Fonts

react-native-vector-icons提供了很多iconfont,如：

fonts

使用自定义的iconfont的有两种方式：

（1）阿里iconfont中下载图标包；
（2）将设计师设计的svg矢量图上传到IcoMoon或Fontello,自定义font。

react-native-vector-icons提供了三个函数，用于自定义font：

createIconSet(glyphMap, fontFamily[, fontFile]

针对阿里iconfont下载的icon，创建icon。glyphMap需要创建xxx.json文件。

import { createIconSet } from 'react-native-vector-icons';
const glyphMap = { 'icon-name': 1234,... };
const Icon = createIconSet(glyphMap, 'FontName'，'iconfont.ttf');

createIconSetFromFontello(config[, fontFamily[, fontFile]])

针对上传到Fontello的自定义font。xxx.json文件不需要自定义。

import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);

createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

针对上传到IcoMoon的自定义font。xxx.json文件不需要自定义。

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(icoMoonConfig);

疑问：react-native-vector-icons提供的三个函数，其中有些参数是选填，不理解这一块。希望大神解惑哈o(╥﹏╥)o

在自定义iconfont的测试中发现，如果svg图片上传到icomoon，下载zip文件，从zip文件中获取selection.json和 xx.ttf文件。此时，可使用函数1和函数3创建自定义字体类，如：

import createIconSetFromIcoMoon from 'react-native-vector-icons/lib/create-icon-set-from-icomoon';
import glyphMap from './selection.json';

const iconSet = createIconSetFromIcoMoon(glyphMap);

export default iconSet;

函数1和函数3的区别在于：

第一个参数不同：函数1是自定义.json文件，而函数3是直接使用zip包中的selection.json文件。

//自定义.json文件
{
  "glass": 61440,
  "music": 61441,
  "search": 61442,
  "envelope-o": 61443,
  "heart": 61444,
  "star": 61445,
}

传入参数不同：函数1传入三个参数，函数3传入一个参数。

函数2和函数3 是在函数1的基础上封装的。

4. 总结

对应如何自定义iconfont,轮子很多，请参考：
ReactNative中iconfont使用详解
 iOS iconfont 图标字体

测试过程中，fontello上传的图标字体，显示的时候，size大小设置为20，但是显示的时候明显不是20，远大于该设置。icomoon上传的图标字体，正常显示。但是比如：

image.png

这些多色图标，上传至fontello和icomoon 都不能正常显示。（不知道是不是操作错误o(╥﹏╥)o）

如果不知道要使用的icon的name，请前往查询
https://oblador.github.io/react-native-vector-icons/

iconfont库：
阿里巴巴矢量图标库
 Fontello
IcoMoon