以下Rn指代ReactNative
1.iconfont簡(jiǎn)介
- 什么是iconfont
iconfont顯示成圖形圖標(biāo)的字體，因?yàn)樽煮w是矢量化圖形，具有分辨率無(wú)關(guān)的特性，在任何分辨率和ppi下面，都可以做到完美縮放，不像傳統(tǒng)位圖如：png，jpg一樣，放大后會(huì)有鋸齒或者模糊。 - 為什么使用iconfont
對(duì)比圖片大小來(lái)說(shuō)容量更小，支持樣式修改(大小，顏色)，適應(yīng)多分辨率，網(wǎng)上有很多現(xiàn)成的iconfont資源可以使用。
2.在Rn中使用iconfont
簡(jiǎn)單介紹完iconfont，現(xiàn)在說(shuō)說(shuō)在Rn中整么用它。
這里推薦使用react-native-vector-icons
react-native-vector-icons會(huì)把字體文件轉(zhuǎn)換成相應(yīng)的iconSets在Rn供我們使用。
安裝react-native-vector-icons
npm i --save react-native-vector-icons
ios下配置
用xCode打開(kāi)項(xiàng)目目錄下的ios，為了管理字體，我們新建一個(gè)fonts目錄，字體文件統(tǒng)一放在里面，把字體文件拖進(jìn)這個(gè)文件夾。會(huì)有彈框提示并且記得Add to targets選中當(dāng)前項(xiàng)目。
確保Build Phases的Copy Bundle REsources中有字體文件
接著修改info.plist，在information Property List下新增Fonts provided by application，在Fonts provided by application下在增加字體文件，到這里ios就配置好了。
android配置
安卓下會(huì)從android/app/src/main/assets/fonts目錄讀取字體文件，所以我們需要把字體文件*.ttf放在這個(gè)目錄下，然后在android/app/build.gradle文件中按需增加下面的配置。
//使用內(nèi)置的iconSets
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
//使用自定義iconSets
project.ext.vectoricons = [
iconFontNames: [ 'iconfont.ttf'] // Name of the font files you want to copy
]
使用內(nèi)置的iconSets
import Icon from 'react-native-vector-icons/FontAwesome';
<Icon name='rocket' size={60} color="#4F8EF7" />
上面的方式引用的是react-native-vector-icons內(nèi)置的一種iconSets, 除了FontAwesome還有其他iconSets，可以到react-native-vector-icons查看
雖然內(nèi)置了很多iconSets給我們使用，但往往我們做項(xiàng)目時(shí)一般都會(huì)使用自己的iconfont，整么使用自己的iconfont呢？我們看源碼
源碼分析
react-native-vector-icons/FontAwesome這個(gè)返回的是一個(gè)iconSets，簡(jiǎn)單理解這個(gè)iconSets是一個(gè)可以幫我們顯示字體圖標(biāo)的組件。其中name對(duì)應(yīng)圖標(biāo)在glyphMap.json文件中對(duì)應(yīng)的key。(看到這里，glyphMap.json是什么鬼？？？)
看react-native-vector-icons/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;
createIconSet(glyphMap, fontFamily, fontFile)
參數(shù)說(shuō)明：
glyphMap: json對(duì)象(key是圖標(biāo)的name, value是圖標(biāo)對(duì)應(yīng)的10進(jìn)制數(shù))
fontFamily: 字體庫(kù)對(duì)應(yīng)的fontFamily
fontFile：字體文件名稱(注意這里只聲明字體庫(kù)名稱，字體庫(kù)路徑分平臺(tái)配置)
看glyphMap對(duì)應(yīng)的glyphmaps/FontAwesome.json
{
"glass": 61440,
"music": 61441,
"search": 61442,
"envelope-o": 61443,
"heart": 61444,
"star": 61445,
}
總結(jié)一下：
就是根據(jù)字體文件(.ttf|.otf)和glyphMap.json創(chuàng)建對(duì)應(yīng)的IconSets，所以要想使用自定義的iconfont我們需要準(zhǔn)備這兩樣?xùn)|西。
使用自定義的iconSets
看完上面的源碼分析，我們開(kāi)始自定義iconSets，
先準(zhǔn)備一套iconfont，作者習(xí)慣使用阿里巴巴矢量圖標(biāo)庫(kù)，這里就拿這個(gè)來(lái)作為??
選取你需要的圖標(biāo)，添加為一個(gè)項(xiàng)目，如下。
項(xiàng)目默認(rèn)的fontFamily為iconfont，還記得上面創(chuàng)建iconSets函數(shù)的第二個(gè)參數(shù)嗎，每次對(duì)應(yīng)的就是這個(gè)。
這里我修改一下。
下載項(xiàng)目，里面的iconfont.ttf就是我們需要的iconfont了。
回想一下，創(chuàng)建createIconSet需要的東西，還少了glyphMap，glyphMap整么來(lái)呢?？催@里
其中e69b是圖標(biāo)對(duì)應(yīng)的16進(jìn)制unicode我們需要的是10進(jìn)制，所以把它轉(zhuǎn)換一下， 下面使用的是js
parseInt("e69b", 16)
59035
每個(gè)圖標(biāo)都需要轉(zhuǎn)換一次很麻煩，所以基于阿里巴巴圖標(biāo)矢量庫(kù)下載的文件，我用js寫(xiě)了一個(gè)生成json的工具類。把剛下載下來(lái)的iconfont.css，iconfont.json, genJson.js放在同一目錄。?node執(zhí)行g(shù)enJson.js，所需要的json對(duì)象就被寫(xiě)入iconfont.json中了。
/*iconfont.css*/
...省略...
.ica {
font-family:"ica" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-all:before { content: "\e696"; }
.icon-back:before { content: "\e697"; }
.icon-cart:before { content: "\e698"; }
.icon-category:before { content: "\e699"; }
.icon-close:before { content: "\e69a"; }
.icon-comments:before { content: "\e69b"; }
/*genJson.js*/
const path = require('path');
const oldPath = path.resolve(__dirname, 'iconfont.css');
const newPath = path.resolve(__dirname, 'iconfont.json');
var gen = module.exports = function () {
const readline = require('readline');
const fs = require('fs');
const fRead = fs.createReadStream(oldPath);
const fWrite = fs.createWriteStream(newPath, {flags: 'w+', defaultEncoding: 'utf8'});
const objReadLine = readline.createInterface({
input: fRead
});
var ret = {};
objReadLine.on('line', line => {
line = line && line.trim();
if( !line.includes(":before") || !line.includes("content") ) return;
var keyMatch = line.match(/\.(.*?):/);
var valueMatch = line.match(/content:.*?\\(.*?);/);
var key = keyMatch && keyMatch[1];
var value = valueMatch && valueMatch[1];
value = parseInt(value, 16);
key && value && (ret[key] = value);
});
objReadLine.on('close', () => {
console.log('readline close');
fWrite.write(JSON.stringify(ret), 'utf8');
});
};
gen();
創(chuàng)建iconSets需要的東西都準(zhǔn)備好了，開(kāi)始創(chuàng)建吧。
／*iconfont.json*／
{
"icon-comments": 59035,
"icon-close": 59034
}
/*iconSets.js*/
import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './assets/fonts/iconfont.json';
const iconSet = createIconSet(glyphMap, "ica", 'iconfont.ttf');
export default iconSet;
/* componet.js*/
...
import Icon from './iconSets';
<Icon name='icon-comments' size={60} color="#4F8EF7" />
運(yùn)行一下，看字體顯示出來(lái)了
項(xiàng)目相關(guān)代碼放在github上了，請(qǐng)移步react-native-iconfont-demo
如果有幫到你，請(qǐng)點(diǎn)個(gè)贊吧。
