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

RN 开发中难免会用到图标，今天我们来集成 github 上比较受欢迎的一个强大的 icons 库。
源码已分享之码云：https://git.oschina.net/osczaizai/RNWeiBo

可通过下面链接直接搜索你想要的 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<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>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 (
            <View style={styles.container}>
                <Icon
                    color={this.props.selected?'#3e9ce9' : '#999999'}
                    name={this.props.iconName}
                    size={22}
                ></Icon>
                <Text
                    style={[styles.title,{ color: this.props.selected ? '#3e9ce9' : '#999999' }]}
                >
                    {this.props.tabTitle}
                </Text>
            </View>
        );
    }

}

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(
            <RouterWithRedux
                getSceneStyle={getSceneStyle}
            >
                <Scene key="modal"
                       component={Modal}>
                    <Scene key="root">
                        <Scene
                            key="main"
                            tabs={true}
                            hideNavBar={false}
                            tabBarStyle={styles.tabBarStyle}>
                            <Scene
                                key="home"
                                title="Home title"
                                hideNavBar={false}
                                iconName="md-home"
                                tabTitle="微博"
                                component={HomeView}
                                initial={true}
                                icon={TabIcon}

                            />
                            <Scene
                                key="message"
                                iconName="md-eye"
                                hideNavBar={false}
                                tabTitle="信息"
                                title="Message title"
                                component={MessageView}
                                icon={TabIcon}
                            />
                            <Scene
                                key="tabbarpublish"
                                tabTitle="发布"
                                title=" title"
                                iconName="md-create"
                                component={PublishView}
                                icon={TabIcon}
                            />
                            <Scene
                                key="discrover"
                                tabTitle="发现"
                                hideNavBar={false}
                                iconName="md-search"
                                title="Discrover title"
                                component={DiscroverView}
                                icon={TabIcon}
                            />
                            <Scene
                                key="profile"
                                title="Profile title"
                                tabTitle="我的"
                                hideNavBar={false}
                                iconName="md-contact"
                                component={ProfileView}
                                icon={TabIcon}

                            />
                        </Scene>
                        <Scene key="error" component={Error}/>

                    </Scene>

                </Scene>
            </RouterWithRedux>
        );
    }
}

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