React-native开发之图标库react-native-vector-icons 的集成使用

RN开发中难免会用到图标，今天我们来集成github上比较受欢迎的一个强大的icons库。

先上效果图

源码已分享之码云：https://git.oschina.net/osczaizai/RNWeiBo

更多分享请看 http://cherylgood.cn

可通过下面链接直接搜索你想要的icons

Browse all.

• Entypo by Daniel Bruce (411 icons) 
• EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 70 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 (v1.7.22, 1722 icons)
• Octicons by Github, Inc. (v5.0.1, 176 icons)
• Zocial by Sam Collins (v1.0, 100 icons)
• SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

废话不多说，现在开始集成：

第一步：在react-native 工程目录下通过npm安装react-native-vector-icons

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

第二步：分别为android和ios做一些相应的配置

Android：

在android/app/build.gradle

中增加如下脚本：

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

在node-modules 中找到

react-native-vector-icons库，将Fonts 文件夹拷贝到android/app/src/main/assets/fonts
如果没有assets/fonts 新建即可

在android/settings.gradle中增加如下脚本，

 include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

include ':react-native-vector-icons'的作用时在编译android项目的时候

react-native-vector-icons会作为一个module加入编译。