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