在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;