用可定制的矢量图标提升你的React Native应用。非常适合装饰按钮，徽标，导航或选项卡栏，这些图标无缝地集成到您的项目中。它们的多功能性使扩展和造型毫不费力。

官网:

https://www.npmjs.com/package/react-native-vector-icons#android-setup

安装依赖:

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

一、Android安装

1、在在node-modules 中找到react-native-vector-icons库，将Fonts 文件夹拷贝到android/app/src/main/assets/fonts

如果没有assets/fonts 新建即可

2、编辑android/app/构建gradle(不是android/build.Gradle)，并添加：

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // 按需选择制定的字体图标
]//可查看刚才创建的Fonts文件里的字体
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

3、编辑android/settings.Gradle文件如下所示：

rootProject.name = 'MyApp'

include ':app'

+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

4、编辑android/app/build. Gradle（位于app文件夹中）如下所示

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  implementation fileTree(dir: "libs", include: ["*.jar"])
  //noinspection GradleDynamicVersion
  implementation "com.facebook.react:react-native:+"  // From node_modules

+ implementation project(':react-native-vector-icons')
}

5、编辑你的MainApplication.java（位于android/app/src/main/java/…的深处）如下所示（注意有两个地方可以编辑）

package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
      +   , new VectorIconsPackage();
    );
  }

二、Ios安装

1、在iOS目录下运行npx pod-install

pod install

2、在Info.plist中复制和粘贴所有可用字体的列表(不要有空格)

<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>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>FontAwesome6_Brands.ttf</string>
  <string>FontAwesome6_Regular.ttf</string>
  <string>FontAwesome6_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

三、基本使用

选择合适的图标

• AntDesign from AntFinance (298 icons)
• Entypo by Daniel Bruce (v1.0.1 with 411 icons)
• EvilIcons designed by Alexander Madyankin & Roman Shamin (v1.10.1 with 70 icons)
• Feather created by Cole Bemis & Contributors (v4.28.0 featuring 286 icons)
• FontAwesome by Dave Gandy (v4.7.0 containing 675 icons)
• FontAwesome 5 from Fonticons, Inc. (v5.15.3 offering 1598 free and 7848 pro icons)
• FontAwesome 6 designed by Fonticons, Inc. (v6.6.0 featuring 2016 free and 16150 pro icons)
• Fontisto created by Kenan Gündoğan (v3.0.4 featuring 615 icons)
• Foundation by ZURB, Inc. (v3.0 with 283 icons)
• Ionicons crafted by Ionic (v7.1.0 containing 1338 icons)
• MaterialIcons by Google, Inc. (v4.0.0 featuring 2189 icons)
• MaterialCommunityIcons from MaterialDesignIcons.com (v6.5.95 including 6596 icons)
• Octicons designed by Github, Inc. (v16.3.1 with 250 icons)
• Zocial by Sam Collins (v1.4.0 with 100 icons)
• SimpleLineIcons crafted by Sabbir & Contributors (v2.5.5 with 189 icons)

import { View, Text, StatusBar } from 'react-native'
import React from 'react'
import Icon from 'react-native-vector-icons/FontAwesome';
export default function App() {
  return (
    <View>
      <Text>App</Text>
      <Icon name="rocket" size={30} color="#900" />
       <Icon name="check" size={30} color="#900" />
        <Icon name="bars" size={30} color="#900" />
        <Icon name="home" size={30} color="#900" />
    </View>
  )
}