安装

  1. yarn add react-native-vector-icons
  3. //如果使用 TypeScript 开发，则还需要安装 @types/react-native-vector-icons
  4. yarn add @types/react-native-vector-icons -D

iOS配置

用 Xcode 打开 ios 目录下的 .xcworkspace 文件
将字体文件添加到项目
1、右击选择Add Files to “RNIconsExample”…
image.png

2、选中 node_modules/react-native-vector-icons/Fonts 文件夹，并确保勾选 Copy items if needed、Create groups
image.png

3、在 Build Phases – Copy Bundle Resources 面板中，确保添加了你的字体文件，如果没有引入，则手动添加进去
image.png

在 Info.plist文件上右击，选择 Open As – Source Code，以源码方式打开该文件，然后把下面的配置信息粘贴进去

  1. <key>UIAppFonts</key>
  2. <array>
  3.   <string>AntDesign.ttf</string>
  4.   <string>Entypo.ttf</string>
  5.   <string>EvilIcons.ttf</string>
  6.   <string>Feather.ttf</string>
  7.   <string>FontAwesome.ttf</string>
  8.   <string>FontAwesome5_Brands.ttf</string>
  9.   <string>FontAwesome5_Regular.ttf</string>
  10.   <string>FontAwesome5_Solid.ttf</string>
  11.   <string>Foundation.ttf</string>
  12.   <string>Ionicons.ttf</string>
  13.   <string>MaterialIcons.ttf</string>
  14.   <string>MaterialCommunityIcons.ttf</string>
  15.   <string>SimpleLineIcons.ttf</string>
  16.   <string>Octicons.ttf</string>
  17.   <string>Zocial.ttf</string>
  18.   <string>Fontisto.ttf</string>
  19. </array>

在项目根目录下新建 react-native.config.js 文件，写入如下内容

  1. module.exports = {
  2.     dependencies: {
  3.         'react-native-vector-icons': {
  4.             platforms: {
  5.                 ios: null,
  6.             },
  7.         },
  8.     },
  9. };

更新依赖并重新运行

  1. cd ios && pod install && cd ..
  2. yarn run ios

Android配置

通过 Gradle 自动构建

推荐使用 Gradle 方式，在构建时自动从库中复制字体文件，保证字体和JS代码都是最新的，平滑升级到新版本。

编辑 android/app/build.gradle 并添加以下内容：

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

以上配置会将 node_modules/react-native-vector-icons/Fonts 目录下的所有字体文件复制到 Android 项目，如果你需要指定复制的字体文件，则添加如下内容：

  1. project.ext.vectoricons = [
  2.     iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
  3. ]
  4. apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

重新运行

  1. yarn run android

手动集成

手动集成只需要将字体文件拷贝到指定目录即可，如果您想使用 Icon.getImageSource 函数，则需要进行进一步的配置，具体可以参考官方教程 Integrating library for getImageSource support 这一章节的内容。

手动集成的弊端在于字体文件不会随着库的更新而更新，每次库更新后，都需要手动再次将字体文件拷贝到指定目录。

将 Fonts 下的字体文件复制到 android/app/src/main/assets/fonts，如果没有则自行创建文件夹
重新运行

  1. yarn run android

使用图标

首先确定你要使用哪个字体，然后导入对应字体即可（比如我们使用 AntDesign 字体）：

  1. import Icons from 'react-native-vector-icons/AntDesign';
  2. <Icons name="home" size={50} color="red" />

在使用图标过程中，我们需要知道库提供了哪些图标，可以从 https://oblador.github.io/react-native-vector-icons/ 这个网站进行快速检索。