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
1
|
npm install react-native-vector-icons --save
|
第二步：分别为android和ios做一些相应的配置
Android：
在android/app/build.gradle
中增加如下脚本：
1
2
3
4
|
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 中找到
1
|
react-native-vector-icons库，将Fonts 文件夹拷贝到android/app/src/main/assets/fonts如果没有assets/fonts 新建即可在android/settings.gradle中增加如下脚本，
|
1
2
|
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
|
1
|
include ':react-native-vector-icons'的作用时在编译android项目的时候
|
1
|
react-native-vector-icons会作为一个module加入编译。
|
1
|
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')是指定
|
1
|
react-native-vector-icons的具体路径在 android/app/build.gradle 添加：compile project(':react-native-vector-icons')
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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')
}
|
1
|
最后一步：在android/app/src/main/java/你的包/MainApplication.java中添加
|
1
2
|
import com.oblador.vectoricons.VectorIconsPackage;
new VectorIconsPackage()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
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,
}
});
|
如下使用即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
/**
* 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
}
});
|