在 React Native 使用阿里 iconfont 圖標

young.li 發布于2019-08-23 12:42 / 1358人閱讀

摘要：熟悉前端開發的大家都一定知道，在網站下載圖標集，會自帶教程告訴你如何在網頁使用。但是在中，跟網頁使用的步驟就不同了。

熟悉前端開發的大家都一定知道 iconfont.cn，在網站下載圖標集，會自帶教程告訴你如何在網頁使用 iconfont。但是在 React Native 中，跟網頁使用的步驟就不同了。我最開始百度出來的文章，不少都推薦借用 react-native-vector-icons，但是我覺得這一步還是增加了不少無用代碼。
其實使用 iconfont，本質上就是使用一種“圖標形狀的字體”，所以解決問題只需要三步：

安裝字體

找到圖標對應的 unicode，直接放到標簽中

在該標簽應用你的“圖標字體”

安裝字體

這是一個把配置都交給 react-native 的一個簡單方法：
首先在 package.json 添加代碼

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

然后運行
react-native link
你就可以在 plist 文件（iOS）或 android/app/src/main/assets/fonts（安卓）中看到對應配置
安裝后需要重啟 react-native

添加圖標

打開在 iconfont 下載的圖標集會有這個文件

里面可以看到對應圖標的 unicode

把你使用的圖標放到標簽中 {"ue936"}

應用字體

{"ue936"}

有一點需要注意，寫在 fontFamily 的字體名稱要使用全名（而不是文件名）

不過 iconfont 三個名字都一樣就是了

參考文章：
https://medium.com/react-nati...
http://www.ruanyifeng.com/blo...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98953.html

在react-native中添加高可維護的iconfont字體

摘要：沒關系，筆者已經為你們準備好了，請保存到文件中，假設你的文件名叫和你剛才保存的字體文件在一起，方便管理復制字體這個插件包有好多套字體，我們可以需要把自己的也復制到包中對應文件夾，當然了，不可能手動復制，筆者從來都是解放雙手的。字體圖標盛行的年代，在項目里使用一套不失真又可以隨意改變大小顏色的圖標，是多么舒服的一件事。這里要推薦iconfont.cn，超多免費圖標，當然了，你的專屬美工...

CarterLi 2019-08-26 12:00 評論0 收藏0
React Native圖片資源使用的優美方案

摘要：圖片資源作為與用戶交互的界面元素，在客戶端產品中起到了非常重要的角色作用。在應用開發中，移動端與的圖片使用策略也有所不同。端較大的內存容量，快速的渲染能力使各類型圖片資源都能得到較好的使用。圖片資源（ jpeg、png、svg、webp ... ）作為與用戶交互的界面元素，在客戶端產品中起到了非常重要的角色作用。在應用開發中，移動端與PC的圖片使用策略也有所不同。PC端較大的內存容量，快速的...

fireflow 2019-05-23 14:32 評論0 收藏0
iconfont在react中完整使用教程

摘要：查閱部分文件，找到相關資料，發現是在純頁面中導入是完全的。但是請注意，咱們將靜態資源放置在目錄下，中的不可采用。于是，正確做法如下在文件下的或者等文件中寫入如下語句即可。第四步介紹使用方法待我研究去吧。。。 hello,各位小伙伴們，很久沒寫文章了。突然要自己搭建項目了，項目中對于阿里巴巴iconfont的使用，大家都清楚嗎？第一步：將圖標加入購物車 showImg(https://...

mylxsw 2019-08-30 11:07 評論0 收藏0
iconfont在react中完整使用教程

摘要：查閱部分文件，找到相關資料，發現是在純頁面中導入是完全的。但是請注意，咱們將靜態資源放置在目錄下，中的不可采用。于是，正確做法如下在文件下的或者等文件中寫入如下語句即可。第四步介紹使用方法待我研究去吧。。。 hello,各位小伙伴們，很久沒寫文章了。突然要自己搭建項目了，項目中對于阿里巴巴iconfont的使用，大家都清楚嗎？第一步：將圖標加入購物車 showImg(https://...

Prasanta 2019-08-23 18:03 評論0 收藏0