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
}
});
