您的位置:

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带来无穷的美感。