前言

我在android項(xiàng)目集成react-native-vector-icons時(shí)踩了一些坑，百度一下集成教程也沒(méi)發(fā)現(xiàn)說(shuō)明詳細(xì)步驟和一些報(bào)錯(cuò)處理的文章，我在這里總結(jié)一下我的集成過(guò)程。

1.安裝react-native-vector-icons

關(guān)于項(xiàng)目開(kāi)發(fā)環(huán)境搭建和創(chuàng)建項(xiàng)目上一片文章已經(jīng)寫(xiě)過(guò)，這里就默認(rèn)你已經(jīng)構(gòu)建好了項(xiàng)目；進(jìn)入項(xiàng)目等目錄，然后執(zhí)行命令：

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

等待安裝完成。

2.修改項(xiàng)目配置文件

（1）在項(xiàng)目目錄node_modules/eact-native-vector-icons下，將Fonts文件夾中的內(nèi)容復(fù)制到android/app/src/main/assets/fonts（注意小寫(xiě)字體文件夾）。
（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對(duì)應(yīng)位置添加+號(hào)所示代碼：

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對(duì)應(yīng)位置添加+號(hào)所示代碼：

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對(duì)應(yīng)位置添加+號(hào)所示代碼：

package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

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

}

（6）上面修改完成后，執(zhí)行命令：

react-native run-android

重新編譯項(xiàng)目?；蛟S在編譯項(xiàng)目會(huì)碰到如下報(bào)錯(cuò)：

842789315583532812.png

這個(gè)問(wèn)題是因?yàn)槟愕奈募?quán)限可能為只讀，所以不能進(jìn)行操作，修改文件權(quán)限即可重新編譯（文件夾——右鍵——屬性——去掉只讀勾選），如圖：

1.png

查看效果

在index.android.js中添加如下+號(hào)所示代碼即可運(yùn)行設(shè)備查看效果：

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 (
       <View style={styles.contener}>
        + <Icon name="rocket" size={16} color="red"/>
            .....................................
      </View>
    );
  }
}

效果如下圖

665286980616360064.png

OK，至此react-native-vector-icons就集成好了，觀看icons的圖標(biāo)name可以到ionicons,去掉前綴icon-就可以在代碼中使用，還有幾個(gè)網(wǎng)站就不做介紹了，去官網(wǎng)查看react-native-vector-icons文檔吧。