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

  发布日期:   2017-06-01
  最新修改:   2021-01-19
  阅读次数:   89 次

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

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

Browse all.

废话不多说,现在开始集成:

第一步:在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
    }
});

   转载规则

《React-native开发之图标库react-native-vector-icons的集成使用字》GajAngels 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。