Hello Programmers,
I have some issue with React Navigation , I'm using createBottomTabNavigator to do Tab Navigator, but the icon it does not appear, and then replace the icon with the image it's work correctly and it's not the issue with the react native vector icon because I use them in other screen and it's work,
"react-native-vector-icons": "^6.1.0"
"react-navigation": "^3.0.8"
Other Screen to use the RN vector Icon
import React, { Component } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { createBottomTabNavigator, createAppContainer } from "react-navigation";
import Icon from "react-native-vector-icons/Ionicons";
import Search from "./src/screen/Search";
import Home from "./src/screen/Home";
import Locations from "./src/screen/Locations";
const TabNavigator = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: "Home",
tabBarIcon: ({ tintColor }) => (
<Image
source={require("./assets/rainy.png")}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
)
}
},
Search: {
screen: Search,
navigationOptions: {
tabBarLabel: "Search",
tabBarIcon: ({ tintColor }) => {
<Icon name="ios-search" size={25} color="#4F8EF7" />;
}
}
},
Locations: {
screen: Locations,
navigationOptions: {
tabBarLabel: "Location",
tabBarIcon: ({ tintColor }) => {
<Icon name="ios-map" size={25} color="#4F8EF7" />;
}
}
}
},
{
tabBarOptions: {
activeTintColor: "#e91e63",
showIcon: true,
showLabel: true,
labelStyle: {
fontSize: 14
},
style: {}
},
navigationOptions: {
tabVisiable: true,
activeTintColor: "red",
animationEnabled: true
}
}
);
export default createAppContainer(TabNavigator);
you can use MaterialCommunityIcons like this:
import { MaterialCommunityIcons } from 'react-native-vector-icons';
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
You can find more info here: https://reactnavigation.org/docs/bottom-tab-navigator/
you can try define the icon in navigationOptions
this is docs example
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
with routeName you can put the icon
if (routeName === 'Home') {
return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
}
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.