react-native-vector-icons（android）的安装与使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hxy19971101/article/details/80555317

第一步：在react-native 工程目录下通过npm安装react-native-vector-icons

npm install react-native-vector-icons --save

第二步：分别为android和ios做一些相应的配置

Android：

在android/app/build.gradle

中增加如下脚本：

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

在node-modules 中找到

react-native-vector-icons库，将Fonts 文件夹拷贝到android/app/src/main/assets/fonts
如果没有assets/fonts 新建即可

在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')

include ':react-native-vector-icons'的作用时在编译android项目的时候

react-native-vector-icons会作为一个module加入编译。

project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')是指定

react-native-vector-icons的具体路径

在 android/app/build.gradle 
添加：compile project(':react-native-vector-icons')

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
  ....
  compile project(':react-native-vector-icons')
}

最后一步：在android/app/src/main/java/你的包/MainApplication.java中添加

import com.oblador.vectoricons.VectorIconsPackage;
new VectorIconsPackage()

代码如下：

package com.myapp;

import com.oblador.vectoricons.VectorIconsPackage;

....

  @Override
  protected List getPackages() {
    return Arrays.asList(
      new MainReactPackage()
 , new VectorIconsPackage()
    );
  }

}

然后在此运行项目即可。

测试代码：

import React, {
  Component
} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component < Props > {
  render() {
    return (
      <View style={styles.container}>
      <View >
        <Icon name="rocket" size={16} color="red"/>
      </View>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});