### 使用自定义图标
* * * * *
一般APP中都不会少了图标，react-native-vector-icons组件给我们提供了很多内置的字体库，但是这并不能满足我们的业务需求，我们有自己的设计会设计出适合本项目的图标，并且可能会随着需求经常变更。这样使用自定义的图标显得非常必要。
**内置字体库：**
* Entypo by Daniel Bruce (411 icons)
* EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 70 icons)
* Feather by Cole Bemis & Contributors (v3.2.2, 240 icons)
* FontAwesome by Dave Gandy (v4.7.0, 675 icons)
* Foundation by ZURB, Inc. (v3.0, 283 icons)
* Ionicons by Ben Sperry (v3.0.0, 859 icons)
* MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
* MaterialCommunityIcons by MaterialDesignIcons.com (v2.0.46, 2046 icons)
* Octicons by Github, Inc. (v6.0.1, 177 icons)
* Zocial by Sam Collins (v1.0, 100 icons)
* SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)
**1.首先会使用react-native-vector-icons内置的库**
~~~
//安装
npm install react-native-vector-icons --save
~~~
从`node_modules/react-native-vector-icons`中Fonts目录中需要的字体的ttf文件拖到xcode项目的Fonts文件夹下（新建一个Fonts文件夹），一定要是拖拽。
然后打开`Info.plist`文件，新建`Fonts provided by application`属性，并配置你所需要的字体的ttf文件名。
**使用**
~~~
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)
~~~
**2.如何使用IconFont**
我们可以参考一下该组件中FontAwesome字体是如何设计的。
~~~
//FontAwesome.js
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/FontAwesome.json';
const iconSet = createIconSet(glyphMap, 'FontAwesome', 'FontAwesome.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;
~~~
~~~
// FontAwesome.json
{
"glass": 61440,
"music": 61441,
"search": 61442,
"envelope-o": 61443,
"heart": 61444,
"star": 61445,
...
}
~~~
所以我们要基于这个组件，自己写IconFont.js，在项目下新建一个文件放置IconFont.js，使用的时候引用即可。
~~~
//IconFont.js
import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
const glyphMap = {
"zanting": 58886,
"bofang": 58887,
"info1": 58888,
"settings": 59018,
"myfill": 59276,
"read": 59202,
"pic": 59035,
...
}
const iconSet = createIconSet(glyphMap, 'IconFont', 'IconFont.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;
~~~
~~~
import IconFont from './IconFont'
// 比如过在tab中使用IconFont
const TrainingTab = TabNavigator({
Course: {
screen: Course,
navigationOptions: () => navigationOpts({
tabBarLabel: "首页",
headerTitle: "喜马课堂",
headerLeft:null, //去除返回按钮
tabBarIcon: (({tintColor, focused}) => { //tabBar图标
return (
<IconFont name="kecheng1" style={{color: tintColor, fontSize: 24}}/>
)
}),
})
},
Mine: {
screen: Mine,
navigationOptions: () => navigationOpts({
tabBarLabel: "我的",
headerTitle: "喜马课堂",
headerLeft:null, //去除返回按钮
})
}
}, tabNavigationOpts)
~~~
首先我们需要在IconFont网上吧图标的ttf文件下载下来，在项目根目录新建Fonts文件放置ttf文件（切记不要放到react-native-vector-icons组件的Fonts里面去），接下来的步骤和插件内置的字体方法一样，把IconFont.ttf拖拽到xcode项目下的Font文件夹下，再配置Info.plist文件。
`!!注意`：其实最麻烦的一点就是glyphMap自定义字体集的生成，其中`key`是图标的名字，值可以是UTF-8字符，也可以是字符编码。但是`value`的值必须是`十进制`，字体库提供的是十六进制的话需要转换成十进制的。如果字体少的话可以手动的转换，字体多的话需要用后端语言直接把ttf文件转换成十进制文档。
~~~
// python
def main(fontFile):
try:
font = TTFont("demo.ttf")
glyphMap = font["cmap"].getcmap(3, 1).cmap // 从字体文件解析出十进制
result = {value: key for key, value in glyphMap.items()}
output = "IconFont.json"
f = file(output, "w+")
f.write(json.dumps(result))
f.close()
print "done ..."
except:
import traceback
traceback.print_exc()
~~~
