App中會經(jīng)常用到小圖標尸执，而且還要切換他們的顏色，為了避免使用圖片導致的繁瑣和不友好，介紹一下一款非常實用且強大的icons集成庫赘娄，react-native-vector-icons把鉴。

1.如何在Android項目中部署

Installation(安裝組件)

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

Android配置集成

1.編輯android / app / build.gradle（不是android / build.gradle）并添加以下內(nèi)容：

apply from: "../../node_modules/react-native-vector-icons/fonts.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"

2.將Fonts文件夾中的內(nèi)容復制到android / app / src / main / assets / fonts（注意小寫字體文件夾）

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.編輯你的MainApplication.java（深入android / app / src / main / java / ...）

package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

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

}

6.rnpm

$ react-native link

然后重新編譯app就可以了故黑。

2.使用Icon

例如：

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)

由于Icon是構建在Text組件之上的，大部分Text組件的style同樣可以用在Icon的身上纸镊，比如：

• backgroundColor
• borderWidth
• borderColor
• borderRadius
• padding
• margin
• color
• fontSize --> 也可以使用size屬性代替倍阐，效果是一樣的

3.Icon.Button組件簡單使用（左側圖標，右側文字的按鈕）

比如：

icon_button.png

使用示例代碼：

import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998" onPress={this.loginWithFacebook}>
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text>
  </Icon.Button>
);

屬性：

關于圖標name的集合概耻，請異步官方網(wǎng)站react-native-vector-icons directory

有大量的圖標使套，基本上可以涵蓋所有常用功能的需求：

icons_directory.png