react-native-vector-icons 使用教程完整版

官方教程:git地址 

1、在命令行输入:npm install react-native-vector-icons --save

2、在项目中可以看到react-native-vector-icons的目录截图如下:

红色框里面是已经存在的字体,总共有9个


对应有几个图标。

3、接下来要在xcode工程目录中加入fonts文件夹,(记住不是在xcode中右击加入),而是要拖拽进去,然后会提示是否:"Add to targets" and that "Create groups",拖拽进去后工程自动会弹出提示,是否add to targets  和create groups  记得要打钩,

4、在xcode项目中一般会自动增加:

如果没有自动增加可以打开info.plist文件增加:

不要意思代码贴不进去。

UIAppFonts

Entypo.ttf

EvilIcons.ttf

FontAwesome.ttf

Foundation.ttf

Ionicons.ttf

MaterialIcons.ttf

Octicons.ttf

SimpleLineIcons.ttf

Zocial.ttf

5、按照教程在react-native项目中引入react-native-vector-icons ;如:

      import Ficon from'react-native-vector-icons/FontAwesome';

render()里面使用:<Ficon  name="对应名字:arrow-left" size={大小:20} color="字体颜色:#fff"/>

6、此时如果在项目中reload的话会提示FontAwesome字体不存在。记住一定要在xcode中重启项目才可以使用。

   

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容