react-native矢量图标库react-native-vector-icons使用详解

react-native-vector-icons使用详解

一、安装依赖【GitHub官网链接：https://github.com/oblador/react-native-vector-icons】

*选择以下其中一种安装方式即可*

//npm的安装方法
npm install --save react-native-vector-icons

//yarn的安装方法
yarn add react-native-vector-icons

二、根据以下提示操作

1、进入你的项目根目录，打开android/app/build.gradle ( 不是 android/build.gradle ) ，添加以下代码：

project.ext.vectoricons = [
    //然后在以下数据中你可以添加需要字体图标文件名
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] 
]

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

2、进入你的项目根目录，将node_modules\react-native-vector-icons\Fonts文件下所有的内容（文件）复制到android/app/src/main/assets/fonts文件夹下， 其中assets文件夹和fonts文件夹需要自行创建

      

 

 

 

 3、进入你的项目根目录，打开文件android/settings.gradle  添加如下代码：

 

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 添加以下代码：

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  ..........
 implementation project(':react-native-image-picker') // ----只需要添加改行代码即可
}

 

 

 5、进入你的项目根目录，打开MainApplication.java （所在路径比较深仔细查找android\app\src\main\java\com\你的项目名称\MainApplication.java），添加以下代码，添加到你的第2或第3行的位置即可：

import com.oblador.vectoricons.VectorIconsPackage;

 

 

 三、使用图标

import React,{ Component } from 'react';
import {StyleSheet,ScrollView,View,Text,} from 'react-native';
//导入字体图标库
import Icon from 'react-native-vector-icons/FontAwesome';

class App extends Component{
   render() {
      return <View>
         //其中name属性就是图标的名称，size设置图标的大小，color设置图标的颜色
          <Icon name="home" size={30} color="black" />
         <Icon name="search" size={30} color="black" />
     <View>
     }
} 

四、注意：

只要是修改配置文件 必须重新运行react-native run-android