react-native之react-native-vector-icons

在RN中使用react-native-vector-icons图标库引用方式，在项目根目录打开命令行执行以下命令

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

打开xcode点击想目—》info.plist 就能查到已经被引用，如下图：（以iOS为例）

随后再清一下缓存 执行以下命令：

react-native link react-native-vector-icons
react-native start –reset-cache
react-native run-ios

执行完以上命令就可以在项目中使用了，举个列子：

import Ionicons from 'react-native-vector-icons/Ionicons';   //首先引用

return <Ionicons name={"ios-home"} size={25} color={{color:'red'}}/>;  // 使用

附上完整demo(TabNavigation)代码：

TabNavigation.js 文件

import React, {Component} from 'react';
import {View, Text, Image} from 'react-native';
import HomeScreen from './Home';
import MineScreen from './Mine';
import {createBottomTabNavigator, createAppContainer} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

const rootTab = createBottomTabNavigator( 
	{
		Home:HomeScreen,
		Mine:MineScreen,
	},
	{
		initialRouteName:'Home',
		order:['Home', 'Mine'],
		backBehavior:'initialRoute',
		tabBarOptions:{
			activeTintColor:'red',
			inactiveTintColor:'gray',
			style:{
				borderTopColor:'gray',
				height:50
			},
			tabStyle:{
				flex:1,
				justifyContent:'center',
				alignItems:'center'
			},
			labelStyle:{
				fontSize:14
			},
		},
		defaultNavigationOptions:({navigation})=>({
			tabBarVisible: true,
			tabBarIcon: ({focused, tintColor}) => {
            const {routeName} = navigation.state;
            let iconName;
            if (routeName === 'Home') {
                iconName = `ios-home${focused ? '' : '-outline'}`;
            } else if (routeName === 'Mine') {
                iconName = `ios-options${focused ? '' : '-outline'}`;
            }

            // 在此处可以返回任何组件！
            // 我们通常使用react-native-vector-icons中的图标组件
            return <Ionicons name={"ios-home"} size={25} color={tintColor}/>;
          },
		})
	}
);

const AppNavigatorContainer = createAppContainer(rootTab);

class TabNavigator extends Component{
	render(){
		return(
			<View style={{flex:1}}>
				<AppNavigatorContainer/>
			</View>
		);
	}
}

export default TabNavigator;

Home.js 文件

import React from 'react';
import {Text, View, StyleSheet, TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';

class Home extends React.Component{
	render(){
		const{navigation} = this.props;
		return(
			<View style={styles.viewContainer}>

				<Text style={styles.contextTextStyle}>HomeScreen!</Text>
            	<TouchableOpacity 
                	style={styles.buttonContainer}
                	onPress={()=>{navigation.navigate('Mine');}}
            	>
               	<Text>To MineScreen</Text>
            	</TouchableOpacity>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	viewContainer:{
		flex:1,
		alignItems:'center',
		justifyContent: 'center'
	},
	contextTextStyle:{
		fontSize:30
	},
	buttonContainer:{
		backgroundColor:'#FFFFFF',
		borderRadius:30,
		borderWidth:1,
		height:30,
		justifyContent:'center',
		alignItems:'center',
		padding:5
	}
});
Home.propTypes={
	navigation:PropTypes.object
};

module.exports = Home;

Mine.js文件

import React from 'react';
import {Text, View, StyleSheet, TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';

class Home extends React.Component{
	render(){
		const{navigation} = this.props;
		return(
			<View style={styles.viewContainer}>

				<Text style={styles.contextTextStyle}>HomeScreen!</Text>
            	<TouchableOpacity 
                	style={styles.buttonContainer}
                	onPress={()=>{navigation.navigate('Mine');}}
            	>
               	<Text>To MineScreen</Text>
            	</TouchableOpacity>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	viewContainer:{
		flex:1,
		alignItems:'center',
		justifyContent: 'center'
	},
	contextTextStyle:{
		fontSize:30
	},
	buttonContainer:{
		backgroundColor:'#FFFFFF',
		borderRadius:30,
		borderWidth:1,
		height:30,
		justifyContent:'center',
		alignItems:'center',
		padding:5
	}
});
Home.propTypes={
	navigation:PropTypes.object
};

module.exports = Home;