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加入编译。

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

react-native-vector-icons的具体路径在 android/app/build.gradle 添加：compile project(':react-native-vector-icons')

apply plugin: 'com.android.application'android {  ...}dependencies {  compile fileTree(dir: 'libs', include: ['*.jar'])  compile "com.android.support:appcompat-v7:23.0.1"  compile "com.facebook.react:react-native:+"  // From node_modules  ....  compile project(':react-native-vector-icons')}

最后一步：在android/app/src/main/java/你的包/MainApplication.java中添加

import com.oblador.vectoricons.VectorIconsPackage;new VectorIconsPackage()

代码如下：

package com.myapp;import com.oblador.vectoricons.VectorIconsPackage;....  @Override  protected List getPackages() {    return Arrays.asList(      new MainReactPackage() , new VectorIconsPackage()    );  }}

然后在此运行项目即可。

IOS集成：

通过，拷贝Fonts到xcode的Images.xcassets中然后在Info.plist中添加如下代码

Information Property List 添加一个Item

即可，编译一下，然后运行项目。

一下是我的使用demo代码：

创建一个使用该库来实现icon的TabIcon

import React, {    PropTypes,    Component} from 'react';import {    Text,    View,    StyleSheet} from 'react-native';import Icon from 'react-native-vector-icons/Ionicons';export default class TabIcon extends Component {    render() {        return (                                                                {this.props.tabTitle}                                    );    }}TabIcon.propTypes = {    selected: PropTypes.bool,    tabTitle: PropTypes.string.isRequired,    iconName: PropTypes.string};const styles = StyleSheet.create({    container: {        flexDirection: 'column',        alignItems: 'center',        justifyContent: 'center'    },    title:{        fontSize:14,    }});

如下使用即可

/** * Created by zaizai on 2017/3/7. */import React, { Component } from 'react';import {    StyleSheet} from 'react-native';import {    Router,    Scene,    Modal,    ActionConst} from 'react-native-router-flux';import { connect } from 'react-redux';import HomeView from '../pages/home';import PublishView from '../pages/publish';import ProfileView from '../pages/profile';import MessageView from '../pages/message';import DiscroverView from '../pages/discrover';import TabIcon from '../components/TabIcon';const RouterWithRedux = connect()(Router);/** * 定义基本的样式 * @param props * @param computedProps * @returns {{flex: number, backgroundColor: string, shadowColor: null, shadowOffset: null, shadowOpacity: null, shadowRadius: null}} */const getSceneStyle = (props, computedProps) => {    const style = {        flex: 1,        backgroundColor: '#fff',        shadowColor: null,        shadowOffset: null,        shadowOpacity: null,        shadowRadius: null,    };    if (computedProps.isActive) {        console.log(computedProps)        style.marginTop = computedProps.hideNavBar ? 0 : 64;        style.marginBottom = computedProps.hideTabBar ? 0 : 50;    }    return style;};export default class App extends  Component{    // 构造    constructor(props) {        super(props);        // 初始状态        this.state = {            selectedTab: 'home',        };    }    render(){        return(                                                                                                                                                                                                                                                                                                                            );    }}const styles = StyleSheet.create({    container: {        flex: 1,    },    tab_image: {        height: 28,        width: 28,    },    tabBarStyle: {        borderTopWidth: 0.5,        borderColor: '#b7b7b7',        backgroundColor: 'white',        opacity: 1    },    instructions: {        textAlign: 'center',        color: '#333333',        marginBottom: 5    }});