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
    }
});