[英]Displaying icons in tab bar with React Native
I am new to react native and am trying to display icons within my tab menu.我是本地人的新手,正在尝试在我的选项卡菜单中显示图标。
I have tried using FontAwesome, FontAwesome5, react-native-vector-icons and Ionicons.我尝试过使用 FontAwesome、FontAwesome5、react-native-vector-icons 和 Ionicons。 None of these seems to be displaying any icons and I don't know why.
这些似乎都没有显示任何图标,我不知道为什么。
Here is my code.这是我的代码。
const TabNavigator = createBottomTabNavigator({ Home: { screen: HomeScreen, defaultnavigationOptions: { tabBarIcon: ({ tintColor }) => ( <Icon name="home" color="#ccc"size={25} /> ) }, }, Events: { screen: EventScreen, defaultnavigationOptions: { tabBarIcon: ({ tintColor }) => ( <Icon name="home" color="#ccc"size={25} /> ) }, About: { screen: AboutScreen, defaultnavigationOptions: { tabBarIcon: ({ tintColor }) => ( <Icon name="home" color="#ccc"size={25} /> ) } }, { tabBarOptions: { showIcon: true, activeTintColor: '#D4AF37', inactiveTintColor: 'gray', style: { backgroundColor: 'white', }, labelStyle: { fontSize: 20, } } } );
Try this way试试这个方法
const MainNavigator = createBottomTabNavigator(
{
Home: {
screen: HomeNavigation,
navigationOptions: ({navigation}) => ({
title: 'home',
tabBarIcon: <Icon name="home" color="#ccc"size={25} />,
}),
},
{
initialRouteName: 'Home',
lazy: false,
tabBarOptions: {
activeTintColor: '#d63921',
labelPosition: 'below-icon'
},
},
);
feel free for doubts.有疑问请随意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.