三步搞定！React Native 引用字体图标

在实际项目中，使用字体图标是一个很是常见的需求

那么在React native 中，如何使用漂亮的字体图标？？

万幸有一个很是棒的插件，叫作react-native-vector-icons

他这里面包括了诸多常见的图标库，相信你必定能够找到你喜欢的图标

• AntDesign by AntFinance (297 icons)

• Entypo by Daniel Bruce (411 icons)

• EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)

• Feather by Cole Bemis & Contributors (v4.21.0, 279 icons)

• FontAwesome by Dave Gandy (v4.7.0, 675 icons)

• FontAwesome 5 by Fonticons, Inc. (v5.7.0, 1500 (free) 5082 (pro) icons)

• Fontisto by Kenan Gündoğan (v3.0.4, 615 icons)

• Foundation by ZURB, Inc. (v3.0, 283 icons)

• Ionicons by Ben Sperry (v4.2.4, 696 icons)

• MaterialIcons by Google, Inc. (v3.0.1, 932 icons)

• MaterialCommunityIcons by MaterialDesignIcons.com (v3.6.95, 3695 icons)

• Octicons by Github, Inc. (v8.4.1, 184 icons)

• Zocial by Sam Collins (v1.0, 100 icons)

• SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

好了，话很少说，let's dive in.

第一步

npm install --save react-native-vector-icons
复制代码

第二步

react-native link
复制代码

这是最简单的方法，若是能奏效，两步其实就搞定。

可选，手动添加

若是react-native link没生效，咱们能够尝试手动添加

IOS 平台： 首先在RN项目中打开node_modules/react-native-vector-icons,或者你想使用的某一种字体文件，将它们拖到Xcode中，你的项目下。若是你添加的是整个文件夹，请确保Add to targets 和 Create groups这两个选项，被点了钩

而后打开info.plist,添加一项新属性 Fonts provided by application，而后输入，你刚才手动添加的字体，就像这个样子

这样，就搞定了，在RN中如何使用呢？以Ionicon为例

import Ionicons from 'react-native-vector-icons/Ionicons’; iconName = `ios-more`; //前面必需要加ios <Ionicons name={iconName} size={25} color={'red'} />; 复制代码

这样，IOS下，引入字体图标就是这么简单。安卓就比较尴尬了，我也不懂安卓，看了它英文的介绍，我本身也无法验证是否正确。

英文无压力的同窗，能够直接去npm官网查看文档：传送门