react-native-vector-icons使用方法

在網上看了很多react-native-vector-icons的使用方法,截至目前,發現所有的教程都是又復制文件,又是改代碼.稍顯麻煩,這里算是一個小總結,和給自己留一個筆記.

 

首先去https://github.com/oblador/react-native-vector-icons查看該項目的使用方法.

1.安裝react-native-vector-icons

yarn add react-native-vector-icons

2.安裝完成后,由於目前只做安卓的APP,所以我嘗試了一下自動鏈接.

發現react-native link react-native-vector-icons命令執行后,運行程序依舊報錯,說明該方法不太好用.於是我執行了, react-native unlink react-native-vector-icons這樣先卸載掉之前的link

然后按照官方的使用說明.進行復制代碼到項目中

復制以下代碼.到 android/app/build.gradle

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

從上面代碼的目錄來看,復制到這個文件中就行了.按照官方的說法是,該命令會自動在打包的時候復制相關字體文件,無需再進行自己復制.

我這里就采用這種方式了.不再進行其他配置,這樣的好處就是以后升級了這個庫,無需再自己復制其他文件.

其中的缺點可能是打包后,包會大一點點,估計1MB不到.所以也無需在意這點開支.

接下來修改App.js中的代碼來運行程序,測試該包的使用是否成功

import React, {Component} from 'react';
import {View} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

export default class App extends Component {
  render() {
    return (
      <View>
        <Icon name="id-card" size={15} color="red" />
        <Icon name="id-card" size={25} color="yellow" />
        <Icon name="id-card" size={35} color="black" />
      </View>
    );
  }
}

這個import Icon后邊的字體庫可以填入該類庫支持的庫,比如FontAwesome,Ionicons等.


只需在Icon 的name屬性填上相應庫中的圖標名稱即可.