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

Swimly發表於2018-06-06
React

前言

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

一、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
複製程式碼

1、android平臺

1.1、自動配置
react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons
複製程式碼

會為你配置好所有，但是這是成功的情況下，你不需要操心任何事，但是往往不能如願。如果你這步成功了，而且能夠正常執行，下面這些你就可以跳過！

1.2、手動配置
1.2.1 複製字型檔案（這一步千萬不能忘記，不然就算執行成功你也看不到圖示）

找到專案node_modules/react-native-vector-icons/Fonts，裡面有很多已經內建的圖示庫字型檔案，依照自己的需求，複製你需要的字型檔案到 android/app/src/main/assets/fonts，（如果沒有這個目錄就自行建立）

image.png

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"/>
複製程式碼

image.png

2、ios平臺

相對android來說簡單很多，可以參照github上面的步驟來！

三、使用自定義iconfont

說了這麼多，還只是它自帶的圖示庫的使用，如果我們要使用自己自定義的一些圖示呢，譬如iconfont.cn上面的

image.png

1、圖示準備

如上圖，作為測試，我準備了上述圖示。點選下載至本地，裡面包含所有的字型檔案。找到iconfont.ttf，這是我們重點需要的檔案。

image.png

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

如下圖，找到node_modules/react-native-vector-icons的根目錄，可以看到很多js檔案，命名都是以圖示庫的名稱命名，隨便開啟一個Ionicons.js，發現程式碼很簡單

image.png

把這個檔案複製一遍，重新命名為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檔案。

image.png
這就是接下來要整理出來的字元對應表。當然你可以手動去整理，一個兩個的還可以，如果一個專案幾十上百個甚至更多呢，能用工具去解決的事，我們絕不浪費時間，接下來介紹的就是如何利用工具去獲取字元表。

2.1 安裝python

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

2.2 配置python環境變數

在path中新增 python安裝目錄以及Scripts

image.png

2.3 安裝 fonttools
pip install fonttools
複製程式碼

具體介紹請參考：github地址

2.4準備react-native-iconfont-mapper

直接打包下載react-native-iconfont-mapper，或者通過git克隆到本地，這個目錄自己選個容易記住的，因為以後用的比較多。

image.png
專案比較單一，僅僅一個python檔案。

2.5 提取字元表

將前面下載的字型包中的ttf檔案拷貝到這裡

image.png

python iconfont-mapper.py iconfont.ttf iconfont.js
複製程式碼

image.png
不出意外，可以生成一個iconfont.js檔案，開啟檢視便可以看到我們所需要的json字串

image.png

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

相關文章