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属性填上相应库中的图标名称即可.