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', color: '#000', 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, Text, StyleSheet, 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