android项目集成react-native-vector-icons步骤

前言

我在android项目集成react-native-vector-icons时踩了一些坑，百度一下集成教程也没发现说明详细步骤和一些报错处理的文章，我在这里总结一下我的集成过程。

1.安装react-native-vector-icons

关于项目开发环境搭建和创建项目上一片文章已经写过，这里就默认你已经构建好了项目；进入项目等目录，然后执行命令：

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

等待安装完成。

2.修改项目配置文件

（1）在项目目录node_modules/eact-native-vector-icons下，将Fonts文件夹中的内容复制到android/app/src/main/assets/fonts（注意小写字体文件夹）。
（2）在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"

（3）编辑android/settings.gradle对应位置添加+号所示代码：

rootProject.name = 'MyApp'

include ':app'

+ 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 {
  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')
}

（5）编辑android/app/src/main/java/com/.../MainApplication.java对应位置添加+号所示代码：

package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

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

}

（6）上面修改完成后，执行命令：

react-native run-android

重新编译项目。或许在编译项目会碰到如下报错：

842789315583532812.png

这个问题是因为你的文件权限可能为只读，所以不能进行操作，修改文件权限即可重新编译（文件夹——右键——属性——去掉只读勾选），如图：

1.png

查看效果

在index.android.js中添加如下+号所示代码即可运行设备查看效果：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
+ import Icon from 'react-native-vector-icons/FontAwesome';
export default class cityapp extends Component {
  render() {
    return (
       
        + 
            .....................................
      
    );
  }
}

效果如下图

665286980616360064.png

OK，至此react-native-vector-icons就集成好了，观看icons的图标name可以到ionicons,去掉前缀icon-就可以在代码中使用，还有几个网站就不做介绍了，去官网查看react-native-vector-icons文档吧。