做一個有情懷的程序員
在項目開發(fā)中坛怪，為了提高項目的逼格和美觀度簿寂，我們經(jīng)常需要使用的各式各樣的圖標歉铝，常用的手段就是美工幫我們切好圖谬晕，也就是使用圖片去實現(xiàn)碘裕，如果項目太大會導致圖片資源太多，占用體積攒钳，怎么辦帮孔？今天給大家推薦一個github上比較受歡迎的一個強大的icons庫——“react-native-vector-icons”。廢話不多說夕玩，直接上教程你弦。
第一步：使用Terminal進入到項目根目錄中安裝react-native-vector-icons，執(zhí)行命令npm install react-native-vector-icons --save等待安裝完成燎孟。
第二步：由于Android和iOS平臺不一樣禽作，所以需要分別對待，首先先配置iOS揩页。
使用Terminal進入到項目根目錄中執(zhí)行命令react-native link,執(zhí)行完成后旷偿，使用Xcode打開工程目錄下的ios文件夾下的 xxxx.xcodeproj 文件,(xxxx是你的項目名稱)，查看 Resources 文件夾以及右側(cè)名為 Fonts provided by application 數(shù)組爆侣，如圖1萍程；
至此為止ios的配置工作就全部結(jié)束了。其中
react-native link很重要react-native link很重要react-native link很重要（重要的事情說三遍）兔仰，注意如果在執(zhí)行react-native link的時候控制臺報錯茫负，請在項目根目錄先執(zhí)行npm install后再執(zhí)行react-native link命令即可。
第三步：在項目中使用（ios）乎赴。
1.在項目文件中導入組件import Icon from 'react-native-vector-icons/Ionicons';
import {AppRegistry,View,StyleSheet} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';
export default class icons extends Component {
render() {
return (
<View style={styles.container}>
<FontAwesome name={'telegram'} size={26} color="red" style={styles.icon} />
<FontAwesome name={'search'} size={26} color="red" style={styles.icon} />
<FontAwesome name={'map-marker'} size={26} color="red" style={styles.icon} />
<Ionicons name={'ios-home'} size={26} color="blue" style={styles.icon} />
<Ionicons name={'ios-cart'} size={26} color="blue" style={styles.icon} />
<Ionicons name={'ios-navigate'} size={26} color="blue" style={styles.icon} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:"row",
marginTop:50
},
icon:{
marginLeft:10
}
});
AppRegistry.registerComponent('icons', () => icons);
2.<FontAwesome name={'telegram'} size={26} color="red" style={styles.icon} />name就是圖標的名稱忍法，size控制圖標的大小，style控制圖標的樣式榕吼，color控制圖標的顏色饿序。
3.如果你引入的是import Icon from 'react-native-vector-icons/Ionicons';,你可以去ionicons.com上去找圖標，圖標的名稱就是name的值羹蚣，但是注意需要去掉前面的“ion-”,如圖原探；
import Icon from 'react-native-vector-icons/FontAwesome';,你可以去fontawesome.io上去找圖標，圖標的名稱就是name的值顽素，但是注意需要去掉前面的“fa-”,如圖咽弦；
最后：我們來看一看效果吧；
結(jié)語：
好了胁出，今天的教程就到這里离唬，至于Android平臺怎么配置，在這里就不說了划鸽，如果有需要就給我留言输莺，抽時間我再出一篇關于Android平臺的，其實像這種教程網(wǎng)上搜一下會有很多裸诽，但是我發(fā)現(xiàn)很多都說的不太清楚嫂用，所以我今天站在小白的立場上出的這篇教程，希望給新手提供更友好的幫助丈冬。說的不對的地方請提出且包涵嘱函，謝謝！
