React-native Android react-nativ

App中会经常用到小图标，而且还要切换他们的颜色，为了避免使用图片导致的繁琐和不友好，介绍一下一款非常实用且强大的icons集成库，react-native-vector-icons。

1.如何在Android项目中部署

Installation(安装组件)

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

Android配置集成

1.编辑android / app / build.gradle（不是android / build.gradle）并添加以下内容：

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文件夹中的内容复制到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>
);

属性：

属性	描述	default
color	文本和图标颜色，如果需要不同的颜色，请使用iconStyle或嵌套文本组件	white
size	图标大小	20
iconStyle	样式仅适用于图标，适用于设置边距或不同颜色	{marginRight: 10}
backgroundColor	按钮背静颜色	#007AFF
borderRadius	按钮的边框半径，设置为0表示禁用	5
onPress	按下按钮时调用的函数	None

关于图标name的集合，请异步官方网站react-native-vector-icons directory

有大量的图标，基本上可以涵盖所有常用功能的需求：

icons_directory.png