React Native与Iconfont

时间 2019-11-08

原文原文链接

　　以前老是想写一些关于学习体会和感觉的文章，今天也来一篇关于React Native的教程文章。前段时间我尝试着用React Native构建一个论坛的APP,在这个过程当中碰见一个问题: 最开始我是用图片的形式去构建APP中的图标，但用图片构建图标的过程当中会遇到一个问题，就是图片的加载速度很是之慢，APP页面加载过程当中图标会出现留白的状况，因此我就想要用Iconfont去构建图标。javascript

Iconfont

　　Iconfont，如字面的意思，就是字体图标。若是你身处在一个视觉或者交互对页面UI一天一变的蛋疼团队，你会深入的理解使用图片做为图标的不便之处:java

图标大小会变化，固然你能够经过设置的图片大小去改变图标。可是若是你开始使用的图片的分辨率较低的话，放大图标会形成图标的失真。固然你能够一开始就选择一个高分辨率的图片，可是高分辨的图片会形成加载速度减慢。node
图标的颜色会变化，假如一开始视觉要求红色的图标，明个脑子一抽风，又要求蓝色的图片。这时候若是你用的是图片，没别的办法，只能换新的图片。react
图标自己也会变化，今天视觉以为圆的图标好看，明个以为方的图标好看，咱又得辛辛苦苦替换图片或者改变图片的应用路径。android

　　有了Iconfont一切就不同了:ios

Iconfont中字体图标都是矢量的，你能够像设置字体大小同样，放大或缩小而且保证不失真。git
Iconfont中字体图标同字体相同，能够经过设置颜色属性改变图标颜色。github
Iconfont字体图标制做简单，而且目前有至关多的线上图标库和制做图标Iconfont的站点。只要上传svg的图标设计稿，就能线上生成iconfont字体文件，并且连使用代码都直接生成。json
Iconfont字体图标具备很是好的兼容性，甚至在IE6中均可以使用。react-native

React Native中使用Iconfont

　　说了Iconfont这么多的好处，如今咱们就尝试着在React Native中使用Iconfont。做为Github的搬运工，想要在React Native中使用Iconfont咱们须要使用库:react-native-vector-icons,
react-native-vector-icons 使得React Native支持自定义的图标库，并支持NavBar/TabBar/ToolbarAndroid等控件与图片形式的图标以及各类样式。其主要优势有:

你可使用自定义的图标库，支持SVG和常规的Iconfont
能够在原生的TabBarIOS中使用
你能够在Text组件中像使用emojis表情同样或者在按钮中使用图标
若是原生的组件须要的是一个Image(例如:NavigatorIOS),你能够像使用一个Image同样使用Icon
大多数状况下是在JavaScript中使用，所以能够很是灵活的定制样式而且很方便地集成进现有的项目中
不须要定义height和width
能够在样式表中定义相似size和color的属性，而不是经过属性去定义

　　react-native-vector-icons内置了不少字体图标，譬如:

Entypo by Daniel Bruce (411 icons)
EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 70 icons)
FontAwesome by Dave Gandy (v4.7.0, 675 icons)
Foundation by ZURB, Inc. (v3.0, 283 icons)
Ionicons by Ben Sperry (v3.0.0, 859 icons)
MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
MaterialCommunityIcons by MaterialDesignIcons.com (v1.9.33, 1932 icons)
Octicons by Github, Inc. (v5.0.1, 176 icons)
Zocial by Sam Collins (v1.0, 100 icons)
SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

　　固然咱们但愿可以支持咱们自定义Iconfont。下面逐步介绍若是在React Native中使用Iconfont。

　　首先，下载相应的Iconfont文件(*.ttf),咱们在阿里巴巴矢量图标库中新建一个项目，将所须要的图标都保存到该项目中，并下载到本地。

　　咱们经过react-native init的方式初始化一个React Native项目，在其中新建一个assets目录，其中再建一个font的文件夹来存储字体文件。咱们的项目是在iOS中开发的，首先在iOS进行相应的系统配置。项目目录以下图所示:

iOS配置

　　react-native-vector-icons支持至关多的内置字体库，但要使用内置字体库，也须要进行以下的配置，全部的内置字体库文件都在node_modules/react-native-vector-icons中的Fonts文件夹下。咱们以刚才下载的Iconfont.ttf为例，咱们将其复制进assets/font文件夹下。而后咱们用Xcode
打开ios目录下*.xcodeproj项目配置文件。以下图所示:

　　咱们在目录下新建Fonts文件夹(非必须)，并将assets/font中的Iconfont.ttf拖拽进工程配置中的Fonts文件夹，切记！必定要是在Xcode中拖拽进该目录，若是是拖拽进Xcode中时，咱们会看见下面的对话框,

咱们选择Create groups并按照需求选择多选项，咱们只须要在iOS中使用，就只选择第一项就能够。而后咱们打开(项目名)Guides下的Info.plist文件。

　　而后咱们在Information property list下新建Fonts provided by application属性，并配置Iconfont.ttf,以下图所示:

Android配置

　　Android的配置相对比较简单，若是只想使用在react-native-vector-icons中内置的图标，只须要在项目中android/app/build.gradle目录下增长:

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

　　对于自定义的图标库，也只须要在android/app/build.gradle中添加:

project.ext.vectoricons = [
    iconFontNames: ['Iconfont.ttf' ] //添加你须要赋值的字符文件
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

使用方法

Icon Component

　　若是是内置图标库中图标，你能够经过以下方式使用:

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

　　对于自定义图标库，咱们能够参考一下FontAwesome是怎么设计的:

/**
 * FontAwesome icon set component.
 * Usage: <FontAwesome name="icon-name" size={20} color="#4F8EF7" />
 */

import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/FontAwesome.json';

const iconSet = createIconSet(glyphMap, 'FontAwesome', 'FontAwesome.ttf');

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

　　而FontAwesome.json中代码以下

{
  "glass": 61440,
  "music": 61441,
  "search": 61442,
  "envelope-o": 61443,
  "heart": 61444,
  "star": 61445,
  "star-o": 61446,
  "user": 61447,
  //等等...
}

　　这样一看使用方法也是很是地简单，综合上述代码，咱们首先介绍一下其中的API:

createIconSet(glyphMap, fontFamily[, fontFile])

返回基于glyphMap的自定义字体集，其中key是图标的名字，值能够是UTF-8字符，也能够是字符编码(须要注意的是，glyphMap配置文件中的value须要是十进制，若是字体库中提供的是十六进制编码，那么就须要将十六进制转换成十进制数)。fontFamily不是文件名。fontFile参数是可选的，其目的是支持安卓系统，应该是资源目录下的地址。

那么很是简单，咱们也能够编写一个咱们自定义的图标组件：

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './Iconfont.json';

const iconSet = createIconSet(glyphMap, 'Iconfont', 'Iconfont.ttf');

export default iconSet;

最后的效果以下:

　　不只如此，咱们还能够在Icon中使用Text组件，

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

从而作出以下的效果:

　　react-native-vector-icons还有其余的用法，这里只是抛砖迎玉，再也不啰嗦，有兴趣你们能够到Github中仔细阅读一下文档。本文章的代码地址以下React-Native-Vector-Icons-Guides，有须要的同窗能够参考一下。