不知道何時開始， iconfont 成為了 App 開發的利器，不僅因為它是向量圖示，可以輕鬆解決圖示適配和顏色問題，而且它是以字型檔案的形式存在專案中，比起常規圖片更能節省 App 的體積。

而 react-native-vector-icons 是在 GitHub 上最火的 React Native 的 iconfont 圖示庫，也是這文章的主角。

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

這個指令碼命令可以幫你自動配置好，如果是執行成功的情況下，可惜往往都是失敗的。如果這步成功了，而且能夠正常執行，下面這些就可以忽略了。

2.手動配置

1. 新增字型檔案（這一步千萬不能忘記，不然就算執行成功你也看不到圖示）

   到專案中的 node_modules/react-native-vector-icons/Fonts，裡面有很多已經內建的圖示庫字型檔案，依照自己的需求，複製需要的字型檔案到 /app/src/main/assets/fonts

   ( 如果沒有這個目錄就自行建立 ) 即可。
   

1. 配置 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')
   

2. 配置主 App 的 build.gradle

   dependencies {
      compile fileTree(dir
    
   : "libs", include: ["*.jar"])
      compile project(':react-native-vector-icons') //新新增的
      compile "com.android.support:appcompat-v7:23.0.1"
      compile "com.facebook.react:react-native:+"  // From node_modules
   }

3. 修改主 App 的 MainApplication.java 檔案

   @Override
   protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
           //新新增的
           new VectorIconsPackage()
           );
   }

   ​

4. 執行報錯的解決方法

   執行時可能會遇到下面這個報錯:

   error: bundling failed: Error: While resolving module `react-native-vector-icons/MaterialIcons`, the Haste package `react-native-vector-icons` was found. However the module `MaterialIcons` could not be found within the package. Indeed, none of these files exist:

   這個是系統版本引發的問題，因為 React Native 系統配置的檔案和 react-native-vector-icons 裡面的檔案重複了，解決方法就是刪除重複的檔案，到 /node_modules/react-native/local-cli/core/_fixtures_/files/package.json 裡面刪除了 package.json 即可，刪除之前記得備份一下檔案。

到這裡配置就全部完成，接下來就可以在 React Native 專案中使用 iconfont 了。

簡單的使用

要使用 ttf 裡面的 iconfont ，首先要先知道里面有什麼圖示，到 node_modules\react-native-vector-icons\glyphmaps 裡面可以看到很多 json 檔案：

開啟其中一個來看，全是下面這種結構：

不難看出，這些就是圖示的字串對應表，下面我們就在程式碼裡面使用其中一個試試：

import Icon from "react-native-vector-icons/Ionicons"

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Icon name="ios-settings" size={15} color="red" />
        <Icon name="ios-settings" size={25} color="yellow" />
        <Icon name="ios-settings" size={35} color="black" />
      </View>
    );
  }
}

執行效果如下:

可以看到，同一個形狀的圖示，可以輕易修改為不同的尺寸和顏色並且不失真。

iOS 平臺上面的配置

暫時沒有蘋果電腦，這裡就無法展示了，具體請參考 Github 的配置，不過看文件應該比 Android 簡單的多。

使用自定義的 iconfont

前面都只是使用專案自帶的 iconfont ，如果要使用其他人或者自己製作的 iconfont 應該怎麼辦呢？比如使用阿里巴巴向量圖示庫上面的 iconfont 呢？

將需要的圖示新增入庫，然後下載程式碼即可：

點選下載至本地並解壓縮，裡面包含所有的字型檔案。找到 iconfont.ttf，這是需要的檔案。

要使用剛才我們下載的圖示，就需要知道在 iconfont.ttf 裡面的圖示字元碼，雖然我們可以直接在阿里巴巴向量圖示庫看到具體的字元碼：

這裡需要忽略前面的 &#x ，主要的字元程式碼就是 e6a0 ;將它轉為十進位制的 59040 就是我們需要的 json 檔案中的字串對映。

這裡數量還算少了，如果有上百個，我們一個一個來手動換算豈不是累死？這裡推薦一個 Python 的工具庫。

由於 React Native 的開發環境就要求安裝 Python ，這裡就不說怎麼安裝了，只需要配置好 Python 的環境變數：

pip install fonttools

在命令列中執行：

python iconfont-mapper.py iconfont.ttf iconfont.js

這樣子就會生成一個 iconfont.js 檔案，裡面我們需要的圖示對映的字串：

var map = {"favorite":"59040","cart":"59032","back":"59031","x":"120","close":"59034","delete":"59037","edit":"59038",};
;module.exports = (name)=>String.fromCharCode(map[name]);
;module.exports.map = map;

然後我們就可以模仿著原始碼來使用了，通過 import Icon from "react-native-vector-icons/Ionicons" 進入原始碼中：

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

const iconSet = createIconSet(glyphMap, 'Ionicons', 'Ionicons.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;

可以看到核心程式碼就前面 3 行，那就簡單了，做點簡單的修改即可：

import {createIconSet} from "react-native-vector-icons"

const glyphMap = {
    favorite: 59040,
    cart: 59032,
    back: 59031,
    x: 120,
    close: 59034,
    delete: 59037,
    edit: 59038,
};

const myIcons = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');

export default myIcons;

回到一開始執行的 App.js ，匯入這個新的 iconfont 檔案：

import MyIcons from "./MyIcons";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MyIcons name="favorite" size={15} color="red" />
        <MyIcons name="cart" size={25} color="yellow" />
        <MyIcons name="x" size={35} color="black" />
        <MyIcons name="edit" size={45} color="gray" />
      </View>
    );
  }
}

不要以為已經完事了，還差最後一步呢。就是把 iconfont.ttf 放在 \android\app\src\main\assets\fonts

裡面並重新安裝 APK，才可以看到下面的結果：