教你輕松在React Native中使用自定義iconfont

在react-native項目中我們一般使用到 react-native-vector-icons（這里不介紹如何使用react-native-vector-icons按照官方文檔即可）但是當react-native-vector-icons里面的默認圖標並不能滿足我們的日常開發的時候怎么辦呢？

那就是只能使用自定義圖標來了，這里我們以iconfont為例，（其他圖標庫引入方式一模一樣）

一、在iconfont上選擇好你需要的圖標，下載並解壓如下：

 

二、將iconfont.tff文件拷貝到android/app/src/main/assets/fonts文件下

三、在你的根目錄下新建js/common/MyIcon.js和iconfont.json

編輯Myicon.js

import {createIconSet} from 'react-native-vector-icons';
import glyphMap from './iconfont.json';

const iconSet = createIconSet(glyphMap, 'MyIcon', 'iconfont.ttf');

export default iconSet;

編輯iconfont.json

{
  "qiuchang": 59002
}

這里作如下說明，iconfont.json中對應圖標名字，和十進制碼，我們選擇的圖標有個Unicode編碼，他是十六進制的，而我們要將其轉換為十進制，配置在我們的iconfont.json中

四、使用

import MyIcon from "../../common/CustomizeIcon";

.....
<MyIcon name={'qiuchang'} size={50} style={{
             color: '#f33'
           }}></MyIcon>
........

五，加入你的產品的圖標全部都是原創的，那么你就需要你們ui給你制作對應.ttf文件，步驟和上面一直，還有就是，可以使用腳本自動對應json的映射關系........