react-native-vector-icons進階教程（自定義iconfont使用）

前言

React Native大火大熱，其中爲了解決圖標，易於修改，換顏色，高清等需求，你仍是選擇切多套png來適配嗎？答案固然是否認的！不知從什麼時候起，扁平化圖標成爲潮流，iconfont也應運而生，最早接觸iconfont已經是多年前的事了，那時候只知道怎麼在web上使用，它帶來的便捷性和可擴展性也是你們有目共睹。 最早接觸iconfont這一律念仍是從一些國外的圖標網站得來，譬如flaticon、icomoon，但這些畢竟都是國外的平臺，身在大天朝說實話用的有些不習慣，這時候iconfont.cn應運而生，徹底針對中國的iconfont平臺，在使用上最起碼很順手。好了，說了這麼多隻想重申一點，iconfont你值得擁有，不管事web，仍是app，亦或是咱們今天的主角（react-native）。

1、react-native-vector-icons 概述

這個是在GitHub上最火的react-native圖標庫，使用起來簡單高效，其中內置市面上大部分開源的圖標庫，咱們只須要簡單的配置，便可立刻體驗iconfont帶來的快感，雖然其官方倉庫已經有很清楚的步驟帶領咱們一步步配置，這裏我仍是以我本身通俗的理解作下步驟講解：

2、react-native-vector-icons安裝和配置

npm install --save react-native-vector-icons
//或者
npm install -g yarn
yarn add react-native-vector-icons
複製代碼

一、android平臺

1.一、自動配置

react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons
複製代碼

會爲你配置好全部，可是這是成功的狀況下，你不須要操心任何事，可是每每不能如願。若是你這步成功了，並且可以正常運行，下面這些你就能夠跳過！

1.二、手動配置

1.2.1 複製字體文件（這一步千萬不能忘記，否則就算運行成功你也看不到圖標）

找到項目node_modules/react-native-vector-icons/Fonts，裏面有不少已經內置的圖標庫字體文件，依照本身的需求，複製你須要的字體文件到 android/app/src/main/assets/fonts，（若是沒有這個目錄就自行建立）

1.2.2 配置 android/settings.gradle

在現有的代碼基礎上添加以下代碼：

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
複製代碼

1.2.3 配置android/app/build.gradle

修改以下：

dependencies {
    compile project(':react-native-vector-icons') //添加 compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules compile project(':react-native-navigation') } 複製代碼

1.2.4 配置 android/app/src/main/java/com/xxxx/MainApplication.java

import com.oblador.vectoricons.VectorIconsPackage;
@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
+   , new VectorIconsPackage()
    );
  }
複製代碼

到這裏配置就所有完成，接下來就能夠在rn項目中使用iconfont

import Icon from 'react-native-vector-icons/dist/Ionicons';
<Icon name='ios-settings' size={16} color="#fff"/> 複製代碼

二、ios平臺

相對android來講簡單不少，能夠參照github上面的步驟來！

3、使用自定義iconfont

說了這麼多，還只是它自帶的圖標庫的使用，若是咱們要使用本身自定義的一些圖標呢，譬如iconfont.cn上面的

一、圖標準備

如上圖，做爲測試，我準備了上述圖標。點擊下載至本地，裏面包含全部的字體文件。找到iconfont.ttf，這是咱們重點須要的文件。

二、react-native-vector-icons結構分析

以下圖，找到node_modules/react-native-vector-icons的根目錄，能夠看到不少js文件，命名都是以圖標庫的名稱命名，隨便打開一個Ionicons.js，發現代碼很簡單

把這個文件複製一遍，重命名爲Iconfont.js，修改成以下：

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

const iconSet = createIconSet(glyphMap, 'fontcustom', 'Iconfont.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;
複製代碼

從上面的代碼咱們不難看出，咱們還須要個Iconfont.json文件，順着路徑能夠找到不少json文件。

這就是接下來要整理出來的字符對應表。固然你能夠手動去整理，一個兩個的還能夠，若是一個項目幾十上百個甚至更多呢，能用工具去解決的事，咱們毫不浪費時間，接下來介紹的就是如何利用工具去獲取字符表。

2.1 安裝python

點擊下載pthon安裝包www.python.org/ftp/python/… 等待安裝完成！

2.2 配置python環境變量

在path中添加 python安裝目錄以及Scripts

2.3 安裝 fonttools

pip install fonttools
複製代碼

具體介紹請參考：github地址

2.4準備react-native-iconfont-mapper

直接打包下載react-native-iconfont-mapper，或者經過git克隆到本地，這個目錄本身選個容易記住的，由於之後用的比較多。

項目比較單一，僅僅一個python文件。

2.5 提取字符表

將前面下載的字體包中的ttf文件拷貝到這裏

python iconfont-mapper.py iconfont.ttf iconfont.js
複製代碼

不出意外，能夠生成一個iconfont.js文件，打開查看即可以看到咱們所須要的json字符串

2.5 新建icon font.json

在node_modules/react-native-vector-icons/glyphmaps中新建Iconfont.json

{
  "home": 58880,
  "setting": 58881,
  "code": 58886,
  "money": 58951,
  "phone": 58952,
  "user": 58890,
  "customer": 58993,
  "message": 59034,
  "add": 59418,
  "password": 58910
}
複製代碼

這裏須要注意，剛纔生成的字符表json對象後面的值有引號，這裏須要刪除，因爲個數比較少，我仍是選擇手動刪除，若是多的話仍是推薦正則來批量刪除，可是還不會，但願有知道怎麼操做的在下面留言。 到這裏，擴展react-native-vector-icons，添加自定義圖標就完成了，接下來就能夠像上面同樣引用iconfont圖標了

import Icon from 'react-native-vector-icons/Iconfont'; // 不過引用的時候就要改爲Iconfont了，其餘的相似
複製代碼

自定義iconfont的另一種用法

上面那種方法是在react-native-vector-icons的基礎上擴展其圖標庫，可是有時候咱們每每不須要去安裝這麼大的一個庫，甚至去引用那麼多字體文件，不知道你們是否還記得咱們是怎麼在web端使用iconfont的

<span class="iconfont icon-home"></span 複製代碼

那能不能在react-native中也這樣使用呢？這樣更貼合前端人員的思想 追溯到咱們提取成功字符表的那一步！

var map = {"home":"58880","setting":"58881","code":"58886","money":"58951","phone":"58952","user":"58890","customer":"58993","x":"120","message":"59034","add":"59418","password":"58910",};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;
複製代碼

直接將這個文件拷貝到項目中，能夠用以下的方式來直接使用

import icon from "./fontConf";
export default class IconExample extends Component {
    render() {
        return (
            <View style={styles.container}> <Text style={{fontFamily: 'Iconfont',fontSize:30}}> arrow-icon:{icon('arrow')} </Text> <Text style={{fontFamily: 'Iconfont',fontSize:30, color:"#ff4444"}}> vip-icon:{icon('tag-svip')} </Text> <Text style={{fontFamily: 'Iconfont',fontSize:30, color:"#ff4444"}}> tag-svip:{icon('tag-svip')} </Text> </View>
        )
    }
}
複製代碼

重點提示：以上全部操做，都須要將字體文件拷貝到android/app/src/main/assets/fonts