react-native-vector-icons使用

1、安装及配置

（1）使用 npm install react-native-vector-icons --save命令进行安装；

（2）在xcode中打开项目，将node_modules/react-native-vector-icons下Fonts文件夹拖入xcode中，选择“Add to targets”和“Create groups”；

(3)在Info.plist文件中添加属性“Fonts provided by application”

2、使用

下面实现个简单例子，将icons库中的图片全部展示出来，具体代码如下：
Home.js

import React from 'react';
import {
    ScrollView,Button,View,Text,StyleSheet,} from 'react-native';

import {StackNavigator} from 'react-navigation';

import Icon from 'react-native-vector-icons/FontAwesome';

class Home extends React.Component {

    static navigationoptions = {
        title: 'vector-icons',headerBackTitle: 'back'
    };

    render() {

        const items = [];
        items.push({name: 'facebook',title: 'Entypo'});
        items.push({name: 'facebook-f',title: 'EvilIcons'});
        items.push({name: 'twitter',title: 'FontAwesome',bgColor: '#0366d6'});
        items.push({name: 'github',title: 'Foundation',bgColor: '#0366d6'});
        items.push({name: 'google-plus',title: 'Ionicons'});
        items.push({name: 'code-fork',title: 'MaterialCommunityIcons',color: '#000',bgColor: 'gray'});
        items.push({name: 'apple',title: 'MaterialIcons',bgColor: 'gray'});
        items.push({name: 'windows',title: 'Octicons'});
        items.push({name: 'android',title: 'SimpleLineIcons'});
        items.push({name: 'linux',title: 'Zocial'});

        return (
            <ScrollView>
                <Text style={styles.title}>1、按钮（跳转到图片库）</Text>
                {items.map((item,index) => {
                    return this._buttonIcon(item,index);
                })}

                <Text style={styles.title}>2、inline样式</Text>
                <Text style={{paddingHorizontal: 20}}>
                    传说中的inline<Icon name='android' color='#451234'/>
                    纯属测试<Icon name='apple'/>
                    呃呃呃
                </Text>

            </ScrollView>
        );
    }

    _buttonIcon(data,index) {
        if (!data.bgColor)
            data.bgColor = '#3b5998';
        if (!data.color)
            data.color = '#fff';
        return (
            <View key={index} style={styles.btnView}>
                <Icon.Button
                    name={data.name}
                    backgroundColor={data.bgColor}
                    color={data.color}
                    onPress={() => {
                        this.props.navigation.navigate('IconScreen',{name: data.title});
                    }}>
                    {data.title}
                </Icon.Button>
            </View>
        );
    }

}

var styles = StyleSheet.create({
    btnView: {
        paddingVertical: 3,alignSelf: 'center'
    },title: {
        paddingLeft: 10,marginVertical: 10,}
});


import IconScreen from './IconsScreen';

const AppStack = StackNavigator({
    Home: {
        screen: Home,},IconScreen: {
        screen: IconScreen,});

module.exports = AppStack;

IconsScreen.js

import React from 'react';
import {
    View,Dimensions,FlatList
} from 'react-native';
/** *由于文件没有使用module.exports方式，所以不能动态引入 */
import EntypoIcon from 'react-native-vector-icons/Entypo';
import EvilIconsIcon from 'react-native-vector-icons/EvilIcons';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import FoundationIcon from 'react-native-vector-icons/Foundation';
import IoniconsIcon from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIconsIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIconsIcon from 'react-native-vector-icons/MaterialIcons';
import OcticonsIcon from 'react-native-vector-icons/Octicons';
import SimpleLineIconsIcon from 'react-native-vector-icons/SimpleLineIcons';
import ZocialIcon from 'react-native-vector-icons/Zocial';



var Icon;
var glyphMap;


const size = 30;
const color = '#000';

class IconsScreen extends React.Component {

    static navigationoptions = ({navigation}) => ({
        title: navigation.state.params.name,});

    render() {
        let type = this.props.navigation.state.params.name;

        if ('Entypo' == type) {
            Icon = EntypoIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/Entypo.json');
        } else if ('EvilIcons' == type) {
            Icon = EvilIconsIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/EvilIcons.json');
        } else if ('FontAwesome' == type) {
            Icon = FontAwesomeIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/FontAwesome.json');
        } else if ('Foundation' == type) {
            Icon = FoundationIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/Foundation.json');
        } else if ('Ionicons' == type) {
            Icon = IoniconsIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/Ionicons.json');
        } else if ('MaterialCommunityIcons' == type) {
            Icon = MaterialCommunityIconsIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json');
        } else if ('MaterialIcons' == type) {
            Icon = MaterialIconsIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/MaterialIcons.json');
        } else if ('Octicons' == type) {
            Icon = OcticonsIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/Octicons.json');
        } else if ('SimpleLineIcons' == type) {
            Icon = SimpleLineIconsIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/SimpleLineIcons.json');
        } else if ('Zocial' == type) {
            Icon = ZocialIcon;
            glyphMap = require('react-native-vector-icons/glyphmaps/Zocial.json');
        }

        let names = [];
        for (let name in glyphMap) {
            names.push(name);
        }

        return (
            <FlatList
                numColumns={4}
                data={names}
                renderItem={({item}) => (
                    <View style={styles.item}>
                        <Icon name={item} size={size} color={color}/>
                        <Text style={styles.text}>{item}</Text>
                    </View>
                )}
            />
        );
    }

}

var styles = StyleSheet.create({
    item: {
        justifyContent: 'center',alignItems: 'center',width: Dimensions.get('window').width / 4,paddingVertical: 5,text: {
        fontSize: 12,textAlign: 'center',}
});

module.exports = IconsScreen;

效果图如下：

注意：demo中的导航器使用的是react-navigation，安装命令npm install --save react-navigation

原文地址：https://www.jb51.cc/react/304071.html