React Native項(xiàng)目中集成react-native-vector-icons

作者丨xiangzhihong

來源：

https://segmentfault.com/a/1190000039968136

使用React Native開發(fā)移動(dòng)App時(shí)，經(jīng)常會(huì)遇到矢量圖和自定義字體的開發(fā)需求，使用矢量圖可以有效的減少包體積的大小。在React Native開發(fā)中，可以使用react-native-vector-icons來滿足開發(fā)需求。

一、安裝

和其他的第三方庫一樣，使用第三方庫之前需要先安裝react-native-vector-icons。

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

然后，在使用link命令添加原生庫鏈接。

react-native link react-native-vector-icons

二、原生端配置

2.1 iOS端配置

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

cd ios && pod install

然后，在Xcode項(xiàng)目中創(chuàng)建一個(gè)新的字體組取名為Fonts，從 ./node_modules/react-native-vector-icons/Fonts將需要的字體拷貝進(jìn)去。


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

然后，將字體的配置加入進(jìn)去，如下所示。

<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項(xiàng)目，如果沒有任何錯(cuò)誤就說明配置好了。

2.2 Android端配置

和 iOS 一樣，Android原生端也需要進(jìn)行一些配置才能正常使用。首先，將node-modeles\react-native-vector-icons\Fonts 目錄下文件復(fù)制到項(xiàng)目andriod\app\src\main\assets\fonts 目錄下。

然后，打開andriod/app/build.gradle文件，增加如下代碼。

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

重新編譯Android工程，如果沒有任何錯(cuò)誤，說明配置好了。

2.3 使用示例

原生端配置完成之后，接下來就可以直接使用了，如下所示。

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

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

參考：react-native-vector-icons

-End-

最近有一些小伙伴，讓我?guī)兔φ乙恍?nbsp;面試題 資料，于是我翻遍了收藏的 5T 資料后，匯總整理出來，可以說是程序員面試必備！所有資料都整理到網(wǎng)盤了，歡迎下載！