RN开发中难免会用到图标，今天我们来集成github上比较受欢迎的一个强大的icons库。
先上效果图
源码已分享之码云：https://git.oschina.net/osczaizai/RNWeiBo
更多分享请看http://cherylgood.cn
可通过下面链接直接搜索你想要的icons
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
}
});
网友评论