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>

從而作出以下的效果: