将图像添加到react-native stack navitagion选项卡视图页脚

Question

我想在我的反应原生页脚中添加一些图像而不是矢量图标。它试图这样做，但图像没有按预期显示。这是我的代码。我怎样才能做到这一点？ ClickableIcon是一个自定义组件。我想用我的自定义ClickableIcon组件替换Vector Icon

import React from "react";
import { TabNavigator, TabBarBottom } from "react-navigation";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { ClickableIcon } from "../mixing/UI";
import { MainFeedActive, MainFeedInactive } from "../config/images";

import {
  MainFeedScreen,
  WorkoutScreen,
  ProfilePageScreen,
  VideosScreen,
  ChatScreen
} from "../screens";

export const TabNavFooter = TabNavigator(
  {
    mainfeed: { screen: MainFeedScreen },
    workout: { screen: WorkoutScreen },
    videos: { screen: VideosScreen },
    chat: { screen: ChatScreen },
    profile: { screen: ProfilePageScreen }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        // let iconName;
        // if (routeName === "mainfeed") {
        //   iconName = `home${focused ? "" : "-outline"}`;
        // } else if (routeName === "workout") {
        //   iconName = `shield${focused ? "" : "-outline"}`;
        // } else if (routeName === "videos") {
        //   iconName = `television`;
        // } else if (routeName === "chat") {
        //   iconName = `message${focused ? "" : "-outline"}`;
        // } else if (routeName === "profile") {
        //   iconName = `account${focused ? "" : "-outline"}`;
        // }

        let imageSource;
        if (routeName === "mainfeed") {
          // imageSource = `home${focused ? "" : "-outline"}`;
          imageSource = { MainFeedActive };
        } else if (routeName === "workout") {
          imageSource = `shield${focused ? "" : "-outline"}`;
        } else if (routeName === "videos") {
          imageSource = `television`;
        } else if (routeName === "chat") {
          imageSource = `message${focused ? "" : "-outline"}`;
        } else if (routeName === "profile") {
          imageSource = `account${focused ? "" : "-outline"}`;
        }
        <ClickableIcon source={imageSource} />;

        // return <Icon name={iconName} size={25} color={tintColor} />;
      }
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: "bottom",
    tabBarOptions: {
      activeTintColor: "blue",
      inactiveTintColor: "gray"
    },
    swipeEnabled: false,
    lazyLoad: true,
    animationEnabled: false
  }
);