react-native-vector-icons 使用

react-native-vector-icons 使用

react-native-vector-icons

一. 切换到工程目录，执行

执行安装命令

      npm install react-native-vector-icons --save
      或者 
      yarn add react-native-vector-icons

注意：目前npm5存在安装新库时会删除其他库的问题，可能后面会修复导致项目无法正常运行。请尽量使用yarn代替npm操作。

执行以下命令链接原生库

    react-native link react-native-vector-icons

二. ios配置（ios需要单独导入字体文件，安卓link完就可以用了）

1,右键工程文件Add Files to “(你工程名)”

2,选择node_modules/react-native-vector-icons/Fonts文件夹

三. 使用

使用的时候就可到[图片库地址](https://oblador.github.io/react-native-vector-icons/
)进行搜索需要的图标了

eg:  
搜索 add  会出现如下的图片  

使用的时候首先要引入
react-native-vector-icons

但是 react-native-vector-icons下有很多图片集 引入的时候使用那个能
这里有一个小技巧比如我要引入add-to-list这个图标

    引入的时候只需要在react-native-vector-icons后对应的模块名就行了  

    import Icon from 'react-native-vector-icons/Entypo';

   如引入 
    import Icon from 'react-native-vector-icons/Ionicons';


    import Entypo from 'react-native-vector-icons/Entypo';

参考

https://www.jianshu.com/p/a25e4ecce60f

关注微信公众号获取更多内容