如何使用 react-native-vector-icons

react-native-vector-icons 是 React Native 中常用的第三方图标库，提供了大量的图标，且使用方便。本文将介绍 react-native-vector-icons 的使用方法。

1. 安装

使用 npm 安装 react-native-vector-icons：

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

iOS 平台需要进行一些额外的配置，具体配置见 官方文档，这里不再赘述。

2. 导入图标

为了方便起见，我们可以创建一个专门用于存放图标的文件夹，如 icons，在其中创建一个名为 index.js 的文件，用于导入所有的图标：

// icons/index.js

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

const Icon = createIconSetFromIcoMoon(icoMoonConfig);

export default Icon;

上述代码中，我们使用 createIconSetFromIcoMoon 函数将 selection.json 文件中的图标转化为组件，然后将其默认导出。

其中， selection.json 文件是在 IcoMoon App 中自定义图标后下载得到的，也可以直接使用其它提供的图标库，如 Font Awesome。

3. 使用图标

在需要使用图标的组件中，直接引入上述导出的 Icon 组件即可：

import Icon from './icons';

function MyComponent() {
  return (
    <View>
      <Icon name="search" size={30} color="black" />
      <Icon name="heart" size={30} color="red" />
    </View>
  );
}

上述代码中，我们分别使用了 search 和 heart 两个图标，设置了它们的大小和颜色。

4. 更多用法

react-native-vector-icons 还提供了许多更高级的使用方法，如修改样式、渐变色、动画等，具体详见 官方文档。

总结

react-native-vector-icons 是 React Native 中常用的第三方图标库，使用方便。我们可以自定义图标，并将其封装为组件，在需要使用图标的组件中引入即可。同时，库还提供了许多更高级的使用方法，可以根据需求进行配置。