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

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

先上效果图

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

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

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

Browse all.

Entypoby Daniel Bruce (411 icons)

EvilIconsby Alexander Madyankin & Roman Shamin (v1.8.0, 70 icons)

FontAwesomeby Dave Gandy (v4.7.0, 675 icons)

Foundationby ZURB, Inc. (v3.0, 283 icons)

Ioniconsby Ben Sperry (v3.0.0, 859 icons)

MaterialIconsby Google, Inc. (v3.0.1, 932 icons)

MaterialCommunityIconsby MaterialDesignIcons.com (v1.7.22, 1722 icons)

Octiconsby Github, Inc. (v5.0.1, 176 icons)

Zocialby Sam Collins (v1.0, 100 icons)

SimpleLineIconsby 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

}

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 持续更新中...... 一套企业级的 UI 设计语言和 React 实现。 https://mobile.ant....
    日不落000阅读 5,856评论 0 35
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,666评论 25 708
  • 前言 iconFont的使用对于前端开发同学肯定不陌生,移动端开发也有普遍的使用。既然这多公司都选择使用iconF...
    光强_上海阅读 7,979评论 0 13
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,585评论 2 45
  • 早晨五点二十,从梦中醒来,泪水止不住地流,又梦见外公了。梦里他一个人坐在阳台上,我们准备出门,我过去拥抱他与他道别...
    龙里个龙阅读 502评论 0 1