在ReactNative中優(yōu)雅的使用字體文件

接觸ReactNative時間也不短啦堤尾,中間遇到的坑還是很多的,但是由于時間原因都沒有及時記錄下來型宝,現(xiàn)在就從iconfont開始一點點積累吧潜叛。


要想優(yōu)雅的使用iconfont,首先你要有iconfont字體文件坝冕,提到字體文件,阿里巴巴矢量圖標(biāo)庫在國內(nèi)可是首屈一指的啦瓦呼,能翻墻的同學(xué)也可以看看國外的一個網(wǎng)站喂窟。

沒有賬號的同學(xué)首先注冊一個賬號,然后我們可以直接搜索我們想要的圖標(biāo)央串,支持中英文喔磨澡。比如下面我搜索的添加圖標(biāo)


鼠標(biāo)放在上面可以看到有立即下載、添加入庫质和、添加到我的收藏里稳摄,我們直接添加入庫,然后在點擊右上角的購物車圖標(biāo)饲宿,把這個圖標(biāo)添加到我們自己創(chuàng)建的項目里厦酬。然后在圖標(biāo)管理我的項目中可以看到下載值本地

我們要的文件就是下圖中高亮部分


到這里我們的字體文件就準(zhǔn)備好了。

要想在Android中使用字體文件瘫想,我們就需要把字體文件拷貝到?/android/app/src/main/assets/fonts/ ?目錄下

要想在IOS中使用仗阅,我們首先要把字體文件拖拽到工程里,同時勾選如下選項


然后在plist文件里添加 Fonts provided by Application

iconfont.ttf文件可以在xcode工程中創(chuàng)建一個單獨的目錄存放国夜,并不影響使用减噪,配置好之后別忘了要重啟編譯項目(IOS和Android)

最后我們在來看看在js中如何使用吧

圖中的 &#xe64c 就是我們在阿里巴巴圖標(biāo)庫中的哈希編碼


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子筹裕,更是在濱河造成了極大的恐慌醋闭,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件朝卒,死亡現(xiàn)場離奇詭異证逻,居然都是意外死亡,警方通過查閱死者的電腦和手機扎运,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門瑟曲,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人豪治,你說我怎么就攤上這事洞拨。” “怎么了负拟?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵烦衣,是天一觀的道長。 經(jīng)常有香客問我掩浙,道長花吟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任厨姚,我火速辦了婚禮衅澈,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘谬墙。我一直安慰自己今布,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布拭抬。 她就那樣靜靜地躺著部默,像睡著了一般。 火紅的嫁衣襯著肌膚如雪造虎。 梳的紋絲不亂的頭發(fā)上傅蹂,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天,我揣著相機與錄音算凿,去河邊找鬼份蝴。 笑死,一個胖子當(dāng)著我的面吹牛澎媒,可吹牛的內(nèi)容都是我干的搞乏。 我是一名探鬼主播,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼戒努,長吁一口氣:“原來是場噩夢啊……” “哼请敦!你這毒婦竟也來了镐躲?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤侍筛,失蹤者是張志新(化名)和其女友劉穎萤皂,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體匣椰,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡裆熙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了禽笑。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片入录。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖佳镜,靈堂內(nèi)的尸體忽然破棺而出僚稿,到底是詐尸還是另有隱情,我是刑警寧澤蟀伸,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布蚀同,位于F島的核電站,受9級特大地震影響啊掏,放射性物質(zhì)發(fā)生泄漏蠢络。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一迟蜜、第九天 我趴在偏房一處隱蔽的房頂上張望刹孔。 院中可真熱鬧,春花似錦娜睛、人聲如沸芦疏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至分预,卻和暖如春兢交,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背笼痹。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工配喳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凳干。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓晴裹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親救赐。 傳聞我的和親對象是個殘疾皇子涧团,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,872評論 25 707
  • 以下Rn指代ReactNative 1.iconfont簡介 什么是iconfonticonfont顯示成圖形圖標(biāo)...
    icaNext閱讀 9,076評論 3 12
  • afinalAfinal是一個android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,413評論 2 45
  • GitLab-CI就是一套配合GitLab使用的持續(xù)集成系統(tǒng)。 OS X系統(tǒng)完成可出現(xiàn)集成泌绣,需要安裝gitlab钮追,...
    paradisery閱讀 4,408評論 7 7
  • 在我五六歲那年的暑假,鄰居家來了個親戚家的小姑娘阿迈,名字大約是叫小妹元媚,年歲和我差不多,我們很快就玩到了一起苗沧。 我對新...
    韓小梅閱讀 232評論 0 0