react-native-vector-icons 的使用

https://github.com/oblador/react-native-vector-icons

支持的图标

react native 版本 0.36

项目引入

项目根目录

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

android项目要重新编译

gradlew clean
gradlew assembleDebug

要使用图标的文件

import Icon from 'react-native-vector-icons/FontAwesome';
...
render() {
        const myIcon = (<Icon name="rocket" size={30} color="#900" />)
        return (
            <View>
                <Icon name="ios-add" size={30} color="red" />
                <Icon name="github" size={30} color="red" />
                <Icon name="music" size={30} color="red" />
                <Icon name="user" size={30} color="red" />
                <Icon name="film" size={30} color="red" />
                <Icon name="heart" size={30} color="red" />
                <Icon.Button name="facebook" backgroundColor="#3b5998" onPress={this.loginWithFacebook}>
                    Login with Facebook
                </Icon.Button>
                <Text style={styles.textDefault}>
                    App07 {myIcon}
                </Text>
                {myIcon}
            </View>
        );

此时发现只是显示FontAwesome.json下的图标

import Icon from 'react-native-vector-icons/MaterialIcons';
...
render() {
        return (
            <View>
                <Icon name="android" size={30} color="red" />
                <Icon name="github" size={30} color="red" />
             </View>
             )
};

此时github不显示 android显示

编译\react-native-vector-icons\Examples\IconExplorer

1、下载所需包

npm install 

下载所需文件
2、生成 bundle
创建assets文件夹

Paste_Image.png

执行

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

正常会生成

Paste_Image.png

3、复制字体
将
react-native-vector-icons\Examples\IconExplorer\node_modules\react-native-vector-icons\Fonts
复制到

Paste_Image.png

4、生成apk
android/gradlew assembleDebug

Paste_Image.png
apk地址
http://pan.baidu.com/s/1eRJGAHG 方便查找图标

自定义图标

1、icomoon字体

下载https://icomoon.io/app/#/select/font

icomoon下载的zip文件

fonts复制到android/app/src/main/assets下
.json复到到 js同目录下，以能引用到

使用createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './config.json';
const Icon = createIconSetFromIcoMoon(icoMoonConfig);

json文件

{
  "IcoMoonType": "selection",
  "icons": [
    {
      "icon": {
        ...
      "properties": {
        "ligatures": "connection, wifi",
        "name": "connection",
        "order": 2,
        "id": 28,
        "prevSize": 32,
        "code": 59675
      },
     ...
    },

使用时 name属性使用 properties中的name

fontello网站字体

http://fontello.com/
下载

Paste_Image.png

将fonts复制到android的assets目录下
.json复到到 js同目录下，以能引用到
createIconSetFromFontello(config[, fontFamily[, fontFile]])

···
import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);
···

json文件

{
  "name": "",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "hinting": true,
  "units_per_em": 1000,
  "ascent": 850,
  "glyphs": [
    {
      "uid": "1ba44825e5f10920b4e3f1d0c73f79a2",
      "css": "emo-wink",
      "code": 59393,
      "src": "fontelico"
    },

使用时 name属性使用 glyphs中的css,不需要css_prefix_text的前缀

自定义config

import { createIconSet } from 'react-native-vector-icons';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const Icon = createIconSet(glyphMap, 'FontName');

createIconSet 的第一个参数不一样

示例文件

/**
 * Created by Administrator on 2016/11/22.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native'

/*MaterialIcons*/
import Icon from 'react-native-vector-icons/MaterialIcons';

/*fontello*/
import { createIconSetFromFontello,createIconSet,createIconSetFromIcoMoon } from 'react-native-vector-icons';
import fontelloConfig from './font/config.json';
const Iconfontello = createIconSetFromFontello(fontelloConfig, "fontello", "fontello.ttf");

/*icoMoon*/
import icoMoonConfig from './font/selection.json';
const IconicoMoon = createIconSetFromIcoMoon(icoMoonConfig, "icoMoon", "icomoon.ttf");

/*自定义字体*/
const MuiIcon = createIconSet({ 'icon': 59469,}, 'iconfont', 'MaterialIcons.ttf');
const MuiIcon2 = createIconSet({'icon': 59395,}, 'iconfont', 'fontello.ttf');

class App07 extends Component {
    render() {
        return (
            <View >
                <Icon name="android" size={30} color="red"/>
                <Text >aaa  </Text>
                <MuiIcon name="icon" size={40} color="red"/>
                <MuiIcon2 name="icon" size={40} color="red"/>
                <Iconfontello name="emo-wink" size={40} color="red"/>
                <IconicoMoon name="connection" size={40} color="red"/>

                <Text >aaa  </Text>
            </View>
        );
    }

}
const styles = StyleSheet.create({
    textDefault: {
        justifyContent: 'flex-start',
        alignItems: "flex-start",
        backgroundColor: '#ffffff',
    },
});
export default App07;

Paste_Image.png Paste_Image.png