前言：
github比較火的有如react - native -vector- icons等圖示庫，為什么提到這些第三方庫，
首先明確一個點，你是否需要現成的第三方圖示庫？
優點：開箱即用，內容豐富
缺點：難以定制，占用打包空間
所以擁有自身專案的字體圖示庫也是一種不錯的選擇，
一、擁有自身的圖示庫，
其擁有的大量圖示以及可定制化的選擇，簡直就是圖示菜市場，
1、注冊阿里爸爸的矢量圖示庫賬號 https://www.iconfont.cn/
2、建立專案 ，并搜索對應的圖示增加入圖示庫，
3、將圖示檔案下載到本地，資源管理->我的專案->【選擇對應的專案】-> 下載到本地，
4、解壓下載的壓縮包，找到里面的ttf檔案 -- 字體圖示檔案，
5、記住里面的Unicode編碼，
二、專案增加圖示庫
1、打開安卓目錄下的assets里的fonts檔案夾，
路徑 android->app->src->main->assets->fonts，不同版本的react-native目錄可能不同，但是本質都在main目錄里，沒有則自己創建
2、將上訴所說的ttf檔案，拷貝到assets檔案夾中
原因：安卓會將main中的assets打包進apk中，
三、書寫代碼
1、最簡單的字體圖示，
iconfont的unicode編碼，如等，具體查看第一步，style里必須設定字體型別為iconfont, 否則將顯示空白
1 import { Text } from 'react-native'; 2 3 function Icon() { 4 return ( 5 // unicode 6 <Text style={{fontFamily: 'iconfont'}}>unicode編碼</Text> 7 ) 8 }
2、封裝
上訴例子只是一個簡單的字體圖示，Unicode編碼寫死的情況下，也只是一個圖示，并不好復用，
而Unicode編碼不能作為引數傳入，由于react的機制，{unicode} 會完完全全變成字串，導致無法使用，
即：
錯誤示范：
1 import { Text } from 'react-native'; 2 3 function Icon(unicode) { 4 return ( 5 // 出錯， 6 <Text style={{fontFamily: 'iconfont'}}>{unicode}</Text> 7 ) 8 }
這里需要做一層轉換，將Unicode編碼轉一下形式，以\ue 開頭，如 -> \ue715
以此類推，當然正常不太可能將這些編碼作為引數傳輸，更希望通過名字等方式來確認自身使用哪種icon，就像react - native -vector- icons那樣，很可惜，react-native原生不支持類名，
所以可以使用一個組態檔來作業，
如：
1 // 編碼 2 const iconConfig = { 3 determine: "\ue673", 4 userselector: '\ue774', 5 } 6 7 // 通用方法 8 export const getIconCode = (iconName) => { 9 return iconConfig[iconName]; 10 }
1 import { Text } from 'react-native'; 2 3 function Icon(name) { 4 return ( 5 <Text style={{fontFamily: 'iconfont'}}>{getIconCode(name)}</Text> 6 ) 7 }
好，現在就可以愉快的玩耍了，
附：
這里有個有趣的東西，既然是字體檔案，那么在fonts目錄下增加其他字體，就可以使用各種美容美奐的文字效果了，（可能是花里胡哨）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/225968.html
標籤：JavaScript
上一篇：DOM節點
下一篇：vue實作增刪改查（內附源代碼）