React Native Vector Icons

一、概述

React Native Vector Icons是一個開源項目，他提供了一種簡便的方式來使用矢量圖標，其中包含了眾多主流的圖標庫，我們可以輕鬆的使用它們來使我們的應用圖標更加美觀。

React Native Vector Icons的矢量圖標可以按照App的主題顏色進行渲染，與此相比，位圖圖標就不能做到這一點。

React Native Vector Icons由oblador、brentvatne、brentvatne等開發，可以從以下地址進行獲取：

https://github.com/oblador/react-native-vector-icons

二、安裝

React Native Vector Icons可以通過npm和yarn進行安裝，具體如下：

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

或者

yarn add react-native-vector-icons

安裝之後，我們應該在native目錄下導入該組件：

react-native link react-native-vector-icons

注意，在iOS平台之後，我們還需要運行以下命令：

cd ios
pod install
cd ..

這樣我們就可以正常的使用矢量圖標了。

三、使用

1、引用全局的Icon組件

我們可以在App.js或是我們項目的入口文件中，引入全局的Icon組件，具體代碼如下：

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

// ... some code here 

function App() {
  return (
    <Icon name="rocket" size={30} color="#900" />
  );
}

在以上代碼中，我們引入了FontAwesome的矢量圖標，其中的名字為「rocket」，大小為「30」，顏色為”#900″。

2、按需引入

我們可以引入需要的矢量圖標，這樣可以減少打包的體積。假設我們需要使用FontAwesome的「rocket」圖標，具體代碼如下：

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

// ... some code here 

function MyComponent() {
  return (
    <FontAwesomeIcon name="rocket" size={30} color="#900" />
  );
}

3、自定義圖標庫

我們還可以添加自己的圖標庫至react-native-vector-icons中，以便按需使用。假設我們需要添加一個名為myIcon的圖標庫，具體代碼如下：

// ... some code here 

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../path/to/selection.json';

const MyIcon = createIconSetFromIcoMoon(icoMoonConfig, 'MyIcon');

function MyComponent() {
  return (
    <MyIcon name="rocket" size={30} color="#900" />
  );
}

四、常用屬性

以下是我們在使用React Native Vector Icons時常見的Props：

1. name：矢量圖標的名字。
2. size：矢量圖標的大小。
3. color：矢量圖標的顏色。
4. style：矢量圖標的樣式。

五、總結

React Native Vector Icons給我們提供了一種便利的方式來使用各種主流矢量圖標，可以讓我們的應用更加美觀。此外，React Native Vector Icons還具有一些靈活的引入方式，可以讓我們減少應用的體積。

如果您還沒有使用React Native Vector Icons，建議您嘗試一下他的魅力，將會給您的App帶來無窮的美感。