您的位置：首页 > Web前端 > React

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

2017-03-08 00:00 567 查看

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

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

先上效果图

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

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

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

Browseall.

EntypobyDanielBruce(411icons)

EvilIconsbyAlexanderMadyankin&RomanShamin(v1.8.0,70icons)

FontAwesomebyDaveGandy(v4.7.0,675icons)

FoundationbyZURB,Inc.(v3.0,283icons)

IoniconsbyBenSperry(v3.0.0,859icons)

MaterialIconsbyGoogle,Inc.(v3.0.1,932icons)

MaterialCommunityIconsbyMaterialDesignIcons.com(v1.7.22,1722icons)

OcticonsbyGithub,Inc.(v5.0.1,176icons)

ZocialbySamCollins(v1.0,100icons)

SimpleLineIconsbySabbir&Contributors(v2.4.1,189icons)

废话不多说，现在开始集成：

第一步：在react-native工程目录下通过npm安装react-native-vector-icons

npminstallreact-native-vector-icons--save
第二步：分别为android和ios做一些相应的配置

Android：

在android/app/build.gradle

中增加如下脚本：

project.ext.vectoricons=[ iconFontNames:['MaterialIcons.ttf','EvilIcons.ttf']//Nameofthefontfilesyouwanttocopy ] applyfrom:"../../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=newFile(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=newFile(rootProject.projectDir,'../node_modules/react-native-vector-icons/android')是指定
react-native-vector-icons的具体路径在[code=plain] 7fe0 android/app/build.gradle
添加：compileproject(':react-native-vector-icons')[/code]
applyplugin:'com.android.application' android{ ... } dependencies{ compilefileTree(dir:'libs',include:['*.jar']) compile"com.android.support:appcompat-v7:23.0.1" compile"com.facebook.react:react-native:+"//Fromnode_modules .... compileproject(':react-native-vector-icons') }
最后一步：在android/app/src/main/java/你的包/MainApplication.java中添加

importcom.oblador.vectoricons.VectorIconsPackage;
newVectorIconsPackage()
代码如下：
packagecom.myapp;

importcom.oblador.vectoricons.VectorIconsPackage;

....

@Override
protectedListgetPackages(){
returnArrays.asList(
newMainReactPackage()
,newVectorIconsPackage()
);
}

}

然后在此运行项目即可。

IOS集成：

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

InformationPropertyList添加一个Item

即可，编译一下，然后运行项目。
一下是我的使用demo代码：

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

importReact,{
PropTypes,
Component
}from'react';
import{
Text,
View,
StyleSheet
}from'react-native';

importIconfrom'react-native-vector-icons/Ionicons';

exportdefaultclassTabIconextendsComponent{
render(){
return(

{this.props.tabTitle}

);
}

}

TabIcon.propTypes={
selected:PropTypes.bool,
tabTitle:PropTypes.string.isRequired,
iconName:PropTypes.string
};

conststyles=StyleSheet.create({
container:{
flexDirection:'column',
alignItems:'center',
justifyContent:'center'
},
title:{
fontSize:14,
}

});
如下使用即可

/**
*Createdbyzaizaion2017/3/7.
*/

importReact,{Component}from'react';
import{
StyleSheet
}from'react-native';
import{
Router,
Scene,
Modal,
ActionConst
}from'react-native-router-flux';
import{connect}from'react-redux';
importHomeViewfrom'../pages/home';
importPublishViewfrom'../pages/publish';
importProfileViewfrom'../pages/profile';
importMessageViewfrom'../pages/message';
importDiscroverViewfrom'../pages/discrover';
importTabIconfrom'../components/TabIcon';

constRouterWithRedux=connect()(Router);

/**
*定义基本的样式
*@paramprops
*@paramcomputedProps
*@returns{{flex:number,backgroundColor:string,shadowColor:null,shadowOffset:null,shadowOpacity:null,shadowRadius:null}}
*/
constgetSceneStyle=(props,computedProps)=>{
conststyle={
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;
}
returnstyle;
};

exportdefaultclassAppextendsComponent{
//构造
constructor(props){
super(props);
//初始状态
this.state={
selectedTab:'home',
};
}

render(){
return(

);
}
}

conststyles=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

相关文章推荐

新的分享

章节导航