Реактивная навигация v3 tabIcons не отображается

Question

Я выполняю процедуру аутентификации с помощью response-navigation v3, я хочу, чтобы значки и метка отображались на панели вкладок. После реализации значки на панели вкладок не отображают только метку.

//Assigninig of TabBar Icon and Config..
const getTabBarIcon = (navigation, focused, tintColor) => {
  const { routeName } = navigation.state;

  let iconName;
  if (routeName === "Explore") {
    iconName = `ios-heart${focused ? "" : "-empty"}`;
  } else if (routeName === "Inbox") {
    iconName = `ios-mail${focused ? "" : "-open"}`;
  }

  return <Icon name={iconName} size={24} color={tintColor} />;
};

//Creating a BottomTab
const AppTab = createBottomTabNavigator(
  {
    Explore: ExploreScreen,
    Inbox: InboxScreen

  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        getTabBarIcon(navigation, focused, tintColor);
      }
    })
  },
  {
    tabBarOptions: {
      activiTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
);

//Inserting BottomTab Navigation into StackNavigator
const AppStackNavigator = createStackNavigator({
  AppStack: AppTab
});

  //Compiling all Screens into SwitchNavigator
const NavigationConfig = createSwitchNavigator(
  {
    SplashScreen: SplashScreen,
    App: AppStackNavigator,
    Auth: AuthStack
  },
  {
    initialRouteName: "App"
  }
);

Answer 1

Вы не возвращаете компонент в tabBarIcon prop, поэтому просто добавьте возврат, который исправит ваш рендер Icon.

  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        return getTabBarIcon(navigation, focused, tintColor);
      }
    })   
  }

Answer 2

Попробуйте с

import Ionicons from 'react-native-vector-icons/Ionicons';

const AppTab = createBottomTabNavigator(
  {
    Explore: ExploreScreen,
    Inbox: InboxScreen

  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
         const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Explore") {
          iconName = `ios-heart${focused ? "" : "-empty"}`;
        } else if (routeName === "Inbox") {
          iconName = `ios-mail${focused ? "" : "-open"}`;
        }

         return <Ionicons name={iconName} size={24} color={tintColor} />;
      },
      }
    })
  },
  {
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
);

У вас есть опечатка в activeTintColor Подробнее читайте здесь

Blockquote