I am using react-native-vector-icons/FontAwesome
to show icons and react-navigation
for showing tabs. I am trying to show Home icon in button navigation but icons are not appearing.
PFB relevant code of Icon and createBottomTabNavigator
import React from 'react';
import { createBottomTabNavigator } from 'react-navigation';
// import { Icon } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import Account from '../../Form/components/Account';
import Home from '../../Layout/components/Home';
export const Tabs = createBottomTabNavigator({
Account: {
screen: Account,
navigationOptions: {
tabBarLabel: 'Account',
tabBarIcon: ({ tintColor }) => <Icon name="rocket" size={35} color="#fdc94c" />
}
},
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => <Icon name="rocket" size={35} color="#fdc94c" />
},
}
}, {
order: ['Home', 'Account'],
tabBarOptions: {
showLabel: true,
showIcon: true,
activeBackgroundColor: '#42a5f5',
style: {
backgroundColor: '#42a5f5',
paddingVertical: 10,
height: 60
},
indicatorStyle: {
backgroundColor: '#42a5f5',
}
}
})
PFB screenshot as well.
Make sure that the font is linked in your iOS workspace, by using react-native link react-native-vector-icons
then rebuild the app
Follow the documentation and make sure that everything is set as they mentioned https://github.com/oblador/react-native-vector-icons#ios
Run command npm i -g rnpm. And run the rnpm link on project folder. Then run the project.
Run the following command in your project folder.
$react-native link
您是否已将其粘贴到应用级别 gradle android\app\build.gradle
?
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.