成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

在 React Native 使用阿里 iconfont 圖標(biāo)

young.li / 1364人閱讀

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

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

安裝字體

找到圖標(biāo)對應(yīng)的 unicode，直接放到 標(biāo)簽中

在該標(biāo)簽應(yīng)用你的“圖標(biāo)字體”

安裝字體

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

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

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

添加圖標(biāo)

打開在 iconfont 下載的圖標(biāo)集會有這個文件

里面可以看到對應(yīng)圖標(biāo)的 unicode

把你使用的圖標(biāo)放到標(biāo)簽中 {"ue936"}

應(yīng)用字體 
{"ue936"}

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98953.html

相關(guān)文章

  • 在react-native中添加高可維護(hù)的iconfont字體

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

    CarterLi 評論0 收藏0

  • React Native圖片資源使用的優(yōu)美方案

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

    fireflow 評論0 收藏0

  • iconfont在react中完整使用教程

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

    mylxsw 評論0 收藏0

  • iconfont在react中完整使用教程

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

    Prasanta 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<