React Native項目中集成react-native-vector-icons

使用React Native開發移動App時，常常會遇到矢量圖和自定義字體的開發需求，使用矢量圖能夠有效的減小包體積的大小。在React Native開發中，可使用react-native-vector-icons來知足開發需求。

1、安裝

和其餘的第三方庫同樣，使用第三方庫以前須要先安裝react-native-vector-icons。

npm install --save react-native-vector-icons

而後，在使用link命令添加原生庫連接。

react-native link react-native-vector-icons

2、原生端配置

2.1 iOS端配置

首先，在RN的 ios 目錄下執行 pod install命令安裝依賴包。

cd ios && pod install

而後，在Xcode項目中建立一個新的字體組取名爲Fonts，從 ./node_modules/react-native-vector-icons/Fonts將須要的字體拷貝進去。


打開Xcode，使用源代碼模式編輯 info.plist 文件，以下圖。

而後，將字體的配置加入進去，以下所示。

<key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    ...
  </array>

使用Xcode編譯一下iOS項目，若是沒有任何錯誤就說明配置好了。

2.2 Android端配置

和 iOS 同樣，Android原生端也須要進行一些配置才能正常使用。首先，將node-modeles\react-native-vector-icons\Fonts 目錄下文件複製到項目andriod\app\src\main\assets\fonts 目錄下。

而後，打開andriod/app/build.gradle文件，增長以下代碼。

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

從新編譯Android工程，若是沒有任何錯誤，說明配置好了。

2.3 使用示例

原生端配置完成以後，接下來就能夠直接使用了，以下所示。

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

<Icon name="rocket" size={30} color="#900" />

參考：react-native-vector-icons