react-native-vector-icons 使用記錄

1： npm install --save react-native-vector-icons

2:  如果iOS使用Podfile 那么在Podfile中添加： pod 'RNVectorIcons', :path => './ReactComponent/node_modules/react-native-vector-icons'

3：在info.plist中導入使用的字體庫

4： 使用自帶的圖標

import Icon from 'react-native-vector-icons/FontAwesome';

<Text><Icon name="rocket" size={30} color="#900" /></Text>

 5:  使用自定義的圖標

　　a:  從iconfont中創建項目，下載需要的字體得到需要使用的字體文件

　　b:  找到下載的字體文件

　　c: 將.ttf放入react-native-vector-icons -> Fonts 目錄下 可以更改 .ttf 的名稱

　　d: 創建對應字體的 js 文件, icon對應的unicode可以從iconfont中獲取

其中e686即時對應的16進制編碼，為了方便查看轉為十進制即可。

import createIconSet from './lib/create-icon-set';
// import glyphMap from './glyphmaps/MyIcon.json';

const glyphMap = {
    'FFCustomerServer': 59014,
    'FFMore': 59000,
    'FFBack': 58998
}
// 在iOS中 fontFamily 必須為初始的值，通過雙擊.tff字體可以查看
const iconSet = createIconSet(glyphMap, 'iconfont', 'MyIcon.ttf');

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;