React Native第三方组件之react-native-vector-icons

做一个有情怀的程序员

在项目开发中，为了提高项目的逼格和美观度，我们经常需要使用的各式各样的图标，常用的手段就是美工帮我们切好图，也就是使用图片去实现，如果项目太大会导致图片资源太多，占用体积，怎么办？今天给大家推荐一个github上比较受欢迎的一个强大的icons库——“react-native-vector-icons”。废话不多说，直接上教程。

第一步：使用Terminal进入到项目根目录中安装react-native-vector-icons，执行命令npm install react-native-vector-icons --save等待安装完成。

---

第二步：由于Android和iOS平台不一样，所以需要分别对待，首先先配置iOS。

使用Terminal进入到项目根目录中执行命令react-native link,执行完成后，使用Xcode打开工程目录下的ios文件夹下的 xxxx.xcodeproj 文件,(xxxx是你的项目名称)，查看 Resources 文件夹以及右侧名为 Fonts provided by application 数组，如图1；

图1

至此为止ios的配置工作就全部结束了。其中 react-native link 很重要 react-native link 很重要 react-native link 很重要（重要的事情说三遍），注意如果在执行 react-native link的时候控制台报错，请在项目根目录先执行 npm install后再执行 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 (
      
        
        
        
        
        
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      flexDirection:"row",
      marginTop:50
    },
    icon:{
      marginLeft:10
    }
});

AppRegistry.registerComponent('icons', () => icons);

2.name就是图标的名称，size控制图标的大小，style控制图标的样式，color控制图标的颜色。

3.如果你引入的是import Icon from 'react-native-vector-icons/Ionicons';,你可以去ionicons.com上去找图标，图标的名称就是name的值，但是注意需要去掉前面的“ion-”,如图；

图6

如果你引入的是 import Icon from 'react-native-vector-icons/FontAwesome';,你可以去
fontawesome.io上去找图标，图标的名称就是name的值，但是注意需要去掉前面的“fa-”,如图；

图7

最后：我们来看一看效果吧；

效果图

结语：

好了，今天的教程就到这里，至于Android平台怎么配置，在这里就不说了，如果有需要就给我留言，抽时间我再出一篇关于Android平台的，其实像这种教程网上搜一下会有很多，但是我发现很多都说的不太清楚，所以我今天站在小白的立场上出的这篇教程，希望给新手提供更友好的帮助。说的不对的地方请提出且包涵，谢谢！