前言：

　　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目錄下增加其他字型，就可以使用各種美容美奐的文字效果了。（可能是花裡胡哨）