react-native-vector-icons使用詳解

一、安裝依賴【GitHub官網連結：https://github.com/oblador/react-native-vector-icons】

1 *選擇以下其中一種安裝方式即可*
2 
3 //npm的安裝方法
4 npm install --save react-native-vector-icons
5 
6 //yarn的安裝方法
7 yarn add react-native-vector-icons

二、根據以下提示操作

1、進入你的專案根目錄，開啟android/app/build.gradle( 不是android/build.gradle

1 project.ext.vectoricons = [
2     //然後在以下資料中你可以新增需要字型圖示檔名
3     iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] 
4 ]
5 
6 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 新增如下程式碼：

1 include ':react-native-vector-icons'
2 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-nativerun-android