三步搞定！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官網查看文檔：傳送門